コンテンツへスキップ
アプリケーションの構築最適化静的アセット

`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、Faviconなど

robots.txt、favicon.icoなどの静的メタデータファイルについては、appフォルダ内に[特殊なメタデータファイル](/docs/app/api-reference/file-conventions/metadata)を使用する必要があります。

知っておくと良いこと

  • ディレクトリ名はpublicである必要があります。名前は変更できず、静的アセットを提供するために使用される唯一のディレクトリです。
  • Next.jsによって提供されるのは、[ビルド時](/docs/app/api-reference/cli/next#next-build-options)にpublicディレクトリ内にあるアセットのみです。リクエスト時に追加されたファイルは利用できません。永続的なファイルストレージには、[Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website)のようなサードパーティサービスの使用をお勧めします。