静的アセット

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などのサードパーティサービスを使用することをお勧めします。