Next.js × Vercel ののキャッシュトラブルシューティングの1つ

Next.js と Vercel の組み合わせはデプロイまでスムーズで、最高な開発手法ですが、
それと同時に、キャッシュ関連で土壺に嵌ることがあります。

そんな時の1つの解決法を共有できればと思います。

【対象者】
・unstable_cache
・キャッシュキー
・fetch　を使ってキャッシュしてるプロジェクト

コードを修正し、Vercelにデプロイした時にキャッシュが上書きされてると思いましたが、実際には上書きはされないため、いろんなところを疑った結果Vercelの下記からキャッシュを削除すると、
想定通り修正のようにキャッシュが効き始めましたのでどうしようのない時は試してみると良いかと思います。

解決策: Vercel の Purge Cache

最終的に、Vercel のダッシュボードから「Purge Cache」機能を使用し、強制的にキャッシュを削除することで問題が解決しました。

手順:

• Vercel のプロジェクトダッシュボードにアクセス
• Settings > Data Cache に移動
• 「Purge Cache」欄を見つける
• 「Purge Everything」を選択して実行

これにより、すべてのデータキャッシュが削除され、次回のデプロイやリクエスト時に新しいデータがフェッチされるようになりました。