Next.js + VS Code のデバッグ時にブレークポイントがとまらないときの対応方法

自分への備忘録。

基本的には、この記事の通りにやれば OK。
https://qiita.com/dtakkiy/items/056867930e66f3489211#クライアントサイドのデバッガの起動

ただしプロジェクトのディレクトリ構成が次のような構成のときうまくいかない。

- ${workspaceFolder}
  - .vscode
    - launch.json (ここにデバッガ用の設定を書く)
  - app_nextjs (ここに Next.js のアプリケーションが入っている）
    - package.json
    - node_modules/
    - pages/
    - ...

世の中のたいていの解説は、app_nextjs ディレクトリの下に .vscode が来る前提のもの。しかし、そうでない場合、正常にデバッガが起動しない。

Next.js アプリケーションがどこにあるのか伝える必要がある。

lanuch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js サーバサイド用のデバッガ設定",
      "type": "node",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229,
      "cwd": "${workspaceFolder}/app_nextjs"
    },
    {
      "name": "Next.js クライアントサイド用のデバッガ設定",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:8888",
      "webRoot": "${workspaceFolder}/app_nextjs",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${webRoot}/*"
      }
    }
  ]
}

• サーバサイド: "cwd": "${workspaceFolder}/app_nextjs" を追加
• クライアントサイド: "webRoot": "${workspaceFolder}/app_nextjs" と書き換え