Next.jsで画像差し替えしても反映されない時の対処法｜1分Tips

"Next.js初心者向けに、画像を差し替えても古いまま表示されるときの対処法を1分で解説します。キャッシュ原因の切り分けと、すぐ効く5つの確認手順をチェックリスト付きで紹介します。"

「画像ファイルを差し替えたのに、画面では古い画像のまま」という状態は、Next.jsでもよく起きます。多くは実装ミスではなく、ブラウザや配信側のキャッシュが原因です。筆者は、まず表示経路を1つずつ切り分ける方法で解消しています。

今日の結論

まずは強制リロードでブラウザキャッシュを除外します

同名ファイルの差し替えは古いキャッシュを引きやすいです

画像名にバージョンを付けると再発しにくくなります

public 配下の参照パスと大文字小文字を確認します

開発サーバー再起動と本番再デプロイで最終確認します

先にやる切り分け（30秒）

次の順番で確認すると、原因を素早く絞れます。

これで新画像が見えた場合、原因はキャッシュの可能性が高いです。

同名ファイルの差し替えは、CDNやブラウザが古いファイルを保持しやすいです。hero.png のまま更新するより、hero-v2.png のように名前を変えるほうが安定します。

Next.jsで public の画像を使う場合、参照は /images/sample.png のように書きます。/public/images/sample.png と書くと意図どおり表示されません。

ローカルでは見えても、本番環境（Linux系）では Hero.png と hero.png を別ファイルとして扱います。ファイル名と参照名を完全一致させます。

差し替え直後に反映が不安定な場合は、npm run dev を再起動してキャッシュ状態をリセットします。

Vercelなどを使っている場合、コミット済みでも最新デプロイが完了していないと古い画像が残ります。デプロイ完了時刻と対象コミットを合わせて確認します。

Next.jsで画像が反映されないときは、実装より先にキャッシュを疑うと解決が早くなります。まずは「強制リロード→ファイル名変更→パス確認」の3手順から試してみてください。

次に読む

本記事は2026年5月28日時点の情報をもとに執筆しています。Next.jsおよび配信基盤の仕様は変更される可能性があります。重要な設定判断は公式ドキュメントもあわせてご確認ください。