Next.jsで静的アセットをサーブするにはどうすればよいですか？

Question

Accepted Answer

Next.jsは、静的ファイル（画像、フォント、アイコン、PDF、`robots.txt`）をプロジェクトのルートにある特別な**`public/`**フォルダからサーブします。 ## なぜ重要なのか ```text public/ logo.png → served at /logo.png favicon.ico → served at /favicon.ico docs/guide.pdf → served at /docs/guide.pdf robots.txt → served at /robots.txt ``` `public/logo.png`にあるファイルはURL `/logo.png`で利用可能です — `public/`部分は削除されます。ルートから絶対パスで参照してください： ```tsx import Image from "next/image"; export default function Header() { return ( <>

Download guide ); } ``` ## public/ vs アセットのインポート ```tsx // Option A: from public/ — referenced by URL string

// Option B: imported — bundled, hashed for caching, dimensions inferred import logo from "./logo.png";

// width/height come from the import automatically ``` **インポートされた**画像はコンテンツハッシュされたファイル名を取得します（長期キャッシングに最適）。Nextはその寸法を推測できます。安定したURL（favicon、robots.txt、og-images、ダウンロード可能なファイル）で参照されるファイルには`public/`を使用し、コンポーネント内で直接使用される画像には**インポート**を使用します。 ## 注意点 - **ビルド時**に存在するファイルのみがサーブされます — `public/`はランタイムアップロード先ではありません。 - シークレットをそこに置かないでください — `public/`内のすべてはURLで公開アクセス可能です。 ## なぜ重要なのか `public/`フォルダは、Next.jsで静的ファイル（favicon、robots.txt、OGイメージ、ダウンロード）をサーブするシンプルな、規約ベースの方法です。そのコンテンツがURLルートにマップされることを知ること — そして、アセット（ハッシュ化、キャッシュ可能、自動サイズ化）をインポートすることが、`public/`から参照することよりいつ好ましいか — 日常的な静的アセットのニーズをカバーしています。