How does one debug NextJS React apps with WebStorm?

In the process of debugging a Next.js React application with WebStorm, you can follow these steps to set up and perform debugging:

Step 1: Configure Debug Environment

1. Create a new JavaScript Debug configuration:

   • Open WebStorm, go to the Run menu, and select Edit Configurations.
   • Click the + icon in the top-left corner and choose JavaScript Debug.
   • Enter your application's local development server URL in the URL field, e.g., http://localhost:3000.

2. Configure Source Maps for breakpoint debugging:

   • Ensure source maps are enabled in your Next.js project's next.config.js file. Use the following configuration:

     javascript
     module.exports = {
       webpack(config, options) {
         config.devtool = 'source-map';
         return config;
       },
     };

Step 2: Start the Next.js Application

• Run npm run dev or yarn dev in WebStorm's terminal to launch your Next.js application. Ensure it runs in development mode, as this generates source maps.

Step 3: Launch the Debugger

• Start the debugger using the previously created JavaScript Debug configuration. You can do this by clicking the green debug button in the top-right corner or pressing Shift + F9.

Step 4: Set Breakpoints in Code

• Open the React component or JavaScript file you want to debug.
• Click next to the line number where you want to set a breakpoint; it will appear as a red dot.

Step 5: Interact with the Application in the Browser

• Open a browser (ensure it is supported by WebStorm) and access your application.
• Perform actions to trigger the breakpoint. Once the code reaches the breakpoint, WebStorm will pause automatically, allowing you to inspect variable values, call stack information, and other details.

Step 6: Use the Debugger Panel

• Use the debugger panel at the bottom of WebStorm to view and manipulate the current paused code state.
  • Variables: Inspect variables and objects in the current scope.
  • Watches: Add expressions and monitor their values in real-time.
  • Call Stack: View the current call stack.
  • Step Over, Step Into, Step Out: Control code execution, stepping line by line or into functions.

Example:

Suppose you are developing a Next.js project with a feature that calculates the sum of two numbers and displays the result. Set a breakpoint before the return statement of this function, then use WebStorm's Variables window to inspect input values and computed results. This makes it easy to verify whether the feature executes correctly.

By following these steps, you can effectively debug your Next.js React applications using WebStorm, improving development efficiency and code quality.