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、Google Site Verification、およびその他の静的ファイル (.html を含む) にも便利です。ただし、pages/ ディレクトリ内のファイルと同じ名前の静的ファイルがないことを確認してください。そうでない場合、エラーが発生します。詳細はこちら。