Next.js 16をdockerで立ち上げた際にホットリロードが反応しなかった

この記事の経緯

現在、DockerとNext.jsを使って個人用のポートフォリオサイトを作成しています。
環境構築のために docker-compose.yaml を記述してコンテナを起動したところ、Next.jsのホットリロードが効かないことに気がつきました。

Qiitaなどで同じ現象について書かれた記事をいくつか参考に試してみましたが、私の環境ではそれでもホットリロードが機能しませんでした。
最終的に無事解決することができたため、同じ問題でつまずいている方の参考になればと思い、この記事にまとめます。

前提となるDocker環境の構成

参考までに、私が構築した環境の設定ファイルは以下の通りです。

Dockerfile

FROM node:latest

docker-compose.yaml

services:
  app: #Next.js
    build:
      context: .
      dockerfile: Dockerfile

    working_dir: '/app'

    tty: true
      
    volumes:
      - ./frontend/:/app
    
    environment:
      - WATCHPACK_POLLING=true

    command: sh -c "npm run dev"
    
    ports:
      - "3000:3000"

---

他の記事を参考に、docker-compose.yaml には以下の環境変数を追加していました。

+ environment:
+   - WATCHPACK_POLLING=true

起動コマンド

Next.jsのプロジェクトは以下のコマンドでコンテナ内から作成しています。

docker compose run --rm app sh -c "npx create-next-app"

プロジェクト名（What is your project named?）を聞かれた際は . を入力し、frontend ディレクトリ直下に展開させました。

原因と解決策

結論から言うと、Next.js 16はデフォルトでTurbopackが採用されているため、Webpack用の設定である WATCHPACK_POLLING=true が無視されていたことが原因でした。

いくつかアプローチはありそうですが、今回は確実な方法として、package.json の起動スクリプトを修正し、Turbopackではなく Webpack を使用して起動するように変更しました。

"scripts": {
-   "dev": "next dev",
+   "dev": "next dev --webpack",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }

この変更を加えた後、コンテナを再起動します。

docker compose up

これで無事にホットリロードが効くようになるとおもいます！

その他（Turbopackのまま解決する別のアプローチ）

もう一つの解決策として、next.config.ts に設定を書き込み、1秒おきにファイルの変更をポーリングする方法（Turbopack向け）も挙げられていました。

私の環境ではうまく動作しませんでしたが、「こういう手もあるよ」という参考資料としてリンクを残しておきます。
https://github.com/vercel/next.js/issues/80665

最後に

今年で専門学校を卒業するため、残りの学生期間でさらに技術を深めていきたいと考えています。
この記事が少しでも同じエラーで悩む方の助けになりましたら、いいねをしていただけると励みになります！

よいホットリロードライフを！