Docker環境でNext.jsのhot reloadが効かない

はじめに

新卒で入社して半年過ぎました。早いです、、、

最近、技術ブログの方を更新してなくて反省です。
業務では、RailsとNext.jsを扱った案件で新卒ながらバックからフロント、Dockerの構築からAWSまでと結構色々な業務に携わらせてもらってとてもありがたい感じです。
新しくNext.jsの導入作業や新機能を開発してたりとドタバタしてました。

今回は、業務中にあったDockerでNext.jsを構築した際に起きるhot reloadが効かないというものについての対処法を記述していきたいと思います。

ホットリロードとは

ホットリロードとは、開発中にコードを変更したときにリアルタイムに反映されて、変更後の内容をプレビューすることが可能な便利な機能です。
アプリの再起動は必要ありません。

対処法

WATCHPACK_POLLINGの設定

環境変数にWATCHPACK_POLLINGを追加してtrueにする必要があります。

docker-compose.yml

  frontend:
    enviroment:
        - WATCHPACK_POLLING=true

こちらで、WATCHPACK_POLLING=trueの設定は完了です。

next.config.jsに設定

next.config.js(mjs)にwebpackプロパティを追加していきます。

next.config.js

    /** @type {import('next').NextConfig} */
    const nextConfig = {
      reactStrictMode: true,
+     // hot reload
+     webpack: (config, { dev }) => {
+       if (dev) {
+        config.watchOptions = {
+           poll: 1000,
+           aggregateTimeout: 200,
+          };
+        }
+       return config;
+     },
    }

こちらで0.5秒の遅延が入りますが、ホットリロードの設定が完了です。

まとめ

思ったりよりも簡単に実装できるのでよかったです。
皆さんも是非、参考にしてみてください。