I encountered a similar issue when trying to place red dots on the sidebar in VSCode.

Fortunately, there is a workaround available. Instead of clicking to set the red dot on the desired line, simply type "debugger" on that line. It's strange that one method works while the other doesn't - perhaps a small adjustment could enable the clicking feature to function properly? Currently, this approach has been working well for me with the API routes:

npm run dev

To attach the debugger, use the following launch.json configuration. In my case, the Next.js project was located in a subfolder within my workspace folder, so I had to adjust the configuration accordingly to match the root of the project with the $workspaceFolder.

{
    "name": "Attach",
    "port": 9229,
    "request": "attach",
    "webRoot": "${workspaceFolder}", // my project had an additional subfolder here
    "cwd": "${workspaceFolder}",     // and here
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "pwa-node"
},

In VSCode, insert the breakpoint wherever needed like so:

handler.get(async (req, res) => {
  debugger;

  console.log....
});

You should see something similar to this setup

I encountered a similar issue, but managed to resolve it through a two-step process:

1. To start, I included a line in my VSCode settings.json file:

   "debug.javascript.usePreview": false

2. Additionally, I made sure not to use

   NODE_OPTIONS="--inspect"

After making these adjustments, you may still encounter unbound breakpoints. However, by running the application and setting the breakpoint again, it should turn red and function properly.

Update

In some cases, I faced difficulty setting breakpoints on API calls. After spending some time investigating the root cause, I discovered the problem:

When running a Next.js app, Node first executes the next script, which then spawns a child process containing your code. Next.js automatically sets NODE_OPTIONS=--inspect when in development mode, but with a different port number that changes dynamically. The CRUCIAL POINT is this: The debugging port numbers for the Next script and the child process differ, resulting in occasional inability to set breakpoints.

Here are a few scenarios:

1. If you manually start the server in the VSCODE terminal by entering "npm run dev," VSCODE will easily locate the debugging ports and everything should work smoothly.
2. If you launch the server outside of VSCODE from a terminal and then utilize attach, VSCODE will only attach to one port, typically linked to the Nextjs script. This explains why you might struggle to set breakpoints in your own code.
3. Using the launch method to initiate the server in launch.json leads to a similar outcome as No.2 - breakpoints cannot be set effectively.

A simple solution exists: Either commence the server from the VSCODE internal terminal or include the following line in your launch.json:

  "autoAttachChildProcesses": true,

This configuration enables smooth debugging operations by pressing F5.

   {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "autoAttachChildProcesses": true,
    }

No need to add NODE_OPTION='--inspect' or modify

"debug.javascript.usePreview": false

Although it may seem like a delayed response, I wanted to share some potentially valuable information for others. Following the guidelines outlined here https://nextjs.org/docs/advanced-features/debugging proved to be successful in my case. It's important to copy the relevant section for debugging full stack applications and make sure to adjust the directory path if your code is located in a subfolder. This setup worked effectively for me:

 {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "cwd": "${workspaceFolder}/client",
            "serverReadyAction": {
                "pattern": "started server on .+, url: (https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        }

If you're looking to run and debug NextJS/NodeJS/ExpressJS on VSC 1.91.1 in July 2024, follow these simple steps:

1 - Start by clicking here: https://i.sstatic.net/3GFaVQrl.png

2 - Next, click on this link https://i.sstatic.net/bZAZBNiU.png

Select the script you wish to run from the list provided. All scripts listed in the package.json file should be available. Personally, I tried using "Run Script: dev" https://i.sstatic.net/J4I0hr2C.png

3 - Finally, hit the run button https://i.sstatic.net/WitoQBTw.png

This issue has been persisting for over two years now, and it's surprising to see that the Next team hasn't taken the time to update their documentation. The solutions were available all this time.

Issue 47561

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