Next.jsで画像を表示するのに結構手間取ったので備忘録として書いておきます

目次

エラー

画像を以下のように表示しようとしていたが、表示されなかった。

Next.js


<Image src='assets/icons/icon.png' alt='logo' width={100} height={100} />

Next.jsで静的ファイルを扱うときはプロジェクト直下にpublicフォルダを作ってそこにいれなきゃならんらしいです。

Next.js


<Image src='public/icons/icon.png' alt='logo' width={100} height={100} />

しかしそれでも表示されない...

Next.jsではpublicフォルダの中身はルートディレクトリとして扱われる?ので、publicフォルダの中身を指定するときは以下のように書く必要があるみたいです。

Next.js

// <Image src='public/icons/icon.png' alt='logo' width={100} height={100} />
<Image src='/icon.png' alt='logo' width={100} height={100} />

ここまでやって無事表示されました。

imageファイルなどの静的ファイルを扱うときは、

お役に立てば幸いです。