1. ホーム /
  2. Blog /
  3. Next.js /
  4. Next.jsのSSR（サーバーサイドレンダリング）のデバッグ方法(VSCode)
Next.js

Next.jsのSSR（サーバーサイドレンダリング）のデバッグ方法(VSCode)

  • 2025.06.03
  • by ShinyaTomozumi
  • 0

近年のNext.jsではSSR（サーバーサイドレンダリング）がデフォルトで設定されております。
私も最近になってNext.jsの開発に携わる事があり、サーバーサイドレンダリングの開発でデバッグ方法についてまとめるようにしました。

0. 環境

  • Next.js 19
  • VSCode 1.100.2

1. Next.jsの準備

まずはサクッとNext.js環境を作りましょう。

npx create-next-app sample-app --typescript

次にNext.jsが起動するかを確認する。

yarn dev

起動を確認したら「Ctrl + C」で終了します。

2. VSCodeでデバッグ環境を作成

Next.jsのプロジェクト一式をフォルダごと「VSCode」にドラッグします。
次にプロジェクト直下に「.vscode」フォルダを作成して、その中に「launch.json」を作成します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: サーバーサイド (yarn dev)",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "yarn",
      "runtimeArgs": ["dev"],
      "console": "integratedTerminal",
      "sourceMaps": true,
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

「src/app/page.tsx」にテストコードを記述し、エディターの左側をクリックするとブレークポイントを設置します。

VSCodeの左メニューの「実行とデバッグ」をクリックし、デバッグボタンを押下します。
するとデバッグ状態でNextjsが起動します。

http://localhost:3000/

ページを表示する際にテストコードに設定したブレークポイントに処理が止まり、変数が見れる状態になっております。

これでNextjsのサーバーサイドレンダリングでのデバッグ環境の構築が完了し開発が進めれるようになってるはずです。