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?

Answer 1

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.

Answer 2

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.