Next.js recipe doesn't work

[iliran11]

After following the Next.js recipe, i'm getting the following error:
Error: Use env variable NODE_OPTIONS instead: NODE_OPTIONS="--inspect" next dev

After some investigation, I concluded that runtimeArgs should be changed from --inspect to "NODE_OPTIONS=--inspect"

However, vscode debugger doesn't seem to accept "NODE_OPTIONS='--inspect'" as arg. How should I write it down in launch.json correctly?

[xjiaxiang]

I have the same problem so I removed the "--inspect", but I got

Cannot connect to runtime process, timeout after 10000 ms

"next": "^8.1.1-canary.26",

[peterikladious]

I also seem to have the same issue. After attempting to debug it and referencing another issue raised here, it seems this launch config worked for me:

    {
        "type": "node",
        "request": "launch",
        "name": "Next: Node",
        "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
        "port": 9229,
        "env": {
            "NODE_OPTIONS": "--inspect-brk"
        }

    }

[jeff-kilbride]

I'm on MacOS 10.14.5 using nvm for node version management. The config above from peterikladious solved the NODE_OPTIONS error, but I'm still running into problems getting the debugging to work with next.js. Here is my current launch.json config:

    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeVersion": "10.16.0",
      "port": 9229,
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "debug"],
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/.next/server/**/*.js"],
      "smartStep": true,
      "console": "integratedTerminal"
    }

In package.json, I have added the following to the scripts config:

"debug": "NODE_OPTIONS=--inspect next"

This works for starting the server without any errors. However, the sourcemap files for the various /api endpoints I'm trying to debug aren't created until the endpoints are actually hit. So, the sourcemaps don't exist when the debugger starts up and all of my breakpoints are grayed out with the "Unverified breakpoint" tooltip. As expected, when I hit an endpoint that contains a breakpoint, the debugger doesn't align correctly with the code.

I'm having a hard time seeing a solution for this, since the sourcemaps don't exist at the time the debugger starts. Has anyone gotten VSCode debugging to work with next.js in development?

Thanks!

[chayutzee]

I use this setting it work for me. for both client-side and server-side.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Next: Chrome",
            "url": "http://localhost:4000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
            "runtimeArgs": [
                // set custom port to run 
                "-p", 
                "4000"
            ],
            "port": 9229,
            "env": {
                "NODE_OPTIONS": "--inspect"
            }
        }
    ],
    "compounds": [
        {
            "name": "Next: Full",
            "configurations": [
                "Next: Node",
                "Next: Chrome"
            ]
        }
    ]
}

[pom421]

My version, inspired by peterikladious:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Next: Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
            "env": {
                "NODE_OPTIONS": "--inspect-brk"
            },
            "port": 9229,
            "console": "integratedTerminal"
        }
    ],
    "compounds": [
        {
            "name": "Next: Full",
            "configurations": ["Next: Node", "Next: Chrome"]
        }
    ]
}

[cadamsdev]

Duplicate of #80

[vvo]

Hey there, I created a PR on Next.js docs to have Next.js debugging working in either Chrome DevTools or VSCode, appreciate any feedback you have when trying it out on the PR: https://github.com/zeit/next.js/pull/10807/files?short_path=bfcc096#diff-bfcc096377efef455dd348d059704209

I choosed to only attach to the debugger from VSCode instead of trying to completely launch next from VSCode because in many occasions your Next.js application might be loaded by docker/overmind/foreman/heroku local... Let me know what you think!

[tamj0rd2]

NODE_OPTIONS='--inspect' doesn't seem to do anything when using a custom backend server. I'm able to debug my backend code but none of my breakpoints in the front-end work (except for the initial server-side render)

[connor4312]

The next.js recipe has been updated.