静的アセット

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、ファビコン、その他

このフォルダは、robots.txt、favicon.ico、Google サイト検証、その他の静的ファイル（.htmlを含む）にも便利です。ただし、pages/ディレクトリ内のファイルと同じ名前の静的ファイルがないことを確認してください。これにより、エラーが発生する可能性があります。詳細を読む。

補足：

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