next/image の width が無いときの直し方

Error: Image with src "/a.png" is missing required "width" property.

開発と本番で、壊れ方が違う

import Image from 'next/image'
 
export default function Page() {
  return <Image src="/a.png" alt="" />
}

	開発（next dev）	本番（next build → start）
型チェック	—	通る
ページ	500 で止まる	普通に出る
文言	missing required "width" property	どこにも出ない

型チェックを有効にしていても止まりません。width は型の上では省略できます（fill を使う書き方があるため）。開発サーバーで一度も開かずに出すと、本番まで素通りします。

hostname のエラーと同じく、「開発では止まり、本番では黙っている」形です。

本番では何が起きているか

本番の HTML を見ると、img に width も height も付かず、代わりに sizes="100vw" が付いていました。画面の幅いっぱいに出す画像として扱われています。

ブラウザは、sizes と画面の幅から、読み込む版を選びます。同じ画像で比べました。

書き方	読み込まれた版
width を書かない	w=1080
width={100} height={100}	w=128

表示が小さくても、画面の幅ぶんの大きな版を読み込みます。また img に寸法が無いので、読み込み終わるまで画像の場所が確保されません。

直し方

1. width と height を書く

<Image src="/a.png" alt="" width={600} height={400} />

書くのは画像の縦横比が分かる値です。表示の大きさは CSS で変えられます。

2. 画像を import して渡す

import Image from 'next/image'
import photo from './photo.png'
 
export default function Page() {
  return <Image src={photo} alt="" />
}

実機で、import した画像には width と height が自動で入ることを確かめました。画像ファイルそのものから寸法を読んでいます。リポジトリに置く画像なら、この形がいちばん書き忘れがありません。

3. 親の大きさに合わせる（fill）

寸法が決まっていない画像を、枠いっぱいに出したいときの書き方です。

<div style={{ position: 'relative', width: 300, height: 200 }}>
  <Image src="/a.png" alt="" fill sizes="300px" />
</div>

実機では、img が親いっぱいに広がる指定（position:absolute と幅・高さ 100%）で出ました。親に position: relative と大きさが要ります。

直したあとに確かめること

1. 開発サーバーで、画像のあるページを一度ずつ開く。書き忘れがあれば 500 で止まります
2. 本番と同じビルドで、開発ツールのネットワークを開き、読み込まれた /_next/image の w= が表示の大きさに見合っているかを見る