はじめに
Next.jsのImageコンポーネントを使用した際に発生したエラーについて、その原因と解決方法を解説します。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
原因
以下のようにImageコンポーネントを使用した場合、エラーが発生しました。
<Image src='https://qiita.com/image/aaaaa' alt='sample' />
このエラーの原因は、widthとheightプロパティを指定していないことにあります。Next.jsのImageコンポーネントでは、src、width、height、altのプロパティを正しく指定することが求められます。
ただし、widthとheightを指定しないようにした背景には、以下の理由がありました
- 固定値で指定すると、レスポンシブデザインに対応しづらくなる。
- 柔軟なレイアウトを実現したい場合、固定値は制約となる。
解決方法
以下のように修正することで、エラーを解消しつつレスポンシブデザインに対応しました。
<Image src='https://qiita.com/image/aaaaa' alt='sample' className="w-[16px] h-[16px] pc:w-[20px] pc:h-[20px]" width={18} height={18}/>
- widthとheightを指定することで、アスペクト比を固定。
Next.jsの要件を満たします。 - レスポンシブ対応のためにclassNameを使用してサイズを上書き。
例えば、PC表示時にサイズを変更するpc:w-[20px]やpc:h-[20px]を適用しました。
終わりに
Next.jsのImageコンポーネントは、指定が必要なプロパティを忘れるとエラーが発生します。レスポンシブの際には気をつけていきたいと思います。
参考
『Next/Imageを何となく使ってたらボコボコにされた』Zenn