VSCode + Next.js + Docker (+ Chrome)でデバッグ （サーバーサイド・クライアントサイド両方に対応）

先人たちの事例を自分の環境なりに再現させて、事例をもう一つ増やしました （こんなんなんぼあってもいいですからね）
Chromeがカッコ付けなのはクライアントサイドのデバッグのみ利用するためです

前提

1. デバッグ用ブラウザはChrome
   他のブラウザの場合はよしなに設定等を読み替えてください
2. Next.jsのバージョンは9
   多分10でも動きますが未検証です

実施内容

1. Debugger for Chromeのインストール

2. .vscode/launch.jsonを作成して、以下の内容を記述

{
    "version": "0.2.0",
    "configurations": [
        // For server side rendering debug
        {
            "type": "node", // 固定
            "request": "attach", // 固定
            "name": "Next: Node", // 好きな名前で
            "port": 9229, // 3. のポートと合わせる
            "address": "localhost", // 基本的に固定
            "localRoot": "${workspaceFolder}", // 固定
            "remoteRoot": "/src", // Docker内のモジュールのRootディレクトリ
            "protocol": "inspector" // 固定
        },
        // For client side rendering debug
        {
            "type": "chrome", // 固定 (ブラウザを変えたい場合は1.のインストールとともに変更してください
            "request": "launch", // 固定
            "name": "Next: Chrome", // 好きな名前で
            "url": "http://localhost:3000", // DockerComponseのポートと、サービスのディレクトリなど、お好みでカスタマイズしてください
            "webRoot": "${workspaceFolder}", // 固定
            "sourceMapPathOverrides": { // 固定
                "webpack:///./*": "${webRoot}/src/*"
            }
        }
    ]
}

3. package.jsonのscriptに以下の内容を追加し、Next.jsのDockerを起動

"dev": "node --inspect=0.0.0.0:9229 node_modules/next/dist/bin/next"

Docker(Compose)が起動する内容を上記にしてください。devである必要はありません。ポートなどはよしなに

4. 実行の中のNext: NodeとNext: Chromeをそれぞれ実行

4.1 Next: Chromeを起動すると、1で導入したデバッグ用のChromeが起動します

5. 下のバーが赤くなったら成功

以上でクライアントサイド、サーバーサイドそれぞれで、ブレークポイントを貼った場所に止まります
クライアントサイドは、4.1で起動したChrome内で画面を描画しないと止まらないので注意

参考

【VSCoe】VisualStudioCodeでDockerのNode.jsにリモートデバッグしてみよう【Nust.js/Vue.js】
【console.logとはおさらば】Next.jsをVSCodeでデバッグさせる方法
Visual Studio CodeでJavaScriptのデバッグ方法