公式ドキュメント

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

https://nextjs.org/docs/messages/next-image-upgrade-to-13

変更点

<span> wrapper removed. layout, objectFit, objectPosition, lazyBoundary, lazyRoot props removed. alt is required. onLoadingComplete receives reference to img element. Built-in loader config removed.

• spanのラッパーが削除
• layout, objectFit, objectPosition, lazyBoundary, lazyRoot のプロップが削除
• alt が必須
• onLoadingComplete が img elementの参照を受け取る
• Built-in loader config の削除

概要

widthとheightが SafeNumber に変更。

declare type SafeNumber = number | `${number}`;

Before

<Image
  width="200px" // v13と同じpxなしの記述でも動作する
  width="100px"
/>

After

<Image
  width={200} // or width="200" pxがあるとエラーに。
  height={100}
/>

概要

layout, objectFit, objectPosition, lazyBoundary, lazyRoot のプロップが削除

下記に一部サンプルをのせる

layout

layout="fill"

// before
layout="fill"

// after fillプロパティの追加
fill

layout="responsive"

// before
<Image
  layout="responsive"
  width={200}
  height={100}
/>

// after responsiveの再現
<Image
  width={200}
  height={100}
  sizes="100vw"
  style={{
    width: '100%',
    height: 'auto',
  }}
/>

objectFit

// before
<Image
  objectFit="contain"
/>

// after
<Image
  style={{
    objectFit: 'contain',
  }}
/>