【Next.js和訳】Basic Features/Static File Serving

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Basic Features/Static File Servingの記事を和訳したものです。

静的ファイルサービング｜ Static File Serving

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

Note: next/image には、Next.js10 以降が必要です。

このフォルダは、robots.txt、favicon.ico、Google サイト検証、およびその他の静的ファイル（.html を含む）にも役立ちます。

Note: public ディレクトリには他の名前を付けないでください。名前は変更できず、静的アセットを提供するために使用される唯一のディレクトリです。

Note: pages/ディレクトリにあるファイルと同じ名前のスタティックファイルがあるとエラーになりますので、ご注意ください。

Read more: https://nextjs.org/docs/messages/conflicting-public-file-page

Note: Next.js が提供するのは、ビルド時に public ディレクトリにあるアセットのみです。ランタイムに追加されたファイルは利用できません。ファイルの永続的な保存には、AWS S3 などのサードパーティのサービスを利用することをお勧めします。