next/Image を使っていたら単純なミスで困ってしまった話
こんにちは。最近ジムに通い始めまして、走ってお風呂に入ってマッサージチェアに座るというサイクルにどハマりしてしまっている Gaji-Labo のよしざわです。
開発チームの一員として関わらせていたただいているプロジェクトで Next.js の Image コンポーネントをがっつり触る機会があったのですが、開発途中で loader に関連する警告が発生し、どうにも根本の解消ができず一旦 unoptimized を指定して乗り切るといったことがありました。
これは解決してしまうと単純な問題ではあったのですが、似たようなケースで詰まってしまこともあるかと思い、今回お話しさせていただきたいと思います。
画像サイズは fill にしているのに loader エラーで width の設定を求められる
まず結論から話すと、これはプロジェクト内で使用していた Image コンポーネントのラッパーで loader を設定していたため、全ての画像呼び出しで組み込みの画像最適化 API が使えなくなっていたことが原因でした。
次に経緯ですが、開発を進めていると、ブラウザのコンソールに以下の警告が出ていることに気づきました。
has a "loader" property that does not implement width.
Please implement it or use the "unoptimized" property instead.警告が出てている箇所では fill プロパティを指定済みだったので、公式ドキュメントを読んでも width の指定はいらないのではと思いました。また、そもそも loarder も指定していなかったのでその点でも不可解でしたが、この時はあまり時間が取れなかったこともあり気づくことができず、一旦 unoptimized を設定することで警告を無効にすることにしました。
その後改めて呼び出している箇所を調査すると、Image コンポーネントが next/image ではなく、独自に next/image をラップしたコンポーネントが import されていることに気がつきました。ここでようやく、 全ての画像呼び出しで loader が設定されてしまっていたが故にサイズの指定を求められてしまっていたということに気づきました。
Next.js Image をちゃんと使いこなすために
Next.js の Image コンポーネントは、ちゃんと使いこなすことができれば自前で実装が困難な画像最適化を簡単に適応することができます。しかし、 next.config.js の設定や next/image コンポーネントの設定など、プロジェクトの特徴に合わせて適切に使い分ける必要があります。
Gaji-Labo フロントエンドエンジニア向けご案内資料
Gaji-Labo Culture Deck
