Nextのキャッシュを確認するためにはクリアを忘れずに
2024-04-23
8 months ago
開発環境
- next 14.2.2
前提
Nextjsを利用する前提です。
本題
Nextjsは裏側でキャッシュを利用してくれているため、開発者体験は良いですが、その反面、気をつけないと開発時に正確にキャッシュの挙動を確認することができないことがあります。
まず前提として、キャッシュについての動作確認ではビルド、プロダクションモードでの起動が必要です。
$ next build
$ next startそして、前回実行時のキャッシュが.nextディレクトリに格納されます。
（next buildではデータフェッチも事前に行い、この結果もキャッシュで残ります）
キャッシュが残ることによって、ソースコードを修正した結果やキャッシュの挙動が正確に把握できなくなります。
開発時は何度も挙動を確認することになると思うので、以下のようなscriptを登録することをお勧めします。
"scripts": {
"dev": "next dev",
"clean-dev": "rm -rf .next/ && next dev",
"build": "next build",
"clean-build": "rm -rf .next/ && next build",
"start": "next start",
},// 開発時もキャッシュを削除してから起動する
$ yarn clean-dev
// プロダクションモードでキャッシュを削除して起動する
$ yarn clean-build
$ yarn start※yarn の部分は適宜利用されているパッケージマネージャに置き換えてください。
さいごに
ひと手間かかりますが、毎回キャッシュを削除することをお勧めします。