Next.js + Webpack5 + Dockerでファイル変更時にリロードをできるようにしたメモ

概要

next.jsで開発サーバでの検証中、ファイルを保存したときに、自動でブラウザが更新されるようにしたかった。
ホットモジュールリロードとか、Next.js 9.4以降ではFast Refresh とか言われてるやつ。
Dockerで動かすときは、CHOKIDAR_USEPOLLING=trueの環境変数を設定すればよかった(*)が、webpack5を利用するようにしたら動かなくなった。
リロードができるように調査を行う。

結論

• next.config.jsの設定でポーリングを指定で解決。
• CHOKIDAR_USEPOLLINGの環境変数設定は不要になった。

next.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const nextConfig = {
  future: { webpack5: true },
  webpack: (config) => {
    config.watchOptions = {
      aggregateTimeout: 200,
      poll: 1000,
      ignored: /node_modules/,
    }
    return config
  },
}

module.exports = nextConfig

参考用ソース

調査

• webpack5のリリースを読むと、chokidarを利用しなくなっている。（参考：webpack news)

• webpack方式でpollingの設定を行う。（参考：webpack configuration)
  npm run dev ... 以下のエラーが出るようになった。

Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/app/node_modules/next/dist/next-server/lib/router/utils/resolve-rewrites.js'

• ignoredに/node_modules/を追加することで解決。