<h2 id="hd2c91c24e4">経緯</h2><p>Next.jsのプロジェクトにStorybookを入れ、コンポーネントのストーリーを作成すると、デフォルトの状態ではStorybookの画面にてNext/ImageのImageタグに設定した画像が表示されません。（ビルドされるサーバが異なることに起因する・・？）<br><br>これを解消するために、.storybook/preview.jsに設定を追加してあげる必要があります。<br>ここでの処理の概要としては、next/imageタグをimgタグに付け替えて表示をさせるイメージです。</p><h2 id="hdf3c22ff4d">.storybook/preview.jsに設定を追加する。</h2><pre><code>// 下記を追加。
import * as nextImage from "next/image";

Object.defineProperty(nextImage, "default", {
&nbsp;configurable: true,
&nbsp;value: (props) =&gt; &lt;img {...props} /&gt;,
});</code></pre><p><br>設定追加後、再度Storybookを立ち上げて、コンポーネントの画面を確認すると、見れなかった画像（下記ではNext.jsのロゴ）が見れるようになるはずです！<br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/c2318c89c92a4c4ba3575a217535b3ad/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-19%2021.19.44.png" alt=""><br></p>

Storybook の記事一覧