Next.js(ver.11.1.2 )でImageタグを使用しての画像表示できない場合の対処法

はじめに

Next.jsでの開発中に画像を表示しようとしたところ表示できずに困ったのでメモ

問題

以下のコードではダメだった

<Image src=/public/sample.png width={100} height={100} />

解決法

以下のコードで解決した

const image = require(../../public/sample.png);

...

<Image src={image} width={100} height={100} />

追記(2021/09/29)

公式のドキュメントを読んでいたら, 以下のコードで画像を取得できることがわかった。

import image from "../../public/sample.png";

この時, importする名前は適当で良い。