StorybookでNext/ImageのImageタグに設定した画像を表示させる。

経緯

Next.jsのプロジェクトにStorybookを入れ、コンポーネントのストーリーを作成すると、デフォルトの状態ではStorybookの画面にてNext/ImageのImageタグに設定した画像が表示されません。（ビルドされるサーバが異なることに起因する・・？）

これを解消するために、.storybook/preview.jsに設定を追加してあげる必要があります。
ここでの処理の概要としては、next/imageタグをimgタグに付け替えて表示をさせるイメージです。

.storybook/preview.jsに設定を追加する。

// 下記を追加。
import * as nextImage from "next/image";

Object.defineProperty(nextImage, "default", {
 configurable: true,
 value: (props) => <img {...props} />,
});

設定追加後、再度Storybookを立ち上げて、コンポーネントの画面を確認すると、見れなかった画像（下記ではNext.jsのロゴ）が見れるようになるはずです！