2024年12月版 NextJS Windows VSCode デバッグ構成

2024年12月半ばにNextJS公式ドキュメントのデバッグ構成が更新されていたため、
以下に共有します。

前提条件

・Windows(Mac Ubuntsuも可)
・Chrome

設定手順

.vscode/launch.jsonの配置

ルート直下に.vscodeディレクトリを作成し、以下のlaunch.jsonを配置します。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: サーバーサイドデバッグ",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "cwd": "${workspaceFolder}"
    },
    {
      "name": "Next.js: クライアントサイドデバッグ",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Next.js: フルスタックデバッグ",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "args": ["dev"],
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "serverReadyAction": {
        "action": "debugWithChrome",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

公式のlaunch.jsonからは以下の点を変更しています。
・Firefox環境の削除
・名称の日本語化

cross-envのインストール

Windowsで使用する場合、環境変数を設定するコマンドをそのまま使用できないため、
cross-envをインストールする必要があります。

npm i cross-env

package.jsonのnpm run devコマンドの変更

package.jsonのnpm run devコマンドをcross-env用に変更します

package.json

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

以上で設定は完了となります。

使い方

デバッグ構成の選択

VSCodeを開き、
左側のアクティビティバーにある実行とデバッグを選択し、
プルダウンからフルスタックデバッグを選択します。

デバッグ構成の起動

デフォルトでは F5 キーを押すとデバッグ構成が実行され、Chromeが起動します。
*画像はサンプルのプロジェクトです

クライアントサイドの動作確認

コンポーネントなど、クライアントサイドで実行されるファイルにブレークポイントを設定し、ページの更新などを行います。

ブレークポイントを設定した行がハイライトされ、デバッグ構成に変数などの詳細が表示されていれば動作しています。

サーバーサイドの動作確認

テスト用のAPIなどを作成し、ブレークポイントを設置します。

クライアントサイド同様に該当APIが呼び出された時、行がハイライトされていれば正常に動作しています。

設定と動作確認は以上となります。
お疲れさまでした。

参考

公式ドキュメント デバッグ構成

該当ページGitHub

Windows環境でのデバッグについて