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=0Robots、ファビコン、その他
robots.txt、favicon.icoなどの静的メタデータファイルについては、appフォルダ内の特別なメタデータファイルを使用する必要があります。