︙

Static Assets

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

このフォルダは、robots.txt、favicon.ico、Google サイト認証、他のすべての静的ファイル(.htmlを含む)にも便利です。ただし、pages/ディレクトリ内のファイルと同じ名前の静的ファイルを持たないように注意してください。これは、error を引き起こします。さらに読む。

Good to know:

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

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