キャッシュてなんなん

next.jsで開発中に出くわす、奇妙な動作やエラー
next.jsのキャッシュクリアコマンドで、サーバーを再起動したら
すんなり正常動作に戻ることに、ふとなぜなのか理由を知りたくなった。

以下のようなトラブルシューティングの時に特に有効

・コードの変更が反映されない
・404エラーが発生する
・モジュールが見つからないエラーが発生する
・ビルドに失敗する

Next.jsのキャッシュについて

キャッシュについて、Claudeに噛み砕いて教えてもらったので
アウトプットしていく。
キャッシュとは、 「再利用するために保存されたデータ」 の事らしい。
主に開発速度を向上させるために使われている。

キャッシュはどこに溜まるの？

Next.jsプロジェクトのルートディレクトリにある、.nextフォルダ
別名「ビルド出力ディレクトリ」
プロジェクトをnpm run devやnpm run buildで実行すると自動的に生成されるらしい

.next/ 　⭐️コレ
├── cache/          # ビルドキャッシュ
├── server/         # サーバーサイドのコード
├── static/         # 静的ファイル（JS、CSS、画像など）
└── ... その他の設定ファイル

具体的に何が溜まるか？
↪︎ Next.jsのビルドツールが生成した全ての一時的なファイルやコンパイル済のコード、最適化されたアセット（画像やCSS）
開発モードでは一部のキャッシュ、本番ビルドでは完全なビルド出力が含まれる

開発速度を向上させてくれるいいやつなのに、なぜたまに問題を起こすの？

理由１：古いキャッシュの使用
　・コードを更新しても、古い状態のキャッシュが使われ続けてしまう
理由２：キャッシュの破損
　・開発サーバーの予期せぬ停止
　・不完全な更新
理由３：依存関係の変更
　・パッケージを更新したけど、キャッシュは古いバージョンのまま

以上のような状態では、Next.jsがファイルがあるはずと考えているところに実際はなかったりとそんな理由でエラーになったりする。

キャッシュのクリア方法

ターミナル

rm -rf .next

一応リスクも知っておきたいよね

キャッシュクリアのリスク

.nextフォルダを削除することにはほとんどリスクは無いらしいが以下の点に気をつけるべし

1. 時間の損失
   ・大規模なプロジェクトでは、最初からビルドし直すのに時間がかかる
   ・通常の開発では数秒〜数分程度ですが、プロジェクトサイズによる
2. 増分ビルドの恩恵が失われる
   ・Next.jsは通常、変更された部分だけを再ビルドする「増分ビルド」を行うらしい
   ・キャッシュクリアするとこの最適化が一時的に失われる
3. 本番環境での注意
   ・本番サーバー上で.nextを削除すると、再ビルドするまでアプリが機能しなくなる😱
   ・デプロイプロセス中に.nextを削除するとデプロイが失敗する可能性

キャッシュクリア、こんな時に使おう

Next.jsの.nextフォルダがなぜ問題の原因になることがわかった今、
以下のような時はキャッシュクリアを試してみよう！

・コードの変更が反映されない
・謎の404エラーが出る
・パッケージ更新後
・設定変更時