Next.js は、ルートディレクトリの public
フォルダ下で、画像などの静的ファイルを配信できます。public
内のファイルは、ベース URL(/
)から始まるコードで参照できます。
例えば、 public/me.png
に画像を追加した場合、次のコードで画像にアクセスします:
import Image from 'next/image'
function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar
備考:
next/image
は Next.js 10 以降が必要です。
このフォルダは、robots.txt
、favicon.ico
、Google Site Verification、その他の静的ファイル(.html
を含む)にも有効です!
備考:
public
ディレクトリを他の名前にしないでください。名前を変更することはできず、静的アセットを配信できる唯一のディレクトリです。
備考:
pages/
ディレクトリ内のファイルと、同じ名前の静的ファイルを持たないようにしてください。これはエラーになります。もっと読む: https://nextjs.org/docs/messages/conflicting-public-file-page
備考: ビルド時に
public
ディレクトリ内にあるアセットのみ、Next.js によって配信されます。実行時に追加されたファイルは利用できません。永続的なファイルストレージには AWS S3 のようなサードパーティーのサービスを利用することを推奨します。