【Next.js】publicフォルダの正しい指定方法

Last updated at 2025-02-02Posted at 2025-02-02

はじめに

Next.jsで画像の表示方法について詰まった箇所があったので、整理して記事にしました。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

まず、publicフォルダに画像を配置する場合、imgタグでは以下のようにパスを指定します。

blog-app
└── public
    └── img
        └── xxxx.png

この場合、画像を表示するには以下のように/img/xxxx.pngと記述します。

 export default function Page() {
  return <img src="/img/xxxx.png" alt="img" />;
}

publicフォルダはURLのルート(/)として扱われるため、publicを含める必要はありません。

 export default function Page() {
  return <img src="./public/img/xxxx.png" alt="img" />;
}

このように指定するとpublicをディレクトリとして解釈しようとするため、画像が表示されません。

next/imageを使用する場合も、imgタグと同様にpublicフォルダ内のパスを指定できます。

import Image from 'next/image'

 export default function Page() {
  return  <Image src="/img/xxxx.png" alt="img" width="64" height="64" />;
}

next/imageはパフォーマンスを向上させるため、基本的にはこちらの使用が推奨されています。

Next.jsの画像管理はpublicフォルダの扱い方がポイントになることがわかりました。またpublicディレクトリを使わず、appディレクトリ内に画像を配置する方法もあるのでそちらについても今後学習していきたいと思います。