静的アセット (Static Assets)

Next.jsは、ルートディレクトリ内のpublicフォルダ以下にある画像などの静的ファイルを提供できます。public内のファイルは、ベースURL（/）から始まるパスでコードから参照できます。

例えば、public/avatars/me.pngファイルは/avatars/me.pngパスにアクセスすることで表示できます。その画像を表示するコードは次のようになります：

import Image from 'next/image'

export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}

export function AvatarOfMe() {
  return <Avatar id="me" alt="A portrait of me" />
}

キャッシュ

Next.jsはpublicフォルダ内のアセットを安全にキャッシュできません（変更される可能性があるため）。適用されるデフォルトのキャッシュヘッダーは次の通りです：

Cache-Control: public, max-age=0

robots.txt、ファビコンなど

このフォルダはrobots.txt、favicon.ico、Googleサイト認証、その他の静的ファイル（.htmlを含む）にも便利です。ただし、pages/ディレクトリ内のファイルと同じ名前の静的ファイルがあるとエラーが発生するので注意してください。詳細はこちらをご覧ください。

知っておくと便利：

• ディレクトリ名はpublicでなければなりません。名前を変更することはできず、静的アセットを提供する唯一のディレクトリです。
• ビルド時にpublicディレクトリ内にあるアセットのみがNext.jsによって提供されます。リクエスト時に追加されたファイルは利用できません。永続的なファイルストレージにはVercel Blobなどのサードパーティサービスを使用することを推奨します。