How to debug TypeScript server side code of NextJS using WebStorm?

Question

How to debug NextJS API in WebStorm. Also, I am using TypeScript and the app route as it is quite difficult to debug the API using console.log().

Answer 1

You can do this like this:

1. Open the Run > Edit Configurations... dialog in WebStorm.
2. Click the + button to add a new configuration, then select Node.js.
3. Give your configuration a meaningful name, such as “Debug Next.js with Yarn”.
4. In the Working directory, choose the root directory of your Next.js project.
5. For the JavaScript file field, instead of pointing directly to a file, you will use the Yarn command. Therefore, set the Node interpreter to the Node.js binary path, and in the Node parameters field, enter the path to the Yarn binary (usually /usr/bin/yarn or simply yarn if it's in your system’s PATH).
6. In the Application parameters field, type dev to run Next.js in development mode.
7. Confirm the setup by clicking OK.