Next.js を VisualStudioCode(VSCode)を使ってデバッグする方法

Last updated at 2024-03-17Posted at 2023-06-22

概要

フロントエンドにNext.jsを採用して開発を進めた際、そのデバッグの設定に少々手間取ったため、ここに備忘録として残しておきます。

ここではNext.jsのサーバーサイド、クライアントサイド双方のデバッグ環境を整えて行きます。

環境

Windows11, WSL2

❯ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.1 LTS"

Visual Studio Code (VSCode)

Version: 1.79.2

node.js

❯ node --version
v16.17.0
❯ npm --version
8.15.0

Next.js

❯ cat package.json | grep next
"next": "13.2.4",

サーバーサイドデバッグについて

Next.jsはReactベースのフレームワークであり、クライアントサイドとサーバーサイドの両方のレンダリングをサポートしています。この為それぞれの領域におけるデバッグシステムの構築をしなければいけません。

ここではまずサーバーサイドのレンダリング時におけるデバッグの方法を記します。

各種設定

$project_dirはNext.jsプロジェクトを配置したディレクトリとして以下表記しています。

package.json の設定

まず、こちらのファイルにNext.jsをDebugモードで立ち上げるためのスクリプトを設定します。
$project_dir/package.jsonの"scripts"要素の中に"dev"や"start"が既に設定されていたりすると思いますが、ここに"debug"という項目を下記のように追加します。

$project_dir/package.json

"debug": "NODE_OPTIONS='--inspect' next dev"

.vscode/launch.json の設定

次に、$project_dir/.vscode/launch.jsonに以下の設定を追加します。
.vscode/launch.json がない場合はファイルを作成してください。

$project_dir/.vscode/launch.json

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

ブレイクポイントの設定

ここまで設定が終わったら、ひとまずソースコードの中にブレイクポイントを設定します。

サーバーサイドレンダリング時のコードでのデバッグの確認のため、getServerSideProps()の中にブレイクポイントを置きます。

Next.jsの起動

ターミナルを開いてnpm run debugコマンドでNext.jsを起動します。

VSCodeのDebuggerの起動

次に、VSCodeのDebugアイコンをクリックして、先程設定したlaunch.jsonの"Next.js Server"設定を使って、デバッガーを起動します。

するとNext.jsを起動しているターミナルに Debugger attached.のログが流れます。（大事なことなので2度言うスタイル）

ブレイクポイントの動作の確認

これが確認できれば、先程ブレイクポイントを設定したコードの部分を走らせます。

ブレイクポイントでコードが停止すれば成功です。

クライアントサイドデバッグについて

サーバーサイドデバッグと概ね同じ流れとなります。

各種設定

.vscode/launch.json の設定

先程の$project_dir/.vscode/launch.jsonに、今度はクライアントサイドのデバッグ用に以下の設定を追加します。

$project_dir/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next.js Client",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ],
}

先程のサーバーサイドの設定と合わせると全体で以下のようになります。

$project_dir/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      // client side debug
      "type": "chrome",
      "request": "launch",
      "name": "Next.js Client",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      // server side debug
      "type": "node",
      "request": "attach",
      "name": "Nextjs: Server",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "port": 9229
    }
  ],
}