Next.jsの静的画像が表示できない件と公式の重要性

Next.jsでアプリを作成中、コンポーネントにアイコン画像設定したくなりpublicフォルダにある画像を表示しようとしたところ、エラーに苛まれました。

ファイルpathに/public/は不要

今回私はstorybookを使用してコンポーネント内に画像が表示されるかのテストで画像が表示されるかの確認を行なっていました。
ただNext.jsのpage.tsxでも同様で、原因はファイルpathでした

💡 間違ったファイルpath

export const Message: Story = {
args: {
label: 'メッセージ',
textColor: 'black',
backgroundColor: '#ffc7ca',
imageSrc: '../../public/hogehoge.png',
},
};

これは間違いで、Next.jsではpublicフォルダはルートディレクトリとして扱われるようなので

仮にpublic/hogehoge.png

というファイルpathで画像がある場合は

export const Message: Story = {
args: {
label: 'メッセージ',
textColor: 'black',
backgroundColor: '#ffc7ca',
imageSrc: '/hogehoge.png', ←正しい
},
};

#next/imageを使用する場合

<Image src='/hogehoge.png' alt='icon image' width={16} height={16}/>

としなけらば、静的画像は表示できないのが今回わかりました。

public/icons/*とした場合は？

次に直面したのがpublic配下にフォルダを追加した場合のファイルpathについて。

他の方の記事で

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

1. publicフォルダに入れる
2. パスはpublic/icons/icon.pngのような階層構造であっても/icon.pngと書くお役に立てば幸いです。

この部分を鵜呑みにしてしまい、時間を浪費しました。

ただしくはpublic配下のフォルダ名を追記する必要あり

仮にpublic/icons/hogehoge.src

という画像があった場合は上の引用通りではなく、/icons/（public配下のフォルダ名)を追記する必要があります。

私はこの部分で時間を食ってしまい、「なんで画像が表示できないねん！」となっていました。

公式のドキュメントを早急に確認すればここまで時間は使わなかったので

やはりドキュメントの確認は重要だと身に沁みる体験でした・・・

以上、参考になれば幸いです。