ホットリロードが効かない主な原因

Next.jsのホットリロード(Fast Refresh)は、開発中にファイルを保存するたびに変更を即座に反映するための機能です。しかし、以下のような原因でホットリロードが効かなくなることがあります。

  • キャッシュの問題:next devでサーバーを再起動する際に、古いキャッシュが残ることがあります。.nextディレクトリを削除して、ビルドし直すことで解決できる場合があります。
  • ファイルシステムの問題:特にDockerやWSL2などの仮想化環境で開発する場合、ファイルシステムの変更が認識されないことがあります。これにより、ホットリロードが機能しない問題が発生します。

基本的な対処法

キャッシュのクリア

まず、開発環境でのキャッシュをクリアし、ビルドをやり直すのが一般的な解決策です。次の手順を試してみてください:

  1. サーバーを停止します(Ctrl + C)。
  2. .nextフォルダを削除します。
  3. next devコマンドで再度サーバーを立ち上げます。
rm -rf .next
npm run dev

これでキャッシュがクリアされ、ホットリロードが正常に動作するか確認できます。

DockerやWSL2環境での問題解決

DockerやWSL2でNext.jsを使用している場合、ファイル変更が即座に検知されないことがあります。この問題は、ファイル監視が正しく設定されていないことが原因です。

  • Dockerの場合:webpackDevMiddlewareでポーリングを有効にすることで解決できます。next.config.jsに以下の設定を追加してください:
module.exports = {
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };
    return config;
  },
};
  • WSL2の場合:WATCHPACK_POLLING=trueという環境変数を設定することで、ファイル変更が適切に検出されるようになります。

カスタムサーバーでの対応

カスタムサーバー(例:Express)を使っている場合、ホットリロードが動作しないことがあります。この場合、/_next/webpack-hmrというホットリロード用のWebSocketリクエストが正しく処理されているか確認が必要です。以下のようにサーバー設定を更新します。

app.all('/_next/webpack-hmr', (req, res) => {
  nextjsRequestHandler(req, res);
});

これにより、ホットリロード機能がカスタムサーバー環境でも正しく動作するようになります。

結論

Next.jsでホットリロードが効かない場合、キャッシュやファイルシステムの問題が主な原因です。DockerやWSL2環境では特にファイル監視の設定に注意が必要です。キャッシュのクリアや適切な設定変更を行い、効率的な開発環境を整えることで、スムーズな開発体験を実現できます。