Next.jsのv13でnext/imageにstyle propが追加されたので消えたプロパティの代替を考える

これは エキサイトホールディングス 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 がありますが、ここではfillresponsiveを例として取り上げます。

fill

objectFitもよく併用されるのでここでまとめます。 親要素に対していっぱいに伸展する画像を設定したい際に使っていたオプションです。 v12では以下のように書いていました。

// v12
<div style={{ position: 'relative', width: '700px', height: '400px' }}>
  <Image
    alt="犬"
    src={dog}
    layout="fill"
    objectFit="contain"
  />
</div>

v13ではlayout="fit"は非推奨になり、Imagefillプロパティが追加されました。 また、objectFitプロパティは削除され、styleで指定するように変更が加えられています。

// v13
<div style={{ position: 'relative', width: '700px', height: '400px' }}>
  <Image
    alt="犬"
    src={dog}
    fill
    sizes="100vw"
    style={{
      objectFit: 'cover',
    }}
  />
</div>

responsive

responsivefillと違いオプションとして用意されていないので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ではImageobjectPositionプロパティが用意されています(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が追加されたため、ImageobjectPositonプロパティは削除されました。

// 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コンポーネントに怒られてしまった僕のような人がいれば、ぜひぜひ参考にしてみてください。