Next.js 13 next/imageでサイズ指定せずにアスペクト比を保って表示する

こんにちは。キューでWebエンジニアをしている永井です。

今回はこちらの記事のNext.js 13版になります。

Next.js 13にアップデートされ、next/imageに大きな変更がありました。
前回の内容では、Next.js 13で正しく動作しないので改めて記事にしていきます。

環境

Next.js 13.0.5
React 18.2.0

Next.js 13のアップデート内容

前回の記事から関係のあるアップデート内容を簡単にご紹介します。

imgがラップされなくなった

Next.js 12以前は、next/imageで生成されるimgはラップされていました。

// Next.js 12未満
<div ... >
  <img ... />
</div>

// Next.js 12
<span ... >
  <img ... />
</span>

Next.js 13では、ラッパーがなくなりimg単体になりました。

<img ... / >

一部のPropsが非推奨に

前回の記事で使用していたlayout, objectFitが非推奨になりました。

<Image
  src={path}
  layout="fill"
  objectFit="contain"
/>

Next.js 13では、このように実装します。

<Image
  src={path}
  fill
  style={{ objectFit: 'contain' }} // or className={xxx}を用いる
/>

実装方法

上記の内容を踏まえて、Next.js 13で実装するとこちらになります。

// JS

<Image
  className={styles.image}
  src={path}
  alt={alt}
  fill
/>

// CSS

.image {
  object-fit: contain;
  position: relative !important;
  width: auto !important;
}

Propsの指定

fillで高さ・幅を指定しないようにしています。
altはNext.js 13で必須に変更されたので指定する必要があります。

スタイルの指定

object-fitは、styleかclassNameで指定する必要があるので、今回はclassNameで指定しています。

次に、next/imageのスタイルを上書きします。
※imgのstyle属性でスタイルが指定されているので!important;を使用して上書きする必要があります。

1. position:absolute; → position: relative !important;
2. width: 100% → width: auto !important;

これでNext.js 13でもアスペクト比を保ちつつ画像を表示させることができます。

参考
https://nextjs.org/docs/api-reference/next/image