objectFitプロパティの廃止に対処する

初めに

Next.jsの <Image> コンポーネントで objectFit プロパティを使用していて警告が表示されたので共有します。

問題

このような警告が表示されました。Image with src "/nextJs.png" has legacy prop "objectFit". Did you forget to run the codemod?

 <Image
    src="/img.jpg"
    objectFit="contain"
/>

解決方法

style プロパティでCSSのobjectFit を指定することで解決できました。

 <Image
    src="/img.jpg"
    style={{ objectFit: 'contain' }}
  />

原因

警告が発生したプロパティの記述方法は、Next.js13以降で廃止になっていたことが原因です。Next.js12まではコンポーネントにobjectFitプロパティを使用して画像の表示方法を指定していましたが、Next.js13では廃止され、スタイルで指定する必要があります。

終わりに

Next.jsのバージョンアップに伴い、古いプロパティの使用が廃止されることがあります。新しいバージョンに対応するためには、公式ドキュメントを参照し、コードの変更を適切に行うことが重要です。今後、同じような警告が表示された場合は、最新のベストプラクティスに従っていきたいです。