next キャッシュ

Next.jsでローカル開発中に画像キャッシュを無効化（または回避）したいですね！開発中に画像を差し替えても古い画像が表示されると、作業が捗らなくて困ることもありますよね。😅 🛠️

Next.jsの next/image は強力な最適化機能を持っているため、いくつかの方法を組み合わせて対応するのがベストです！✨

1. next.config.js でキャッシュを無効化する ⚙️

最も直接的な方法は、設定ファイルで画像のキャッシュ保持期間（TTL）を 0 に設定することです。

JavaScript

// next.config.js

module.exports = {

images: {

// キャッシュの有効期限を0秒に設定 ⏳

minimumCacheTTL: 0,

},

}

2. ブラウザのキャッシュを無効化する（開発者ツール）🌐

Next.js側のキャッシュではなく、ブラウザが画像を記憶してしまっている場合も多いです。

手順:

ブラウザの デベロッパーツール（F12） を開く。

Network タブをクリック。

Disable cache にチェックを入れる。✅

これで、デベロッパーツールを開いている間はブラウザキャッシュが無視されます！🚀

3. URLにクエリパラメータを付与する（「キャッシュバスティング」）🔗

特定の画像だけを強制的に最新にしたい場合は、画像URLの末尾にタイムスタンプなどを付ける方法が有効です。

TypeScript

<Image

alt="Dynamic Image"

width={500}

height={300}

/>

※ただし、next/image の最適化を通す場合、クエリが変わると毎回新しい画像としてサーバー側でリサイズ処理が走るため、開発中の動作が少し重くなる可能性があります。🐢

4. ローカルのキャッシュディレクトリを削除する 🧹

「どうしても古い画像が残っている！」という時は、Next.jsが生成したキャッシュフォルダを手動で消去して再起動するのが一番スッキリします。✨

プロジェクトルートにある .next/cache/images フォルダを削除してください。

その後、サーバーを npm run dev で再起動すれば、完全にクリーンな状態で始まります！🔥

おすすめの運用方法 💡

基本的には 「2. ブラウザの Disable cache」 を使いつつ、それでもダメなら 「1. next.config.js」 を試すのが、コードを汚さずに済むのでおすすめです！👍

他にご不明な点や、特定のライブラリ（Cloudinaryなど）との連携で困っていることはありますか？😊