【VSCode】Next.jsのコードをデバックする方法

Tl;dr

ルートディレクトリに.vscodeフォルダを作り、launch.jsonを以下の内容で作成する。

$ mkdir .vscode && cd .vscode
$ touch launch.json

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next: Node",
      "type": "node",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    },
    {
      "name": "Next: Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3001",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${webRoot}/*"
      },
      "port": 9222
    }
  ]
}

バックエンド用

SSRやSSGの関数内で使用するため。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next: Node",
      "type": "node",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

request: "launch"を設定している人も多いが、自分は既に起動しているプロセス上でデバックしたかったので、attachを選択。

クライアント用

まずはChrome用の拡張である「Debugger for Chrome」をインストール。
Debugger for Chrome - Visual Studio Marketplace

これをインストールすると、type: "chrome"でエラーが出なくなる。
またクライアント用でもrequest: "attach"ができるみたいだけど、よくうまく動作しなかったので、こちらはlaunchで設定。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next: Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3001",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${webRoot}/*"
      },
      "port": 9222
    }
  ]
}

[参考]
VSCodeで便利にdebugする方法 | CYOKODOG