How to debug server side nextjs with turborepo?

[dennydharmawan]

Summary

I followed the instructions on https://nextjs.org/docs/pages/building-your-application/configuring/debugging.
Already put cwd. but my breakpoint is still greyed out. I don't think I have the build source maps either. Do i need to tell nextjs to generate source map? not sure what I did wrong.

{
  "version": "0.2.0",
  "configurations": [
    {
      "cwd": "${workspaceFolder}/apps/web",
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "NODE_OPTIONS='-r reflect-metadata' npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "cwd": "${workspaceFolder}/apps/web",
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

Additional information

No response

Example

No response

[icyJoseph]

When the server runs, it often says in which port the inspector is attached, then you need to add that port to your Chrome Node.js inspector

[trevorwhealy]

Thank you, @icyJoseph - this worked for me. By default going to chrome://inspect did not correctly detect the proper port. Once I added it directly under the Connection tab, I was able to get my debugger statements working again.

[jaredcbaum]

This worked for me when using nextjs 15:

{
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/apps/web/node_modules/next/dist/bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithChrome",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      },
      "cwd": "${workspaceFolder}/apps/web"
    }

I'm debugging a nextjs app located at ${workspaceFolder}/apps/web. You can see this reflected in the cwd property.

Note for nextjs 15 the program file path had to be changed to find the right next binary (it was previously loading 14.x.x instead of 15)