How does one debug NextJS React apps with WebStorm?

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:

enter image description here

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)