Next.js VSCode debugging options

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Modified: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "serverReadyAction": {
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "action": "debugWithChrome"
            }
        },
        {
            "name": "Next.js: debug server-side",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev-inspect"
        },
        {
            "name": "Next.js: debug client-side",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000"
        },
        {
            "name": "Next.js: debug full stack",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/.bin/next",
            "runtimeArgs": [
                "--inspect"
            ],
            "skipFiles": [
                "<node_internals>/**"
            ],
            "serverReadyAction": {
                "action": "debugWithChrome",
                "killOnServerStop": true,
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "webRoot": "${workspaceFolder}"
            }
        }
    ]
}

• Full Stack for NextJs 14+ using app router - https://himynameistim.com/blog/debugging-nextjs-14-with-vscode
• NextJS recommendations: Next.js https://nextjs.org/docs/pages/building-your-application/configuring/debugging