How does one debug NextJS React apps with WebStorm?
The following steps work for me:
- start the app with next (
npm run devor whatever your start script looks like) - add breakpoints, create JavaScript Debug run configuration, specify
http://localhost:3000URL - 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.
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.