静的アセット

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=0

Robots、Faviconなど

このフォルダは、robots.txt、favicon.ico、Googleサイト認証、その他の静的ファイル (.htmlを含む) にも役立ちます。ただし、pages/ディレクトリ内のファイルと同じ名前の静的ファイルがないようにしてください。重複するとエラーが発生します。詳細はこちら。

知っておくと良いこと

ディレクトリ名はpublicである必要があります。この名前は変更できず、静的アセットを配信するために使用される唯一のディレクトリです。

Next.jsによって配信されるのは、ビルド時にpublicディレクトリにあるアセットのみです。リクエスト時に追加されたファイルは利用できません。永続的なファイルストレージには、Vercel Blobのようなサードパーティサービスの使用をお勧めします。

この情報は役に立ちましたか？