なぜか僕の環境だとNext.jsでwebpack5を使うとHotReloadがうまく動作しませんでした。

そのため、webpack5:falseにしてwebpack4で buildしていたのですが、解消方法がようやく分かりました。

以下が参考になりました。

https://github.com/vercel/next.js/issues/22317#issuecomment-863752692

手順

.envファイルをプロジェクトのルートに配置します。（.env.localでも OK）

以下の記述を追加します。

WATCHPACK_POLLING=true

これだけで OK です。

npm run devすれば、Hot Reload が上手く動作していると思います！

next のバージョンが問題？かもしれないので、一応以下のバージョンで動作確認しています。

"next": "^11.0.1"

build 時間

webpack5で動作させること build すると build 時間が大きく変わりました。

私の環境だと、

• webpack4 → 58s
• webpack5 → 20s

となり、大体 1/3 ぐらいの時間で build できるようになりました。

まとめ

build の時間的にもwebpack5は、かなり優れているなと思います。

同じようにHotReload が動作しない方はお試しください！

※Hot ReloadからFast Refreshに名前変わってるみたいですね・・・