How does one debug NextJS React apps with WebStorm?

Question

I'm trying to use the WebStorm IDE debugger to debug a NextJS React app. I tried to use a JavaScript configuration, but that didn't seem to work -- neither when I used a Node config.

What's the correct procedure for debugging NextJS React apps with WebStorm?

lena · Accepted Answer · 2019-01-25 13:00:49Z

48

The following steps work for me:

start the app with next (npm run dev or whatever your start script looks like)
add breakpoints, create JavaScript Debug run configuration, specify http://localhost:3000 URL
debug

If you like to debug the code that is executed on the server side, I'd suggest using the Node.js run configuration with node_modules\next\dist\bin\next specified as Javascript file:

You can then debug both Node.js and Javascript Debug run configurations to get both server-side and client-side code debugged.

answered Jan 25, 2019 at 13:00

lena

94.4k11 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cerulean Over a year ago

Thanks, that seems to work with simple projects, but in the project I'm working on the "pages" directory is not in the project root, but some levels down, '/src/common/pages' and when I launch the debugger I get the error "Debugger attached. > Couldn't find a pages directory. Please create one under the project root". I am trying at the moment to debug a node module at the moment, so I don't want to set the project root to the 'common' directory...

andras Over a year ago

In my case, there was no .next/dist/bin/next file, regardless of production or dev deploy. Clicking the debug mode on package.json's next script seemed to work for the server side debug.

Soichi Takamura Over a year ago

I confirmed that next command in package.json scripts just starts debugging with Node 12.14.1, while v13.3.0 couldn't connect the debugger.

Anton23 Over a year ago

I can confirm that this works on NextJs version 14.1.0. Thanks for help!

Neil · Accepted Answer · 2024-10-08 05:54:58Z

43

I found that clicking the play button next to dev in package.json and selecting the debug option worked for debugging my API served by Next.js.

This automatically creates the run configuration. Breakpoints are flakey though, I think because I'm using TypeScript. I need to edit the file after adding the breakpoint for them to work.

see official docs for more details: https://www.jetbrains.com/help/webstorm/running-and-debugging-node-js.html

edited Oct 8, 2024 at 5:54

Neil

8,8326 gold badges55 silver badges62 bronze badges

answered Dec 9, 2020 at 20:43

David Gilbertson

4,9341 gold badge32 silver badges34 bronze badges

6 Comments

Garrett Over a year ago

It doesn't stop at the breakpoints me even if I edit the file. Although I am using PyCharm pro version, not WebStorm.

learnercys Over a year ago

same for me using WebStorm, some of the breakpoints seems to be working, but not all of them.

Nils Over a year ago

If only some of your breakpoints are working, it could be that you're only capturing server-side or client-side breakpoints. Remember NextJS can run the same code server-side (SSR) or client-side

Mohmmad Ebrahimi Aval Over a year ago

@Nils Works for me on the server but don't detect breakpoints in Browser! how can fix it?

Ale Prieto Over a year ago

I think we have to add the breakpoint on the generated .js file... it seems to work there...

|

yonadav bar ilan · Accepted Answer · 2022-01-06 07:08:47Z

for the Frontend of next.js:

Start debugging your app right from the Run tool window below ↓. Just hold Ctrl+Shift / ⌘⇧ and click the URL address where the application is running. WebStorm launches the auto generated Debug Application run/debug configuration, the browser opens at http://localhost:3000/, and the Debug tool window appears showing you the call stack and variables.

https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/#launch_a_debugging_session

he say Next js You say Create React App?!! do not useful for Next js.
@MohmmadEbrahimiAval No, I'm actually demonstrating how to do this in a NEXT.JS app. and since it's identical to react I also provided further instructions...

Tim White · Accepted Answer · 2025-03-18 16:08:10Z

1

In 2025, you need to disable the --turbopack option run the dev run configuration for debugging to work in webstorm.

I made a dev-no-turbo run configuration in package.json for use in debugging:

"dev": "next dev --turbopack", "dev-no-turbo": "next dev",

answered Mar 18 at 16:08

Tim White

3752 silver badges8 bronze badges

2 Comments

Dmitrii Kuznetsov May 13 at 23:09

Excluding --turbopack worked for making execution stop at breakpoints for me!! But I also have a visual glitch: it's not the line with breakpoint that gets highlighted with blue color – but rather another line that is 7 lines above the breakpoint. 🤷‍♂️🙂 Did you have similar experience?

Tim White May 15 at 1:58

Hmm, I did not!

mialkin · Accepted Answer · 2024-02-04 19:19:33Z

I tried using both WebStorm and Rider, and in both of these IDEs, breakpoints randomly stop being hit after some time.

As a workaround, I just stop and rerun the process, which makes breakpoints hit again.

If there is a better way to cope with this weird problem, I'd love to hear it in the comments.

Dan Luba · Accepted Answer · 2024-04-09 01:36:26Z

For the front end, try adding a "Launch Web Browser" action to your dev configuration's "Before Launch" list, and enable Javascript debugger:

and then click the debug icon, here:

This is the only way I've managed to get it working.

Collectives™ on Stack Overflow

How does one debug NextJS React apps with WebStorm?

6 Answers 6

4 Comments

6 Comments

3 Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

6 Comments

3 Comments

2 Comments

Comments

Comments

Related