Next.jsのpublic/images配下に画像を置く理由

Next.js のプロジェクトで記事用の画像を追加するとき、どこに保存して、本文からどう参照すればいいのか迷うことがあります。src 配下に置いてみたものの読み込まれない、相対パスで書いたのに表示が崩れる、といった経験をした方も多いのではないでしょうか。

筆者の整理では、ブログ記事の画像は public/images 配下に保存し、本文からは絶対パスで参照するのが基本になります。今回はその理由と書き方を整理します。

今日の結論

• public/images 配下に置いた画像は、そのまま /images/... という URL で配信されます
• Markdown や記事コンポーネントから参照するときは、相対パスではなく絶対パス（/images/...）を使います
• パスの先頭に /public/ を含めるのはよくある間違いです
• 差し替えても表示が変わらない場合は、ファイル名やキャッシュを確認します

public/images配下の画像はどう配信されるのか

Next.js では、public フォルダ配下に置いたファイルが、そのままサイトのルートディレクトリから静的に配信されます。たとえば public/images/blog/記事slug/sample.png に保存した画像は、本番環境では /images/blog/記事slug/sample.png という URL でアクセスできます。

このとき、パスの中に public という文字列は含めません。public はあくまでローカルのフォルダ名であり、配信される URL には反映されない、という点が最初に引っかかりやすいポイントです。

なお、これは執筆時点（2026-06-24）の Next.js における static 配信の挙動に基づく整理です。バージョンによって配信方法が変わる可能性があるため、不明な点は公式ドキュメントもあわせてご確認ください。

Markdownやコンポーネントでの参照方法

画像を記事に反映するときは、次の順番で進めると迷いにくくなります。

1. public/images/blog/記事slug/ に画像を保存する
2. 記事本文では /images/blog/記事slug/sample.png のように、絶対パスで参照する
3. パスの先頭に /public/ を含めない（含めると画像が見つからない原因になります）

相対パス（./images/... や ../images/...）で書いてしまうと、記事のルーティングによって表示位置がずれたり、本番環境だけ表示されなかったりすることがあります。記事内の画像参照は、基本的に絶対パスに統一しておくと安全です。

差し替えても表示が変わらないときの注意点

画像ファイルを上書きしたのに、ブラウザ上では古い画像のまま表示される、ということもあります。これはファイルの問題ではなく、ブラウザやCDN側のキャッシュが残っている可能性があります。

1. ファイル名を変える、またはキャッシュ削除を検討する（同じファイル名のまま上書きすると、キャッシュが残りやすくなります）
2. build 後に本番URLで実際の表示を確認する

ファイル名にバージョンを付ける（例: sample-v2.png）などの工夫をしておくと、差し替え時の確認がしやすくなります。

チェックリスト

まとめ・次に読む

public/images 配下に置いた画像は、フォルダ名をそのまま URL に含めず、絶対パスで参照するのが基本です。差し替え時に表示が変わらない場合は、まずキャッシュ側の可能性を確認してみてください。

• Hub記事: サイト公開シリーズ
• 関連記事: 画像を差し替えても反映されないときの対処
• 関連記事: TurbopackのNFT trace warningはnext.config設定エラーとは限らない
• 関連記事: ChatGPTのカスタム指示、初心者向けの書き方テンプレ

---

本記事は執筆時点（2026-06-24）の Next.js における static 配信の挙動に基づく内容です。バージョンによって挙動が変わる可能性があるため、重要な判断を行う際は公式ドキュメントもあわせてご確認ください。