Debugging Next.js in Visual Studio Code is not straightforward because it involves server-side rendering. Next.js will run and execute part of the code on the server side before it returns the result to the browser. You can follow Next.js’s official document for debugging the Next.js application in VS Code to set up your debugging if you are using a single repo for Next.js. However, the setup may need to be modified if you’re using monorepo like NX, Turborepo and etc.

Create launch.json

Create a launch.json in .vscode folder and add the following definition:

{
  "version": "0.2.0",
  "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
  "configurations": [
    {
      "name": "Debug My Next App",
      "type": "node-terminal",
      "request": "launch",
      "command": "cd ../../../ && pnpm exec nx run your-next-app:serve",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome",
        "webRoot": "${workspaceFolder}/apps/your-next-app"
      },
      "cwd": "${workspaceFolder}/apps/your-next-app"
    },
  ]
}

You need to replace your-next-app with your application name.

Debugging with VS Code

Now, you can start your Next.js application by using the VS Code Debugging tool

The debugging will start the Next.js application and you can start to put some breakpoints in your application to check if it’s working for you.

You can also check all the logs in the Debug Console of the VS Code.

Happy debugging!