Next.js の next/image は next.config の images.remotePatterns（旧 domains）に登録されていないホストの src を渡すと、本番ビルドだけでなく開発/テスト実行時も render 時点で例外（Invalid src prop ... hostname is not configured）を投げる。Storybook のストーリーやコンポーネントプレビュー、E2E のフィクスチャなど、実 API 応答を介さずに自分で画像URLを組み立てる場面で踏みやすい。

落ちやすい理由

• 本番の実 API 応答はすでに許可済みホスト（自社ストレージ・認証プロバイダのアバタ URL 等）しか返さないため、開発中には問題が表面化しない。テスト/プレビュー用のフィクスチャを自前で作る際に、プレースホルダ画像サービス（任意のシード値で画像を返す系のサービスなど）や faker のアバタ生成関数の戻り値をそのまま使うと、そのホストが allowlist にない確率が高い。
• エラーの出方が環境依存: ブラウザ実行の headless テストランナーでは例外としてテスト失敗になるが、単なる目視確認では塵れ画像やコンソール警告しか見えず見逃しやすい。

対処

• フィクスチャで外部画像を使う必要があれば、next.config の images.remotePatterns を先に確認し、登録済みホストの URL だけを使う。
• 登録されていないホストしか選択肢がない場合は、フィクスチャ側で画像URLを未設定（undefined）にして fallback 表示（プレースホルダーアイコン等）を検証対象にする方が安全。

検証

対象コンポーネントを実際にブラウザで render し、例外・コンソールエラーがないことを確認する。next.config の allowlist とフィクスチャの URL ホストを機械的に照合すれば、目視での見逃しを防げる。