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, Favicons、その他

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