Next.jsのpublicフォルダの使い方を完全ガイド！画像・静的ファイルを初心者向けにやさしく解説
生徒
「Next.jsのpublicフォルダって何に使うんですか？画像を置く場所ですか？」
先生
「publicフォルダは、画像や音声などの静的ファイルをそのまま使うための場所です。」
生徒
「そのままっていうのは、どういう意味ですか？」
先生
「URLを指定するだけで表示できる、という意味です。順番に見ていきましょう。」
1. Next.jsのpublicフォルダとは？
Next.jsのpublicフォルダは、画像や音声、PDFファイルなどの静的ファイルを保存するための特別なフォルダです。静的ファイルとは、画面に表示するだけで中身が変わらないファイルのことです。たとえば、ロゴ画像や背景画像、説明用のPDFなどが該当します。
publicフォルダに置いたファイルは、Next.jsの特別な処理をしなくても、URLを指定するだけでブラウザに表示できます。これは初心者にとってとても扱いやすい仕組みです。
2. publicフォルダの基本的なフォルダ構成
Next.jsのプロジェクトを作成すると、ルートディレクトリにpublicという名前のフォルダがあります。この中に、imagesやiconsなどのフォルダを自由に作って整理できます。
たとえば、public/images/logo.pngのように配置すると、ブラウザでは/images/logo.pngというURLでアクセスできます。フォルダ名とファイル名が、そのままURLになるイメージです。
3. publicフォルダに画像を置いて表示する方法
publicフォルダに画像を置いたら、Next.jsのコンポーネントでimgタグを使って表示できます。src属性には、publicを省略したパスを書きます。
export default function Home() {
return (
<div>
<h1>ロゴ画像の表示</h1>
<img src="/images/logo.png" alt="ロゴ画像" />
</div>
);
}
4. Next.jsのImageコンポーネントとpublicフォルダ
Next.jsには、画像表示に特化したImageコンポーネントがあります。これを使うと、画像のサイズ最適化などを自動で行ってくれます。publicフォルダに置いた画像も、このImageコンポーネントから利用できます。
import Image from "next/image";
export default function Sample() {
return (
<div>
<Image
src="/images/sample.jpg"
alt="サンプル画像"
width={300}
height={200}
/>
</div>
);
}
5. 画像以外の静的ファイルの使い方
publicフォルダには、画像以外にも音声ファイルやPDFファイルを置けます。たとえば、説明資料のPDFをダウンロードさせたい場合にも便利です。
export default function Download() {
return (
<div>
<a href="/docs/manual.pdf">説明書をダウンロード</a>
</div>
);
}
6. CSSやアイコン画像をpublicで管理する考え方
小さなアイコン画像や背景用の画像もpublicフォルダで管理できます。CSSファイルから背景画像として指定する場合も、publicフォルダのパスをそのまま使えます。
ファイルを種類ごとにフォルダ分けしておくと、後から見たときにも分かりやすくなります。初心者のうちは、images、icons、docsのように分けるだけでも十分です。
7. publicフォルダを使うときの注意点
publicフォルダに置いたファイルは、誰でもURLを知っていればアクセスできます。そのため、個人情報や秘密のデータは絶対に置いてはいけません。
また、ファイル名を日本語にすると、環境によっては表示できない場合があります。英数字とハイフンを使った名前にするのが安全です。
8. 初心者がつまずきやすいポイント
よくある間違いとして、srcにpublic/imagesと書いてしまうケースがあります。publicフォルダはURLには含まれないため、/imagesから始めるのが正解です。
また、ファイルを保存したのに表示されない場合は、ファイル名の大文字小文字が違っていないかも確認しましょう。Next.jsでは大文字と小文字は別物として扱われます。
