2020年12月23日 • ☕️ 4 min read
English

Next.jsのデバッグと言えば、console.logを思い出すことが多いでしょう。オフィシャルサイトにデバッグする方法が公開されていますが、クライアント側のデバッグ方法が書いてありません。Next.js+Typescriptの組合せのデバッグ方法もありません。

今日クライアント側でNext.jsのデバッグする方法を紹介します。※pagesなどを全部./srcフォルダにおきます。

まず、オフィシャルサイトのデバッグ方法はこちらへ

共通設定

いずれのデバッグでも、先にnpm run devでプロジェクトを起動しなければいけません。

サーバ側のデバッグ

オフィシャルサイトに書いてあるように、まずpackage.jsonのdevにNODE_OPTIONS='--inspect'を追加する必要があります。

Copy
{
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev ./src"
  }
}

さらに、.vscode/launch.jsonに下記のように定義してください。

Copy
{
  "type": "node",
  "request": "attach",
  "name": "Next: Node",
  "skipFiles": ["<node_internals>/**"],
  "cwd": "${workspaceFolder}/src",
  "port": 9229
}

npm run devでプロジェクトを起動した後、Next: Nodeというデバッグを起動すればOKです。ブレークポイントを追加すれば止まるが、SSR(Server Side Rendering サーバーサイドレンダリング)の部分しか止まりません。例えばonChangeに何があったかを検知したい場合、クライアント側でのデバッグを有効にしなければいけません。

クライアント側のデバッグ

あまり資料が少なく大変だったが、下記の設定を.vscode/launch.jsonに追加すれば一応デバッグできそうです。

Copy
{
  "type": "chrome",
  "request": "launch",
  "name": "Next: Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

しかし、このデバッグコンフィグで起動しても、この設定だっと、VSCodeにブレークポイントをつけても止まりません。まずChromeのdevtool(F12で)開いてみましょう。

source → _N_Eフォルダに、sourcemapが効いているソースコードを見つけました。ここにブレークポイントをつけると、ちゃんと止めてくれます。

chrome1.jpg

_N_Eは何?!Next.jsのソースコードを確認すればわかりましたが、これはクライアント側のみつけたライブラリの名称となります。(もしかしてNext.jsの頭2文字?)

https://github.com/vercel/next.js/blob/9b3edd3b2476b9915fe8c94071a77ac8e8f14499/packages/next/build/webpack-config.ts#L806

ne.jpg

Webpack5の対応らしいです。なので、.vscode/launch.jsonにsourcemapパスをoverrideすればVSCodeでもクライアント側のブレークポイントを付けられるようになるでしょう。

Copy
"sourceMapPathOverrides": {
  "webpack://_N_E/*": "${webRoot}/*"
}

全ての設定内容(.vscode/launch.json)

Copy
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Next: Node",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}/src",
      "port": 9229
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next: Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${webRoot}/*"
      }
    }
  ]
}

完了

VSCodeでNext.jsのデバッグライフをお楽しみに!

サンプルプロジェクト


関連投稿

Next.js + material-ui + styled-componentsの型安全のテーマカスタマイズ

2022年1月16日

ThunderMiracle

Blog part of ThunderMiracle.com