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.txt、favicon.icoなど

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

On this page