静的アセット in `public`

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

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

avatar.js

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、Favicons、その他

robots.txt、favicon.icoなどの静的なメタデータファイルについては、appフォルダー内で特別なメタデータファイルを使用する必要があります。

知っておくと良いポイント：

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