静的アセット (Static Assets)

Next.jsはルートディレクトリのpublicフォルダ配下にある画像などの静的ファイルを提供できます。public内のファイルはベースURL(/)から始まるパスでコード内から参照できます。

例えば、public内にme.pngを追加した場合、次のコードで画像にアクセスできます:

import Image from 'next/image'

export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

このフォルダはrobots.txt、favicon.ico、Googleサイト認証ファイル、その他の静的ファイル（.htmlを含む）にも便利です。ただし、pages/ディレクトリ内のファイルと同じ名前の静的ファイルがあるとエラーが発生するので注意してください。詳細はこちらをご覧ください。

知っておくと良いこと:

• ディレクトリ名は必ずpublicにしてください。名前は変更できず、静的アセットを提供する唯一のディレクトリです。
• ビルド時にpublicディレクトリ内にあるアセットのみがNext.jsによって提供されます。リクエスト時に追加されたファイルは利用できません。永続的なファイルストレージにはAWS S3などのサードパーティサービスを使用することを推奨します。