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

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