Next.js13 から非推奨となったImageコンポのlayoutとobjectFit属性の新しい書き方【警告文を消せます】

前置き

入社3ヶ月目の駆け出しフロントエンドエンジニアによる備忘録です。
今回はNext.js の Imageコンポーネントの新しい設定方法についての記事となります。

◎ 今回やってみたいこと

まず前提を共有しますと、Next.js で画像をレスポンシブ対応にさせようと Image コンポーネントを弄ってから npm run dev でブラウザを立ち上げたところ「その書き方は古いですよ」と警告文が表示されました。

古い書き方の Image コンポーネント

<Image
    src="/LIN.svg"
    alt=""
    layout="responsive"  // これがアウトらしい
    width={500}
    height={500}
/>

そこで今回は、Next.js の Imageコンポーネントの設定方法をバージョン13以降の新しいものに書き換える ことを目標に進めていきます。

◎ 使用技術と環境

項目	選択した技術	バージョン
OS	MacOS	Sonoma 14.4
フレームワーク	Next.js	14.1.3
言語	TypeScript	^5
スタイリング	Emotion	11.11.4

Emotion 使ってます

個人的な好みでスタイリングには Emotion を使っております。一般的な書き方にしたい場合は、 css={css...} の部分を style={{...}} に変換して頂く必要がございます。予めご了承下さい。

また、Emotion にご興味のある方向けに一応 Next.js への導入方法を載せておきます。

Emotionのインストールと設定

今回はスタイリングにCSS-in-JSのEmotionを使用します。
まずはEmotionをインストールします。

npm install @emotion/react

各Emotionパッケージについて

@emotion/react - Emotionの基本パッケージ
@emotion/styled - Emotionでstyledコンポーネントを使うためのパッケージ
@emotion/server - サーバーサイドレンダリングのためのパッケージ

今回 @emotion/styledをインストールしなかった理由

スタイリングの一貫性を保つためにもcss propsかstyled.componentsかのどちらかにすべきであると、EmotionのBest Practicesに書かれているそうです。私は直接コンポーネントにCSSを書き込んでいくのが好きなのでcss propsを採用しています。

Use the css prop or @emotion/styled, but not both
While the css prop and styled can peacefully coexist, it's better to pick one approach and use it consistently across your codebase. Whether you choose the css prop or styled is a matter of personal preference. (If you're curious, the css prop is more popular among the maintainers of Emotion.)
引用元：https://emotion.sh/docs/best-practices

続いて@emotion/reactを利用するためにconfigファイルを変更していきます。
@emotion/styledの場合は変更不要のようです。

まずはTypeScriptの設定ファイルを変更。

tsconfig.json

{
  "compilerOptions": {
+    "jsxImportSource": "@emotion/react",
+    "types":[
+        "@emotion/react/types/css-prop",
+    ]
  }
}

そして@emotion/reactを毎回使用する度にファイルの先頭に以下の2行を追加して下さい。

index.tsxなどのファイル

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

◎ さっそくやってみよう

layout 属性の値にはそれなりに種類があるのですが、その中でも自分がよく使うレギュラーメンバーたち３つをピックアップして、それぞれを新しい方法で書き換えてみました。

1. layout="responsive"
2. layout="fill"（とセットで使われる obejctFit="cover" ）
3. layout="intrinsic"

古い書き方はマイナスのマーカーで、新しい書き方はプラスのマーカーで表示してあります。

index.tsx

 import Image from 'next/image';
 // ---- Emotion ----
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react'

 export default function New() {
 return(
    <>
        {/* ---- layout="responsive"の書き換え ---- */}
        {/* 横幅だけ画面いっぱいに埋めてくれるやつ */}
        <Image
           src="/responsive.jpg"
           alt=""
-          layout="responsive"
           width={500}
           height={500}
+          sizes="100vw"
+          css={css`
+             width: 100%;
+             height: auto;
+         `}
        />

        {/* ---- layout="fill" と objectFit="cover"の書き換え ---- */}
        {/* 縦横画面いっぱいに埋めてくれるやつ */}
          <Image
            src="/object-cover.jpg"
            alt=""
-           layout="fill"
-           objectFit="cover"
+           fill
+           css={css`
+             object-fit: cover;
+         `}
          />

        {/* ---- layout="intrinsic"の書き換え ---- */}
        {/* 固定したサイズより親要素が小さくなったときだけ縮小するやつ */}
          <Image
            src="/object-cover.jpg"
            alt=""
            width={500}
            height={500}
-           layout="intrinsic"
+          css={css`
+             max-width:500px;
+             width: 100%;
+             height: auto;
+         `}
          />
    </>
 );
 }

以上で、Image コンポーネントの設定を新しい方法で書き換えることができました！

obejctFit="contain" はどう書く？

また今回、layout="fill" のセットで objectFit="cover" を紹介しましたが、 objectFit="contain" でも同様に Image コンポーネントの style 属性、または、Image コンポーネントに対応するスタイルシートへ記述を移動する必要があります。

参考

https://ebisu.com/note/next-image-migration/