静的アセット(`public` ディレクトリ)
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
などの静的メタデータファイルには、app
フォルダ内の特別なメタデータファイルを使用する必要があります。
知っておくと便利:
- ディレクトリ名は
public
でなければなりません。名前を変更することはできず、静的アセットを提供する唯一のディレクトリです。- ビルド時に
public
ディレクトリ内にあるアセットのみがNext.jsによって提供されます。リクエスト時に追加されたファイルは利用できません。永続的なファイルストレージにはVercel Blobなどのサードパーティサービスを使用することを推奨します。