Debug nextjs dengan vscode

konfigurasikan Next.js untuk mulai debug mode

 "scripts": {
   "dev": "next",
   "dev:debug": "NODE_OPTIONS='--inspect' next",
  }

Untuk Sistem Operasi Windows perlu install cross-env

 "dev:debug": "cross-env NODE_OPTIONS='--inspect' next dev",

Konfigurasikan VS Code sehingga terhubung ke aplikasi Next.js Anda yang sudah dimulai.

Buat file .vscode/launch.json at the root project anda:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: attach",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "restart": true
    },
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "yarn dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

Tahap akhir

mulai run scripts

npm run dev:debug
// atau
yarn dev:debug

kemudian start debug di vscode (tekan F5)