Image (レガシー)
Next.js 13から、next/image
コンポーネントはパフォーマンスと開発者エクスペリエンスを向上させるために書き直されました。後方互換性のあるアップグレードソリューションを提供するため、古いnext/image
はnext/legacy/image
に名前が変更されました。
新しい next/image
APIリファレンスを参照してください。
比較
next/legacy/image
と比較して、新しいnext/image
コンポーネントには以下の変更があります:
<img>
の周りの<span>
ラッパーを削除し、ネイティブの計算されたアスペクト比を採用- 標準的な
style
プロップのサポートを追加layout
プロップをstyle
またはclassName
に置き換えobjectFit
プロップをstyle
またはclassName
に置き換えobjectPosition
プロップをstyle
またはclassName
に置き換え
IntersectionObserver
の実装をネイティブの遅延読み込みに置き換え- ネイティブの同等のものがないため
lazyBoundary
プロップを削除 - ネイティブの同等のものがないため
lazyRoot
プロップを削除
- ネイティブの同等のものがないため
loader
設定をloader
プロップに置き換えalt
プロップをオプションから必須に変更onLoadingComplete
コールバックを<img>
要素への参照を受け取るように変更
必須プロップ
<Image />
コンポーネントには、以下のプロパティが必要です。
src
以下のいずれかである必要があります:
デフォルトのloaderを使用する場合、ソース画像について以下も考慮してください:
- srcが外部URLの場合、remotePatternsも設定する必要があります
- srcがアニメーションまたは既知の形式(JPEG、PNG、WebP、AVIF、GIF、TIFF)でない場合、画像はそのまま提供されます
- srcがSVG形式の場合、
unoptimized
またはdangerouslyAllowSVG
が有効でない限りブロックされます
width
width
プロパティは、layout
とsizes
プロパティに応じて、_レンダリングされた_幅または_元の_幅をピクセル単位で表します。
layout="intrinsic"
またはlayout="fixed"
を使用する場合、width
プロパティはピクセル単位の_レンダリングされた_幅を表すため、画像の大きさに影響します。
layout="responsive"
、layout="fill"
を使用する場合、width
プロパティはピクセル単位の_元の_幅を表すため、アスペクト比にのみ影響します。
width
プロパティは、静的にインポートされた画像またはlayout="fill"
の画像を除いて必須です。
height
height
プロパティは、layout
とsizes
プロパティに応じて、_レンダリングされた_高さまたは_元の_高さをピクセル単位で表します。
layout="intrinsic"
またはlayout="fixed"
を使用する場合、height
プロパティはピクセル単位の_レンダリングされた_高さを表すため、画像の大きさに影響します。
layout="responsive"
、layout="fill"
を使用する場合、height
プロパティはピクセル単位の_元の_高さを表すため、アスペクト比にのみ影響します。
height
プロパティは、静的にインポートされた画像またはlayout="fill"
の画像を除いて必須です。
オプションプロップ
<Image />
コンポーネントは、必須のプロパティ以外にも多くの追加プロパティを受け入れます。このセクションでは、Imageコンポーネントの最も一般的に使用されるプロパティについて説明します。めったに使用されないプロパティの詳細については、高度なプロップセクションを参照してください。
layout
ビューポートのサイズ変更に応じた画像のレイアウト動作。
layout | 動作 | srcSet | sizes | ラッパーとサイザーの有無 |
---|---|---|---|---|
intrinsic (デフォルト) | コンテナの幅に合わせて_縮小_、画像サイズまで | 1x 、2x (imageSizesに基づく) | N/A | あり |
fixed | width とheight に正確にサイズ設定 | 1x 、2x (imageSizesに基づく) | N/A | あり |
responsive | コンテナの幅に合わせて拡大縮小 | 640w 、750w 、... 2048w 、3840w (imageSizesとdeviceSizesに基づく) | 100vw | あり |
fill | コンテナを埋めるようにX軸とY軸の両方に拡大 | 640w 、750w 、... 2048w 、3840w (imageSizesとdeviceSizesに基づく) | 100vw | あり |
intrinsic
レイアウトのデモ(デフォルト)intrinsic
の場合、画像は小さいビューポートで寸法を縮小し、大きいビューポートでは元の寸法を維持します。
fixed
レイアウトのデモfixed
の場合、ビューポートの変更に応じて画像の寸法は変化しません(レスポンシブ性なし)。ネイティブのimg
要素に似ています。
responsive
レイアウトのデモresponsive
の場合、画像は小さいビューポートで寸法を縮小し、大きいビューポートで拡大します。- スタイルシートで親要素に
display: block
を使用していることを確認してください。
fill
レイアウトのデモfill
の場合、親要素が相対的であれば、画像は親要素の寸法に合わせて幅と高さを拡大します。- これは通常、
objectFit
プロパティと組み合わせて使用されます。 - スタイルシートで親要素に
position: relative
を使用していることを確認してください。
- 背景画像のデモ
loader
URLを解決するためのカスタム関数。Imageコンポーネントのプロップとしてloaderを設定すると、next.config.js
のimages
セクションで定義されたデフォルトのloaderを上書きします。
loader
は、以下のパラメータを指定して画像のURL文字列を返す関数です:
カスタムloaderの使用例:
import Image from 'next/legacy/image'
const myLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
const MyImage = (props) => {
return (
<Image
loader={myLoader}
src="me.png"
alt="作者の写真"
width={500}
height={500}
/>
)
}
sizes
異なるブレイクポイントでの画像の幅に関する情報を提供する文字列。sizes
の値は、layout="responsive"
またはlayout="fill"
の画像のパフォーマンスに大きく影響します。layout="intrinsic"
またはlayout="fixed"
の画像では無視されます。
sizes
プロパティは、画像のパフォーマンスに関して2つの重要な目的を果たします:
まず、sizes
の値はブラウザがnext/legacy/image
から自動生成されたソースセットからどのサイズの画像をダウンロードするかを決定するために使用されます。ブラウザが選択する際、ページ上の画像のサイズをまだ知らないため、ビューポートと同じサイズまたはそれ以上の画像を選択します。sizes
プロパティを使用すると、画像が実際には画面全体よりも小さいことをブラウザに伝えることができます。sizes
値を指定しない場合、デフォルト値の100vw
(画面全体の幅)が使用されます。
次に、sizes
の値は解析され、自動的に作成されたソースセットの値をトリミングするために使用されます。sizes
プロパティにビューポート幅の割合を表す50vw
などのサイズが含まれている場合、必要以上に小さい値はソースセットからトリミングされます。
例えば、スタイリングによってモバイルデバイスでは画像が全幅、タブレットでは2列レイアウト、デスクトップディスプレイでは3列レイアウトになることがわかっている場合、以下のようなsizes
プロパティを含める必要があります:
import Image from 'next/legacy/image'
const Example = () => (
<div className="grid-element">
<Image
src="/example.png"
layout="fill"
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
33vw"
/>
</div>
)
この例のsizes
は、パフォーマンス指標に劇的な影響を与える可能性があります。33vw
のサイズがない場合、サーバーから選択される画像は必要以上に3倍の幅になります。ファイルサイズは幅の2乗に比例するため、sizes
がない場合、ユーザーは必要以上に9倍大きな画像をダウンロードすることになります。
srcset
とsizes
の詳細:
quality
最適化された画像の品質。1
から100
の整数で、100
が最高品質。デフォルトは75
です。
priority
trueの場合、画像は高優先度と見なされ、プリロードされます。priority
を使用する画像では、遅延読み込みは自動的に無効になります。
最大コンテンツ描画(Largest Contentful Paint (LCP))要素として検出された画像には、priority
プロパティを使用する必要があります。異なるビューポートサイズでは異なる画像がLCP要素になる可能性があるため、複数の優先画像を持つことが適切な場合もあります。
フォールドの上に表示される画像にのみ使用する必要があります。デフォルトはfalse
です。
placeholder
画像の読み込み中に使用するプレースホルダー。可能な値はblur
またはempty
です。デフォルトはempty
です。
blur
の場合、blurDataURL
プロパティがプレースホルダーとして使用されます。src
が静的インポートからのオブジェクトで、インポートされた画像が.jpg
、.png
、.webp
、または.avif
の場合、blurDataURL
は自動的に設定されます。
動的画像の場合、blurDataURL
プロパティを提供する必要があります。Plaiceholderなどのソリューションがbase64
の生成に役立ちます。
empty
の場合、画像の読み込み中にプレースホルダーはなく、空のスペースのみになります。
試してみましょう:
高度なプロパティ
場合によっては、より高度な使用が必要になることがあります。<Image />
コンポーネントは、以下の高度なプロパティをオプションで受け入れます。
style
基礎となる画像要素にCSSスタイルを渡すことを可能にします。
すべてのlayout
モードが画像要素に独自のスタイルを適用し、これらの自動スタイルがstyle
プロパティよりも優先されることに注意してください。
また、必須のwidth
とheight
プロパティがスタイリングと相互作用する可能性があることにも注意してください。画像のwidth
をスタイリングで変更する場合は、height="auto"
スタイルも設定する必要があります。そうしないと、画像が歪む可能性があります。
objectFit
layout="fill"
を使用する際に、画像が親コンテナにどのように収まるかを定義します。
この値は、src
画像のobject-fit CSSプロパティに渡されます。
objectPosition
layout="fill"
を使用する際に、画像が親要素内でどのように配置されるかを定義します。
この値は、画像に適用されるobject-position CSSプロパティに渡されます。
onLoadingComplete
画像が完全に読み込まれ、プレースホルダーが削除された後に呼び出されるコールバック関数。
onLoadingComplete
関数は、以下のプロパティを持つオブジェクト1つをパラメーターとして受け取ります:
loading
画像の読み込み動作。デフォルトはlazy
です。
lazy
の場合、画像がビューポートから計算された距離に達するまで画像の読み込みを遅延します。
eager
の場合、画像を即座に読み込みます。
blurDataURL
src
画像が正常に読み込まれる前にプレースホルダー画像として使用されるデータURL。placeholder="blur"
と組み合わせた場合にのみ効果があります。
base64エンコードされた画像である必要があります。拡大されてぼかされるため、非常に小さな画像(10ピクセル以下)が推奨されます。プレースホルダーとしてより大きな画像を含めると、アプリケーションのパフォーマンスに悪影響を与える可能性があります。
試してみましょう:
単色のデータURLを生成して画像に合わせることもできます。
lazyBoundary
ビューポートと画像の交差を検出し、遅延読み込みをトリガーするための境界ボックスとして機能する文字列(マージンプロパティに似た構文)。デフォルトは"200px"
です。
画像がルートドキュメント以外のスクロール可能な親要素にネストされている場合、lazyRootプロパティも割り当てる必要があります。
lazyRoot
スクロール可能な親要素を指す React Ref。デフォルトはnull
(ドキュメントビューポート)。
Refは、DOM要素またはRefを基礎となるDOM要素に転送するReactコンポーネントを指す必要があります。
DOM要素を指す例
import Image from 'next/legacy/image'
import React from 'react'
const Example = () => {
const lazyRoot = React.useRef(null)
return (
<div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
<Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
<Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
</div>
)
}
Reactコンポーネントを指す例
import Image from 'next/legacy/image'
import React from 'react'
const Container = React.forwardRef((props, ref) => {
return (
<div ref={ref} style={{ overflowX: 'scroll', width: '500px' }}>
{props.children}
</div>
)
})
const Example = () => {
const lazyRoot = React.useRef(null)
return (
<Container ref={lazyRoot}>
<Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
<Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
</Container>
)
}
unoptimized
trueの場合、ソース画像は、品質、サイズ、形式を変更せずにsrc
からそのまま提供されます。デフォルトはfalse
です。
これは、最適化の恩恵を受けない画像(1KB未満の小さな画像、ベクター画像(SVG)、アニメーション画像(GIF)など)に役立ちます。
import Image from 'next/image'
const UnoptimizedImage = (props) => {
return <Image {...props} unoptimized />
}
Next.js 12.3.0以降、next.config.js
を以下の設定で更新することで、このプロパティをすべての画像に割り当てることができます:
module.exports = {
images: {
unoptimized: true,
},
}
その他のプロパティ
<Image />
コンポーネントの他のプロパティは、以下を除いて基礎となるimg
要素に渡されます:
srcSet
。代わりにデバイスサイズを使用してください。ref
。代わりにonLoadingComplete
を使用してください。decoding
。常に"async"
です。
設定オプション
リモートパターン
悪意のあるユーザーからアプリケーションを保護するために、外部画像を使用するには設定が必要です。これにより、アカウントからのみ外部画像がNext.js Image Optimization APIから提供されることを保証します。これらの外部画像は、以下に示すようにnext.config.js
ファイルのremotePatterns
プロパティで設定できます:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
search: '',
},
],
},
}
補足: 上記の例では、
next/legacy/image
のsrc
プロパティがhttps://example.com/account123/
で始まり、クエリ文字列を持たないことを保証します。他のプロトコル、ホスト名、ポート、または一致しないパスは、400 Bad Requestで応答します。
以下は、next.config.js
ファイルのremotePatterns
プロパティでワイルドカードパターンを使用するホスト名の例です:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.example.com',
port: '',
search: '',
},
],
},
}
補足: 上記の例では、
next/legacy/image
のsrc
プロパティがhttps://img1.example.com
またはhttps://me.avatar.example.com
、あるいは任意の数のサブドメインで始まることを保証します。ポートやクエリ文字列を持つことはできません。他のプロトコルまたは一致しないホスト名は、400 Bad Requestで応答します。
ワイルドカードパターンはpathname
とhostname
の両方で使用でき、以下の構文を持ちます:
*
は、単一のパスセグメントまたはサブドメインと一致します**
は、末尾の任意の数のパスセグメントまたは先頭の任意の数のサブドメインと一致します
**
構文はパターンの途中では機能しません。
補足:
protocol
、port
、pathname
、またはsearch
を省略すると、ワイルドカード**
が暗黙的に適用されます。これは意図しないURLを最適化する悪意のあるアクターを許可する可能性があるため、推奨されません。
以下は、next.config.js
ファイルのremotePatterns
プロパティでsearch
を使用する例です:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'assets.example.com',
search: '?v=1727111025337',
},
],
},
}
補足: 上記の例では、
next/legacy/image
のsrc
プロパティがhttps://assets.example.com
で始まり、正確なクエリ文字列?v=1727111025337
を持つことを保証します。他のプロトコルまたはクエリ文字列は、400 Bad Requestで応答します。
ドメイン
警告: Next.js 14以降、悪意のあるユーザーからアプリケーションを保護するために、厳密な
remotePatterns
の代わりに非推奨となりました。ドメインから提供されるすべてのコンテンツを所有している場合にのみ、domains
を使用してください。
remotePatterns
と同様に、domains
設定を使用して外部画像の許可されたホスト名のリストを提供できます。
ただし、domains
設定はワイルドカードパターンマッチングをサポートせず、プロトコル、ポート、またはパス名を制限することもできません。
以下は、next.config.js
ファイルのdomains
プロパティの例です:
module.exports = {
images: {
domains: ['assets.acme.com'],
},
}
ローダー設定
クラウドプロバイダーを使用して、Next.jsの組み込み画像最適化APIの代わりに画像を最適化する場合、next.config.js
ファイルでloader
とパスプレフィックスを設定できます。これにより、画像のsrc
に相対URLを使用し、プロバイダー用の正確な絶対URLを自動生成できます。
module.exports = {
images: {
loader: 'imgix',
path: 'https://example.com/myaccount/',
},
}
組み込みローダー
以下の画像最適化クラウドプロバイダーが含まれています:
- デフォルト:
next dev
、next start
、またはカスタムサーバーで自動的に動作 - Vercel:Vercelにデプロイする際に自動的に動作し、設定は不要。詳細情報
- Imgix:
loader: 'imgix'
- Cloudinary:
loader: 'cloudinary'
- Akamai:
loader: 'akamai'
- カスタム:
loader: 'custom'
でnext/legacy/image
コンポーネントのloader
プロパティを使用してカスタムクラウドプロバイダーを利用
別のプロバイダーが必要な場合は、next/legacy/image
でloader
プロパティを使用できます。
output: 'export'
を使用する場合、ビルド時に画像を最適化することはできず、オンデマンドのみとなります。output: 'export'
でnext/legacy/image
を使用するには、デフォルト以外のローダーを使用する必要があります。詳細は議論を参照してください。
詳細設定
以下の設定は高度な使用例向けで、通常は必要ありません。以下のプロパティを設定する場合、将来のアップデートでNext.jsのデフォルト変更が上書きされます。
デバイスサイズ
ユーザーの予想デバイス幅を知っている場合、next.config.js
のdeviceSizes
プロパティでデバイス幅のブレイクポイントのリストを指定できます。これらの幅は、next/legacy/image
コンポーネントがlayout="responsive"
またはlayout="fill"
を使用する際に、ユーザーのデバイスに適切な画像を提供するために使用されます。
設定がない場合、以下のデフォルト値が使用されます。
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
}
画像サイズ
next.config.js
ファイルのimages.imageSizes
プロパティを使用して、画像の幅のリストを指定できます。これらの幅は、デバイスサイズの配列と連結され、画像のsrcsetを生成するためのサイズの完全な配列を形成します。
2つの別々のリストがある理由は、imageSizes
はsizes
プロパティを提供する画像にのみ使用され、画像が画面の全幅未満であることを示します。したがって、imageSizes
のサイズはdeviceSizes
の最小サイズよりも小さくする必要があります。
設定がない場合、以下のデフォルト値が使用されます。
module.exports = {
images: {
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
}
許容フォーマット
デフォルトの画像最適化APIは、リクエストのAccept
ヘッダーを介してブラウザーがサポートする画像フォーマットを自動的に検出し、最適な出力フォーマットを決定します。
Accept
ヘッダーが複数の設定フォーマットと一致する場合、配列内の最初の一致が使用されます。したがって、配列の順序が重要です。一致するものがない場合(またはソース画像がアニメーションの場合)、画像最適化APIは元の画像のフォーマットにフォールバックします。
設定がない場合、以下のデフォルト値が使用されます。
module.exports = {
images: {
formats: ['image/webp'],
},
}
AVIFサポートを有効にできます。ブラウザがAVIFをサポートしていない場合、ソース画像の元のフォーマットにフォールバックします:
module.exports = {
images: {
formats: ['image/avif'],
},
}
補足:
- ほとんどのユースケースではWebPの使用をお勧めします。
- AVIFは通常、エンコードに50%長い時間がかかりますが、WebPと比較して20%小さく圧縮されます。これは、画像が最初にリクエストされたときは通常遅くなりますが、キャッシュされた後続のリクエストは高速になることを意味します。
- Next.jsの前にプロキシ/CDNを自己ホストする場合、プロキシを設定して
Accept
ヘッダーを転送する必要があります。
キャッシュ動作
以下は、デフォルトのローダーのキャッシュアルゴリズムを説明します。他のすべてのローダーについては、クラウドプロバイダーのドキュメントを参照してください。
画像はリクエスト時に動的に最適化され、<distDir>/cache/images
ディレクトリに保存されます。最適化された画像ファイルは、有効期限に達するまで後続のリクエストで提供されます。キャッシュされているが期限切れのファイルと一致するリクエストがあった場合、期限切れの画像がすぐに古いまま提供されます。その後、画像がバックグラウンドで再最適化され(再検証とも呼ばれます)、新しい有効期限で再度キャッシュされます。
画像のキャッシュステータスは、x-nextjs-cache
(Vercelにデプロイされている場合はx-vercel-cache
)レスポンスヘッダーの値を読むことで判断できます。可能な値は以下の通りです:
MISS
- パスがキャッシュにない(最初の訪問時に最大1回発生)STALE
- パスはキャッシュにあるが再検証時間を超えているため、バックグラウンドで更新されるHIT
- パスはキャッシュにあり、再検証時間を超えていない
有効期限(または最大経過時間)は、minimumCacheTTL
設定またはアップストリーム画像のCache-Control
ヘッダーのうち、大きい方によって定義されます。具体的には、Cache-Control
ヘッダーのmax-age
値が使用されます。s-maxage
とmax-age
の両方が見つかった場合、s-maxage
が優先されます。max-age
は、CDNやブラウザを含む下流のクライアントにも引き渡されます。
- アップストリーム画像に
Cache-Control
ヘッダーがない、または値が非常に低い場合、minimumCacheTTL
を設定してキャッシュ期間を延長できます。 deviceSizes
とimageSizes
を設定して、生成される画像の総数を削減できます。- フォーマットを設定して、単一の画像フォーマットに有利に複数のフォーマットを無効にできます。
最小キャッシュTTL
キャッシュされた最適化画像のTime to Live(TTL)を秒単位で設定できます。多くの場合、ファイルの内容をハッシュ化し、Cache-Control
ヘッダーをimmutable
に設定して画像を永久にキャッシュする静的画像インポートを使用する方が良いでしょう。
module.exports = {
images: {
minimumCacheTTL: 60,
},
}
最適化画像の有効期限(または最大経過時間)は、minimumCacheTTL
またはアップストリーム画像のCache-Control
ヘッダーのうち、大きい方によって定義されます。
画像ごとにキャッシュ動作を変更する必要がある場合、headers
を設定してアップストリーム画像(/_next/image
ではなく、/some-asset.jpg
など)のCache-Control
ヘッダーを設定できます。
現時点でキャッシュを無効にするメカニズムはないため、minimumCacheTTL
を低く保つのが最適です。そうでない場合、src
プロパティを手動で変更するか、<distDir>/cache/images
を削除する必要があります。
静的インポートの無効化
デフォルトの動作では、import icon from './icon.png'
のような静的ファイルをインポートし、それをsrc
プロパティに渡すことができます。
場合によっては、他のプラグインがインポートの動作を異なるものとして期待する場合、この機能を無効にしたいことがあります。
next.config.js
で静的画像インポートを無効にできます:
module.exports = {
images: {
disableStaticImages: true,
},
}
SVGを危険に許可
デフォルトのローダーがSVG画像を最適化しない理由がいくつかあります。まず、SVGはベクターフォーマットであり、ロスレスでリサイズできます。次に、SVGはHTML/CSSと同様の多くの機能を持ち、適切なコンテンツセキュリティポリシー(CSP)ヘッダーなしでは脆弱性につながる可能性があります。
したがって、src
プロパティがSVGであることがわかっている場合は、unoptimized
プロパティを使用することをお勧めします。これはsrc
が".svg"
で終わる場合に自動的に行われます。
ただし、デフォルトの画像最適化APIでSVG画像を提供する必要がある場合は、next.config.js
でdangerouslyAllowSVG
を設定できます:
module.exports = {
images: {
dangerouslyAllowSVG: true,
contentDispositionType: 'attachment',
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
},
}
さらに、ブラウザに画像をダウンロードさせるためにcontentDispositionType
を設定し、画像に埋め込まれたスクリプトの実行を防ぐためにcontentSecurityPolicy
を設定することを強くお勧めします。
contentDispositionType
デフォルトのローダーは、APIが任意のリモート画像を提供できるため、追加の保護としてContent-Disposition
ヘッダーをattachment
に設定します。
デフォルト値はattachment
で、ブラウザに直接アクセスしたときに画像をダウンロードするよう強制します。これは、dangerouslyAllowSVG
がtrue
の場合に特に重要です。
オプションでinline
を設定して、ブラウザに直接アクセスしたときにダウンロードせずに画像をレンダリングすることを許可できます。
module.exports = {
images: {
contentDispositionType: 'inline',
},
}
アニメーション画像
デフォルトのローダーは、アニメーション画像に対して自動的に画像最適化をバイパスし、画像をそのまま提供します。
アニメーションファイルの自動検出は最善の努力で行われ、GIF、APNG、WebPをサポートしています。特定のアニメーション画像の画像最適化を明示的にバイパスする場合は、unoptimizedプロップを使用してください。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.0.0 | next/image がnext/legacy/image に名称変更 |