Next.jsでImageタグを使うとWidthとHeightが必須になるのをどうにかしたい

はじめに

個人開発でもNextを利用しているのですが、長年悩んできたことをチームの詳しい方に聞いたところ初めて知ったことがあったのでまとめます

問題

                <img
                  alt=""
                  src="/static/images/thank.png"
                />

これを<Image>に置き換えようとしたところWidthとHeightのプロパティが必須なのでいれてくださいと怒られてしまいました

                <Image
                  alt=""
                  src="/static/images/thank.png"
                />

ここでWidthとHeightに数字をいれるとマジックナンバーになるのでどうすればよいかと悩みました

解決方法

すべてはドキュメントに書いてありました

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

このように静的にパスを指定するのではなくダイナミックインポートすれば高さも幅も不要で、なおかつ画像が表示されるまではサスペンスのような小さい画像の表示をしてくれるようです

おわりに

やはりドキュメントをしっかり読むことが大切だなと気づきました

参考