Debugger Not Hitting Breakpoints in Next.js with VS Code

Question

I've been trying to debug my Next.js app using VS Code, but the debugger isn't hitting the breakpoints, even though I've configured everything correctly (I think!). Here's what I've done so far:

Steps I've Taken:

1. I run the app using:

   npm run debug
   

   This corresponds to the following script in my package.json:

   "scripts": {
     "debug": "cross-env NODE_OPTIONS='--inspect' next dev"
   }
   

2. I set breakpoints in my code, then reload the page in the browser to hit the breakpoints.

3. I press F5 in VS Code to start the debugger. My launch.json file is attached as a screenshot below.

4. My tsconfig.json has sourceMap: true set up correctly for source maps.

Problem:

Despite following these steps, the breakpoints are not getting hit, and the debugger doesn’t pause execution at the expected lines. When I run a simpler JavaScript file, everything works fine. The issue only seems to happen with my Next.js app.

Here’s My launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Next.js",
            "skipFiles": ["<node_internals>/**"],
            "port": 9229
        }
    ]
}

What I've Tried So Far:

• Running npm run debug as described.
• Using npx to ensure the local version of Next.js is running.
• Clearing Next.js cache using npm run build -- --no-cache.
• Ensuring that source maps are correctly enabled with sourceMap: true in my tsconfig.json and Next.js config.

Has anyone else run into this issue? What could I be missing in the setup to ensure the debugger hits the breakpoints in a Next.js app?

Answer 1

What helped me:

I managed to solve the issue by switching to WebStorm. The Next.js debug configuration works well there, and breakpoints are successfully hit.

However, I’m still looking for a solution to get this working in VS Code. Here’s what I’ve tried so far that didn’t work:

1. Followed the steps in this article for debugging Next.js in VS Code.
2. Tried creating a web app configuration in launch.json instead of the Node.js configuration, but the breakpoints still don’t get hit.

The question remains open for how to get breakpoints working correctly in VS Code for Next.js. Any insights would be appreciated!

Answer 2

I've had similar issues working with Turbopack.

You can refer to the basic guidelines at https://nextjs.org/docs/app/guides/debugging for more information.
Focus on the part "If you're running Next.js from a directory other than root (for example, if you're using Turborepo) then you need to add cwd to the server-side and full stack debugging tasks. For example, "cwd": "${workspaceFolder}/apps/web"."

I still had issues with Turbopack; it seems that as of mid-2025, it isn't so stable.
I removed the same from the package.json file:

"scripts": {
    "dev": "next dev --turbopack"

}

Removing the turbopack, it looks like
"dev": "next dev"

This will make the application move to the Webpack (/default bundler), which solved it for me.