Next.JSのVS Code を使ったデバッグは次の2ステップのみでとても簡単に行うことができます
VS Codeの
「エクスプローラー」→「NPMスクリプト」 →「dev」の横の ▶︎ をクリックしてローカルサーバーを起動する。
最初に launch.json があるかどうかのチェックが行われ、まだない場合は作成を促されるので作成します。 launch.json を以下の内容で保存します
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
この設定ファイルでは
Next.js: debug client-side
Next.js: debug server-side
Next.js: debug full stack
と言う3つのデバッグを定義していますので「Next.js: debug client-side」を選択肢で起動します。(クライアントアプリをデバッグしたい場合)
これだけでokです。
後は「F5」でデバッグを起動、「shift+F5」デバッグを終了
のお決まりのキーボード操作をしてください