WebStorm Debugger Not Working with Next.js (Breakpoints Not Being Hit)

Question

I’ve been trying to set up the debugger for my Next.js project in WebStorm, but it’s not working as expected. I’ve read the Next.js and WebStorm documentation multiple times but couldn’t get it to work.

Issue:

I set up an NPM run/debug configuration, but breakpoints don’t work correctly. Instead of stopping at the expected breakpoint, the debugger stops at the <main> tag, which shouldn’t happen.

Here’s an example of my configuration:

This is the default NPM configuration that WebStorm generates when creating a Next.js project. I’ve also tried other configurations, but they either don’t work at all or have the same issue.

What I’ve Tried:

• Adding environment variables like:

  NODE_ENV=development;NODE_OPTIONS=--inspect
  

• Using Node.js debug configurations instead of NPM:
• Running a JavaScript/Browser/Live Edit debugger alongside them.
• Searching online and asking ChatGPT for solutions.

System Information:

• OS: Manjaro Linux
• WebStorm Installation: tar.gz (tarball)
• Package Manager: pnpm (installed using pacman)
• Language: TypeScript
• App router and turbopack not enabled (for now)

Does anyone know how to properly configure WebStorm’s debugger for Next.js so that breakpoints work correctly? Any help would be greatly appreciated!

Answer 1

Same issue, noticed after updating to Next.js 15 + React 19

Update

btw this config for VS Code work fine with Next.js 15 + React 19 https://github.com/vercel/next.js/issues/62008#issuecomment-1943221232