How to debug NextJS application in VSCode?

edit

To debug a NextJS application in VSCode, follow these steps:

1. Install the necessary dependencies: First, install the next and react npm packages as dependencies for your project.

2. Configure your launch.json file: You need to create and configure a launch.json file. In VSCode, open the .vscode folder in your project and create a launch.json file.

3. Add debugging configuration: In the launch.json file, add a configuration to your debug configurations array. Here's an example for NextJS:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Next.js",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "dev"
            ],
            "port": 9229,
            "console": "integratedTerminal",
            "sourceMaps": true,
            "cwd": "${workspaceFolder}"
        }
    ]
}

1. Start debugging: Run the launch configuration by pressing F5 or selecting the configuration and clicking the Debug icon.

2. Debug your application: Once the application is running, you can set breakpoints in your code and use the VSCode debugger to step through your code as it runs.