これは エキサイトホールディングス Advent Calendar 2022 の22日目の記事です。
2022年10月にNext.jsのv13がリリースされてnext/image
の仕様が変わり、style propが追加されたことでいくつかのプロパティが削除されました。
今回は失われたプロパティをv13のnext/image
でどうやって代替していくのか紹介していきます。
一応Next.jsをv13にアップデートをしたあとでも next/legacy/image
を Imageとしてimport すればv13でも従来どおりのImageを使うことはできますができるだけv13に寄せていきたいところですよね。
(参考)v13で過去のImageコンポーネントを使う場合
import { Image } from 'next/legacy/image'
layout
layoutには fixed / intrinsic / fill / responsive
がありますが、ここではfill
とresponsive
を例として取り上げます。
fill
objectFit
もよく併用されるのでここでまとめます。
親要素に対していっぱいに伸展する画像を設定したい際に使っていたオプションです。
v12では以下のように書いていました。
// v12 <div style={{ position: 'relative', width: '700px', height: '400px' }}> <Image alt="犬" src={dog} layout="fill" objectFit="contain" /> </div>
v13ではlayout="fit"
は非推奨になり、Image
にfill
プロパティが追加されました。
また、objectFitプロパティは削除され、styleで指定するように変更が加えられています。
// v13 <div style={{ position: 'relative', width: '700px', height: '400px' }}> <Image alt="犬" src={dog} fill sizes="100vw" style={{ objectFit: 'cover', }} /> </div>
responsive
responsive
はfill
と違いオプションとして用意されていないのでstyleで自前実装する必要があります。
v12ではlayout="responsive"があるのでそのプロパティを使います。
// v12 <Image alt="猫" src={cat} layout="responsive" width={700} height={425} />
v13ではstyleでlayout="responsive"を再現します。
// v13 <Image alt="猫" src={cat} width={700} height={425} sizes="100vw" style={{ width: '100%', height: 'auto', }} />
objectPosition
objectPosition
は親要素内のどこに画像を配置するか指定できるプロパティです。
元はCSSのプロパティですが、v12ではImage
にobjectPosition
プロパティが用意されています(objectFit
も)。
// v12 <div style={{ position: 'relative', width: '100vw', height: '100vh' }}> <Image alt="寿司" src={sushi} layout="fill" objectFit="cover" objectPosition="left center" /> </div>
v13ではstyle propが追加されたため、Image
のobjectPositon
プロパティは削除されました。
// v13 <div style={{ position: 'relative', width: '300px', height: '500px' }}> <Image alt="寿司" src={sushi} fill sizes="100vw" style={{ objectPosition: 'left center', }} /> </div>
おわりに
本記事では、Next.js v13 のImage
のstyle prop追加による過去のプロパティ代替を取り上げました。
v12からv13に気軽にアップデートを試みてImage
コンポーネントに怒られてしまった僕のような人がいれば、ぜひぜひ参考にしてみてください。