ChunkLoadError: Loading chunk app/layout failed. の解決方法

Next.js のローカル立ち上げ時に、以下のエラーが出ることがあります。

そもそも、これ何やねん？

「ChunkLoadError」は、Next.js でコードの分割（chunking）やキャッシュが関係するエラーです。特に、古いキャッシュが邪魔をして、新しいコードのロードに失敗すると発生します。これは、ブラウザやビルドのキャッシュが不整合を起こした場合に起こりやすいエラーです。

.next ディレクトリを削除して、 npm run dev

.next ディレクトリには Next.js のビルドキャッシュが保存されています。このディレクトリを削除することで、Next.js は新しいキャッシュを生成します。これにより、古いキャッシュが原因のエラーが解消されることがよくあります。

このエラーは、ローカルでのコードの変更や依存関係のアップデートにより、キャッシュが古い情報を保持してしまったときに発生しやすいです。また、特定のライブラリや依存関係が不安定な場合にも引き起こされることがあります。

キャッシュをクリアしても解決しない場合

上記の方法でもエラーが解消されない場合は、以下のような追加の対策も検討してみてください。

依存パッケージの再インストール

一部の依存関係が壊れている可能性があるため、node_modules ディレクトリを削除し、再インストールします。

Next.js の「ChunkLoadError」は開発中に突然出てくる厄介なエラーですが、冷静にキャッシュを削除したり依存関係をリセットすることで、解決できることが多いです。このエラーが出たら、まずは .next ディレクトリを削除して、npm run dev を試してみてください。それでもダメなら、パッケージの再インストールやブラウザキャッシュのクリアを試すと良いでしょう。