Docker環境構築におけるnextjsのホットリロード不可問題

Next.jsのホットリロード

Next.jsでのフロントエンド開発の一つのメリットとして、プログラムの変更を行った際にnpm run devコマンドを毎度実行したり、ブラウザでF5キーを毎度押さなくても自動的に内容を変更していってくれる点があるが、dockerでnextjsを構築した際にこの機能がうまく動かなかった。

解決策

https://github.com/vercel/next.js/issues/36774
こちらの記事にあるように、next.config.jsを./ディレクトリに直に作成して、下記のコードを挿入することで解決した。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, context) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300
    }
    return config
  }
}

module.exports = nextConfig