next.jsでまたもやハマりかけたのでその時の記録です。

結論から書くとnext.config.jsを以下のように変えたらホットリロードされるようになりました。

module.exports = {
  reactStrictMode: true,
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
}

next.jsで環境を作ったらホットリロードされなかった

dockerでcreate-next-appしたらglob error Error: EACCES: permission deniedが出た

上記の記事で環境構築に手こずり、なんとか環境ができたと思ったら今度はホットリロードに躓きました。

reactの勉強をしてるときはサーバーを起動している間ホットリロードされていたのでそのノリで修正を入れるも全然反映されない…。

ただ、reactのときもdocker環境はなんか設定入れないといけなかったなーと思い調べると「CHOKIDAR_USEPOLLING=true」にたどり着く。

そうそうこれこれ、と追加するも全然ホットリロードされない。

next.jsの場合はnext.config.jsを変更すればいいらしい

あとは冒頭の結論に戻ります。

next.jsにはnext.config.jsという設定ファイルがあるらしく、こちらを編集したらいけました。

next.config.js

嬉しいですが、フロント開発って毎回環境周りで1日くらい潰す気がします…。

ローカル汚したくないのでvagrant + dockerで環境構築してますが、それが原因で逆に時間がかかるのも考えものだな、と思います。
とはいえ、どうしようもなくなるまではこれで行くつもりですが。

参考

以下参考リンクです。
大変助かりました、ありがとうございます。

Next.jsのdockerコンテナでホットリロードされないときの解決法
Next.js docker on windowsでhot reloadが効かない場合の対処法