︙

Static Assets in 'public'

Next.js は、publicと呼ばれるフォルダの下で画像のような静的ファイルを提供できます。このフォルダは root ディレクトリ内にあります。public内のファイルは、ベース URL (/) から始まるあなたの code で参照されることができます。

例えば、ファイル public/avatars/me.png は、/avatars/me.png path を訪れることで閲覧することができます。その image を display するための code は次のようになるかもしれません：

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" />
}

Caching

Next.js は public フォルダ内の資産を安全に headers することができません。変更があるかもしれないからです。適用される default の cache headers は次のとおりです：

Cache-Control: public, max-age=0

Robots, Favicons, and others

静的な metadata ファイル、たとえば、robots.txtやfavicon.icoなどは、appフォルダ内の特別な metadata ファイルを使用すべきです。

Good to know:

ディレクトリはpublicと命名する必要があります。名前は変更できず、静的アセットを提供するために使用される唯一のディレクトリです。

publicディレクトリ内にある資産のみが、build time に Next.js によって提供されます。request time に追加されたファイルは利用できません。永続的なファイルストレージのために Vercel Blob のようなサードパーティのサービスを使用することをお勧めします。