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

![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/2e3feea7-0604-1213-09d8-ca3df994a5dd.png)

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

![{C0A6DD72-CCEB-4054-A154-098AB950CF53}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/cc8d9905-e25d-6a98-4405-50caccd5d7cf.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/2b5446b3-0d1a-c400-7a34-074b2b5da849.png)

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

![{D11344F0-4579-46BC-8BF3-CDC9DFA55F7B}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/c9fc05e1-3960-9a9b-5aad-c6d717976597.png)

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

## サーバーサイドの動作確認
テスト用のAPIなどを作成し、ブレークポイントを設置します。

![{702BA542-75BC-4D0F-9D54-DC39ABD77185}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/c8502b26-6804-6758-0c0a-85d854076242.png)

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

![{D2104EEE-7755-446C-A318-061F4FD0B9AE}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3840466/82819103-7fcc-bc50-33a6-38022b23f1d6.png)

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

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

https://nextjs.org/docs/app/building-your-application/configuring/debugging

該当ページGitHub

https://github.com/vercel/next.js/blob/canary/docs/01-app/03-building-your-application/07-configuring/16-debugging.mdx


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

https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-on-windows