<Image>

例

この API リファレンスは、Image コンポーネントで利用可能な props や設定オプションの使い方を理解するのに役立ちます。機能や使い方については、 Image コンポーネントのページを参照してください。

app/page.js
import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

Props

Image コンポーネントで使用可能な主な Props は以下のとおりです：

Prop	Example	Type	Required
`src`	`src="/profile.png"`	String	Yes
`width`	`width={500}`	Integer (px)	Yes
`height`	`height={500}`	Integer (px)	Yes
`alt`	`alt="Picture of the author"`	String	Yes
`loader`	`loader={imageLoader}`	Function	-
`fill`	`fill={true}`	Boolean	-
`sizes`	`sizes="(max-width: 768px) 100vw"`	String	-
`quality`	`quality={80}`	Integer (1-100)	-
`priority`	`priority={true}`	Boolean	-
`placeholder`	`placeholder="blur"`	String	-
`style`	`style={{objectFit: "contain"}}`	Object	-
`onLoadingComplete`	`onLoadingComplete={img => done()}`	Function	非推奨
`onLoad`	`onLoad={event => done()}`	Function	-
`onError`	`onError(event => fail()}`	Function	-
`loading`	`loading="lazy"`	String	-
`blurDataURL`	`blurDataURL="data:image/jpeg..."`	String	-

必須の Props

Image コンポーネントには、src、width、height、altの各属性が必須です。

app/page.js
import Image from 'next/image'

export default function Page() {
  return (
    <div>
      <Image
        src="/profile.png"
        width={500}
        height={500}
        alt="Picture of the author"
      />
    </div>
  )
}

`src`

以下のどちらかを指定する必要があります：

静的にインポートされた画像ファイル
パス文字列。これは、loader prop の値により、外部の絶対 URL か内部パスのどちらかになります

外部 URL を使用する場合は、next.config.jsのremotePatternsに追加する必要があります。

`width`

widthプロパティはレンダリングされる幅をピクセル単位で表し、画像が表示される大きさに影響します。

静的にインポートされた画像やfillプロパティを持つ画像を除き、必須です。

`height`

heightプロパティはレンダリングの高さをピクセル単位で表し、画像が表示される大きさに影響します。

静的にインポートされた画像やfillプロパティを持つ画像を除き、必須です。

`alt`

altプロパティは、スクリーンリーダーや検索エンジンのために画像を説明するために使用されます。また画像が無効になっていたり、画像の読み込み中にエラーが発生した場合の代替テキストでもあります。

altプロパティには、ページの意味を変えることなく画像を置き換えることができるテキストを記述する必要があります。画像を補足するためのものではなく、画像の上や下のキャプションですでに提供されている情報を繰り返してはいけません。

画像が純粋に装飾的であったり、ユーザー向けでない場合は、altプロパティは空の文字列（alt=""）にする必要があります。

さらに学ぶ →

任意の Props

<Image />コンポーネントは、必須属性以外にも多くの負荷的な属性を受け付けます。このセクションでは、Image コンポーネントのもっとも一般的に使用されるプロパティについて説明します。めったに使われない属性については、高度な属性のセクションで詳細をご覧ください。

`loader`

画像 URL の解決に使用されるカスタム関数です。

loaderは、以下のパラメータを受け取り、画像の URL 文字列を返す関数です：

src
width
quality

カスタムのloaderの例は以下のようなものです：

'use client'

import Image from 'next/image'

const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

export default function Page() {
  return (
    <Image
      loader={imageLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Good to know： loaderのような関数を受け付ける prop を使用する場合、提供された関数をシリアライズするためにClient Componentsを使用する必要があります。

あるいはnext.config.jsのloaderFile設定を使用して、アプリケーション内のnext/imageのすべてのインスタンスを、prop を渡さずに設定もできます。

`fill`

fill={true} // {true} | {false}

画像が親要素を満たすようにするブール値で、幅と高さが不明な場合に便利です。

親要素はposition: "relative"、position："fixed"、またはposition："absolute"を指定する必要があります。

デフォルトでは、img 要素には自動的にposition: "absolute"が割り当てられます。

画像にスタイルが適用されていない場合、画像はコンテナに合わせて引き伸ばされます。コンテナに合わせてアスペクト比を維持するためにレターボックス化する画像には、object-fit: "contain"を設定するほうがよいでしょう。

あるいは、object-fit: "cover"にすると、画像はコンテナ全体を満たし、アスペクト比を保つように切り取られます。これを正しく見せるには、overflow："hidden"スタイルが親要素に割り当てられていなければなりません。

詳細は以下を参照してください

`sizes`

メディアクエリに似た文字列で、異なるブレイクポイントにおける画像の幅に関する情報を提供します。sizesの値は、fillを使用している画像や、レスポンシブサイズを持つようにスタイルされている画像のパフォーマンスに大きく影響します。

sizesは、画像描画性能に関連する 2 つの重要な目的を果たします：

まず、ブラウザは、next/imageが自動的に生成したsrcsetから、ダウンロードする画像のサイズを決定するためにsizesの値を使用します。ブラウザが画像を選択するとき、ページ上の画像のサイズをまだ知らないので、ビューポートと同じサイズかそれより大きい画像を選択します。sizes属性を使用すると、画像が実際にはフルスクリーンよりも小さくなることをブラウザに伝えることができます。fill属性で画像のsizes値を指定しない場合、デフォルト値の100vw（フルスクリーン幅）が使用されます。
次に、sizes属性は自動生成されsrcset値の動作を変更します。sizes値がない場合、固定サイズの画像（1x/2x/など）に適した小さなsrcsetが生成されます。sizesが定義されている場合、レスポンシブ画像に適した大きなsrcsetが生成されます（640w/750w など）。sizes属性にビューポート幅のパーセンテージを表す50vwのようなサイズが含まれている場合、srcsetは必要以上に小さい値を含まないようにトリミングされます。

例えばスタイリングによって画像がモバイルデバイスでは全幅、タブレットでは 2 カラム、デスクトップでは 3 カラムのレイアウトになることがわかっている場合、sizes属性は次のようにします：

import Image from 'next/image'

export default function Page() {
  return (
    <div className="grid-element">
      <Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />
    </div>
  )
}

このsizesの例では、パフォーマンス指標に劇的な影響を与えます。33vwのサイズがなければ、サーバーから選択される画像は必要な幅の 3 倍になってしまいます。ファイルサイズは横幅の 2 乗に比例するため、サイズがなければユーザーは必要なサイズの 9 倍の画像をダウンロードすることになります。

srcset、sizesの詳細は以下を参照してください：

web.dev
mdn

`quality`

quality={75} // {number 1-100}

最適化された画像の画質を表し、1から100の整数で、100を指定すると最高画質、したがってファイルサイズは最大になります。デフォルトは75です。

`priority`

priority={false} // {false} | {true}

trueの場合、画像は優先度が高いとみなされ、プリロードされます。priorityを使用している画像では、遅延読み込みは自動的に無効になります。

priority属性はLargest Contentful Paint（LCP）要素として検出された画像に使用するべきです。異なるビューポートサイズでは異なる画像が LCP 要素になる可能性があるため、複数の優先度画像を持つことが適切な場合もあります。

画像がファースト・ビューに表示される場合にのみ使用されるべきです。デフォルトはfalseです。

`placeholder`

placeholder = 'empty' // "empty" | "blur" | "data:image/..."

画像の読み込み中に使用するプレースホルダを指定します。指定できる値はblur、empty、またはdata:image/...です。デフォルトはemptyです。

blurの場合、blurDataURL属性がプレースホルダとして使用されます。srcが静的インポートからのオブジェクトで、インポートされた画像がアニメーションでないと検知され、.jpg、.png、.webp、または.avifの場合、blurDataURLは自動的に入力されます。

動的画像の場合は、blurDataURL属性を指定する必要があります。Plaiceholderのようなソリューションでは、base64生成に役立ちます。

data:image/...の場合、画像がロードされている間、Data URLがプレースホルダとして使用されます。

emptyの場合、画像の読み込み中にプレースホルダは無く、空白のスペースだけが表示されます。

以下のリンクから動作を試すことができます：

高度な属性

場合によっては、より高度な使い方が必要になるかもしれません。<Image />コンポーネントは、オプションで以下の高度な属性を受け付けます。

`style`

基礎となる画像要素に CSS スタイルを渡します。

components/ProfileImage.js
const imageStyle = {
  borderRadius: '50%',
  border: '1px solid #fff',
}

export default function ProfileImage() {
  return <Image src="..." style={imageStyle} />
}

必須のwidth、height props はスタイリングと相互作用することがあることを覚えておいてください。スタイリングを使って画像の幅を変更する場合、その画像の本来の縦横比を維持するために高さもautoにスタイリングする必要があります。

`onLoadingComplete`

'use client'

<Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />

画像が完全に読み込まれ、プレースホルダが削除されると呼び出されるコールバック関数です。

コールバック関数は基礎となる<img>要素への参照を引数にとり呼び出されます。

Good to know：onLoadingCompleteのような関数を受け付ける props を使用する場合、引数に渡される関数をシリアライズするためにClient Componentsを使用する必要があります。

`onLoad`

<Image onLoad={(e) => console.log(e.target.naturalWidth)} />

画像がロードされたときに呼び出されるコールバック関数です。

loadイベントは、画像のプレースホルダが削除され、画像が完全にデコードされる前に発生する場合があります。画像が完全に読み込まれるまで待ちたい場合は、代わりにonLoadingComplete を使用します。

Good to know：onLoadのような関数を受け付ける props を使用する場合、引数に渡される関数をシリアライズするためにClient Componentsを使用する必要があります。

`onError`

<Image onError={(e) => console.error(e.target.id)} />

画像の読み込みが失敗した場合に呼び出されるコールバック関数です。

Good to know：onErrorのような関数を受け付ける props を使用する場合、引数に渡される関数をシリアライズするためにClient Componentsを使用する必要があります。

`loading`

推奨：このプロパティは高度なユースケースを想定しています。eagerでロードする画像を切り替えると、通常はパフォーマンスが低下します。代わりにpriority属性を使用することをお勧めします。

loading = 'lazy' // {lazy} | {eager}

画像の読み込み動作を指定します。デフォルトはlazyです。

lazyの場合、ビューポートから計算された距離に達するまで画像の読み込みを延期します。

eagerの場合、画像を直ちに読み込みます。

loading属性の詳細については、こちらを参照してださい。

`blurDataURL`

src画像が正常に読み込まれる前にプレースホルダ画像として使用されるData URLです。placeholder="blur"と組み合わせた場合のみ有効です。

base64 エンコードされた画像でなければなりません。拡大されてぼかされるので、非常に小さい画像（10px 以下）を推奨します。プレースホルダとして大きな画像を含めると、アプリケーションのパフォーマンスが低下する可能性があります。

以下のリンクから動作を試すことができます：

また画像にマッチした単色の Data URL を生成することもできます。

`unoptimized`

unoptimized = {false} // {false} | {true}

trueにすると、ソース画像は画質やサイズやフォーマットを変えずにそのまま提供されます。デフォルトはfalseです。

import Image from 'next/image'

const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}

Next.js 12.3.0 以降では、next.config.jsを以下の設定で更新することで、すべての画像にこの prop を割り当てることができます：

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
}

その他の Props

<Image />コンポーネントの他の属性は、以下を除いて、その下にあるimg要素へ渡されます：

srcSet - deviceSizesを使用してください
decoding - 常に"async"になります

設定オプション

props に加えて、next.config.jsで Image コンポーネントを設定できます。以下のオプションがあります：

`remotePatterns`

悪意のあるユーザーからアプリケーションを保護するため、外部画像を使用するには設定が必要です。これにより、Next.js の Image Optimization API から提供される外部画像は、自分のアカウントの画像だけになります。これらの外部画像はnext.config.jsファイルのremotePatternsプロパティで設定できます：

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

Good to know: 上記の例では、next/imageのsrc属性はhttps://example.com/account123/から始まることを強制します。その他のプロトコル、ホスト名、ポート、または一致しないパスは、400 Bad Request で応答します。

以下は、next.config.jsファイルのremotePatternsプロパティの別の例です：

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
}

Good to know: 上記の例では、next/imageのsrc属性はhttps://img1.example.comやhttps://me.avatar.example.com、または任意の数のサブドメインから始まることを強制します。その他のプロトコルやホスト名に一致しないパスは、400 Bad Request で応答します。

ワイルドカード・パターンはパス名とホスト名の両方に使用でき、以下の構文を持ちます：

*は単一のパス Segment またはサブドメインにマッチします
**は末尾の任意の数のパス Segment または先頭のサブドメインにマッチします

パターンの途中では、**構文は機能しません。

`domains`

注意：悪意のあるユーザからアプリケーションを保護するために、domainではなく厳密なremotePatternsを設定することをお勧めします。ドメインから提供されるすべてのコンテンツを所有する場合にのみ、domainを使用してください。

remotePatternsと同様に、domainsを使って外部の画像として許可されるホスト名のリストを指定できます。

しかし、domains設定はワイルドカードによるパターンマッチをサポートしておらず、プロトコル、ポート、パス名は制限できません。

以下は、next.config.jsファイルのdomainsプロパティの例です：

next.config.js
module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

`loaderFile`

Next.js にビルドインの Image Optimization API ではなく、クラウドプロバイダーを使って画像を最適化したい場合は、next.config.jsでloaderFileを次のように設定します：

next.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}

このファイルは、Next.js アプリケーションのルートからの相対パスで指定する必要があります。このファイルは以下の例のように文字列を返すデフォルト関数をエクスポートする必要があります：

'use client'

export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

あるいは、loader propを使ってnext/imageの各インスタンスを設定できます。

例：

カスタムのローダー設定

Good to know：関数を受け付けるイメージローダーのファイルをカスタマイズするには、Client Componentを使用して提供された関数をシリアライズする必要があります。

高度な設定

以下の設定は高度なユースケース向けであり、通常は必要ありません。以下の属性を設定すると、今後のアップデートで Next.js のデフォルトが変更されても、それを上書きすることになります。

`deviceSizes`

ユーザーのデバイス幅がわかっている場合、next.config.jsのdeviceSizesプロパティを使用してデバイス幅のブレークポイントのリストを指定できます。これらの幅は、next/imageコンポーネントがsizes prop を使用するときに使用され、ユーザーのデバイスに対して正しい画像が提供されるようにします。

設定が提供されない場合、以下のデフォルトが使用されます。

next.config.js
module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

`imageSizes`

next.config.jsファイルのimages.imageSizesプロパティを使用して、画像の幅のリストを指定できます。これらの幅は、deviceSizesの配列と連結され、画像のsrcsetを生成するために使用されるサイズの完全な配列を形成します。

2 つの別々のリストがある理由は、imageSizes は、画像が画面の全幅よりも小さいことを示すsizes prop を提供する画像にのみ使用されるからです。したがって、imageSizes のサイズはすべて deviceSizes の最小サイズより小さくなければなりません。

設定が提供されていない場合、以下のデフォルトが使用されます。

next.config.js
module.exports = {
  images: {
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

`formats`

デフォルトのImage Optimization APIは、リクエストのAcceptヘッダによってブラウザがサポートしている画像フォーマットを自動的に検出します。

Acceptヘッダが複数の設定済みのフォーマットにマッチした場合は、配列の最初にマッチしたものが使用されます。したがって、配列の順番は重要です。マッチするものがない（あるいは元画像がアニメーションである）場合は、Image Optimization API は元画像のフォーマットにフォールバックします。

設定を省略した場合は、以下のデフォルトが使われます。

next.config.js
module.exports = {
  images: {
    formats: ['image/webp'],
  },
}

AVIF のサポートは以下の設定で有効にできます。

next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

Good to know:

AVIF は一般的にエンコードに 20%長い時間がかかりますが、WebP に比べて 20%小さく圧縮されます。つまり、最初に画像がリクエストされたときは一般的に遅くなり、その後キャッシュされたリクエストは速くなります

Next.js の前にプロキシ/CDN を使用してセルフホストする場合は、Acceptヘッダーを転送するようにプロキシを設定する必要があります

キャッシュの制御

以下に、デフォルトのローダーのキャッシュ・アルゴリズムについて説明します。その他のローダーについては、クラウドプロバイダーのドキュメントを参照してください。

画像はリクエスト時に動的に最適化され、<distDir>/cache/imagesディレクトリに保存されます。最適化された画像ファイルは、有効期限が切れるまで、それ以降のリクエストで提供されます。キャッシュされているが有効期限切れのファイルにマッチするリクエストがなされると、有効期限切れの画像は直ちに古くなったものが提供されます。その後、画像はバックグラウンドで再度最適化され（再検証とも呼ばれます）、新しい有効期限とともにキャッシュに保存されます。

画像のキャッシュの状態は、x-nextjs-cacheレスポンス・ヘッダの値を読み取ることで決定されます。取り得る値は以下のとおりです：

MISS - パスがキャッシュにない（最初の訪問時に最大一度だけ発生する）
STALE - パスはキャッシュにあるが、再検証時間を超えているため、バックグラウンドで更新される
HIT - パスがキャッシュ内にあり、再検証時間を超えていない

有効期限（というより Max Age）は、minimumCacheTTL設定またはアップストリームイメージのCache-Controlヘッダーのいずれか大きい方で定義されます。具体的には、Cache-Controlヘッダーのmax-age値が使用されます。s-maxageとmax-ageの両方が見つかった場合、s-maxageが優先されます。max-ageは、CDN やブラウザを含む下流のクライアントにも渡されます。

minimumCacheTTLを設定すると、アップストリーム画像にCache-Controlヘッダが含まれていない場合、またはその値が非常に小さい場合に、キャッシュ期間を長くできます
deviceSizesとimageSizesを設定して、生成可能なイメージの総数を減らすことができます
formatsを設定して、複数のフォーマットを無効にし、単一の画像フォーマットを優先させることができます

`minimumCacheTTL`

最適化された画像をキャッシュする TTL（Time to Live）を秒単位で設定できます。多くの場合、ファイルの内容を自動的にハッシュ化し、Cache-Controlヘッダをimmutableにして画像を永久にキャッシュする静的な画像インポートを使うのがよいでしょう。

next.config.js
module.exports = {
  images: {
    minimumCacheTTL: 60,
  },
}

最適化された画像の有効期限（というより Max Age）は、minimumCacheTTLまたはアップストリーム画像のCache-Controlヘッダーのいずれか大きいほうで定義されます。

画像ごとにキャッシュ動作を変更する場合は、アップストリームの画像（例えば/_next/image自体ではなく/some-asset.jpg）のCache-Controlヘッダを設定できます。

現時点ではキャッシュを無効にする仕組みはないので、minimumCacheTTLを低く保つのが最善です。あるいは、手動でsrc prop を変更するか、<distDir>/cache/imagesを削除する必要があるかもしれません。

`disableStaticImages`

デフォルトの動作では、import icon from './icon.png'のように静的ファイルをインポートし、それをsrcプロパティに渡すことが可能です。

場合によっては、インポートが異なる動作をすることを期待する他のプラグインと競合するため、この機能を無効にしたいかもしれません。

静的画像のインポートを無効にするには、next.config.jsで設定します：

next.config.js
module.exports = {
  images: {
    disableStaticImages: true,
  },
}

`dangerouslyAllowSVG`

デフォルトのローダーは、いくつかの理由から SVG 画像を最適化しません。第一に、SVG はベクターフォーマットであり、ロスレスでリサイズできることを意味します。第二に、SVG には HTML/CSS と同じ機能がたくさんあり、適切なコンテンツ・セキュリティ・ポリシーがないと脆弱性につながる可能性があります。

デフォルトの Image Optimization API で SVG 画像を提供する必要がある場合、next.config.jsの中でdangerouslyAllowSVGを設定できます：

next.config.js
module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

さらに、ブラウザに画像をダウンロードさせるためにcontentDispositionTypeを設定し、さらに画像に埋め込まれたスクリプトの実行を防ぐためにcontentSecurityPolicyを設定することを強くお勧めします。

アニメーション画像

デフォルトのローダーは、アニメーション画像の画像最適化を自動的にバイパスし、画像をそのまま提供します。

アニメーションファイルの自動検出はベストエフォート型で、GIF、APNG、WebP をサポートしています。指定したアニメーション画像に対して明示的に画像最適化をバイパスしたい場合は、unoptimized prop を使ってください。

レスポンシブ画像

デフォルトで生成されるsrcsetは、異なるデバイスのピクセル比をサポートするために、1xと2xの画像を含んでいます。しかし、ビューポートに合わせて伸縮するレスポンシブな画像をレンダリングしたい場合もあるでしょう。その場合は、style（またはclassName）と同様にsizesを設定する必要があります。

以下のいずれかの方法で、レスポンシブ画像をレンダリングできます。

静的なインポートを使用したレスポンシブ画像

ソース画像が動的でない場合は、静的にインポートしてレスポンシブ画像を作成できます：

components/author.js
import Image from 'next/image'
import me from '../photos/me.jpg'

export default function Author() {
  return (
    <Image
      src={me}
      alt="Picture of the author"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
    />
  )
}

以下のデモで確認できます：

ビューポートにレスポンシブな画像のデモ

アスペクト比を使用したレスポンシブ画像

元画像が動的またはリモートの URL の場合、レスポンシブ画像の正しいアスペクト比を設定するために、widthとheightも指定する必要があります：

app/page.js
import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <Image
      src={photoUrl}
      alt="Picture of the author"
      sizes="100vw"
      style={{
        width: '100%',
        height: 'auto',
      }}
      width={500}
      height={300}
    />
  )
}

以下のデモで確認できます：

ビューポートにレスポンシブな画像のデモ

`fill`を使用したレスポンシブ画像

アスペクト比がわからない場合は、fill prop を設定し、position: relativeを親で設定する必要があります。オプションで、希望するストレッチとクロップの動作に応じて、object-fitスタイルを設定できます：

app/page.js
import Image from 'next/image'

export default function Page({ photoUrl }) {
  return (
    <div style={{ position: 'relative', width: '500px', height: '300px' }}>
      <Image
        src={photoUrl}
        alt="Picture of the author"
        sizes="500px"
        fill
        style={{
          objectFit: 'contain',
        }}
      />
    </div>
  )
}

以下のデモで確認できます：

fill prop のデモ

Theme の検出

ライトモードとダークモードで異なる画像を表示したい場合は、2 つの<Image>コンポーネントをラップし、CSS メディアクエリに基づいて正しいほうを表示する新しいコンポーネントを作成できます。

components/theme-image.module.css
.imgDark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .imgLight {
    display: none;
  }
  .imgDark {
    display: unset;
  }
}

components/theme-image.tsx
import styles from './theme-image.module.css'
import Image, { ImageProps } from 'next/image'

type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
  srcLight: string
  srcDark: string
}

const ThemeImage = (props: Props) => {
  const { srcLight, srcDark, ...rest } = props

  return (
    <>
      <Image {...rest} src={srcLight} className={styles.imgLight} />
      <Image {...rest} src={srcDark} className={styles.imgDark} />
    </>
  )
}

Good to know：loading="lazy"のデフォルトの動作は、確実に正しい画像だけをロードします。priorityやloading="eager"は、両方の画像を読み込んでしまうので使えません。その代わり、fetchPriority="high"を使うことができます。

以下のデモで確認できます：

ライト/ダークモードの検出のデモ

既知のブラウザバグ

このnext/imageコンポーネントは、Safari 15.4 以前の古いブラウザでは eager loading にフォールバックする可能性がある、ブラウザネイティブの遅延ロードを使用します。ブラー効果のプレースホルダを使用すると、Safari 12 より前の古いブラウザでは空のプレースホルダにフォールバックします。width/heightがautoのスタイルを使用すると、縦横比を保持しないSafari 15 以前の古いブラウザでレイアウトシフトが発生する可能性があります。詳しくはこちらのMDN ビデオを参照してください。

Safari 15 - 16.3 では、読み込み中にグレーのボーダーが表示されます。Safari 16.4 ではこの問題が修正されました。考えられる解決策：
- CSS の@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }を使用する
- 画像がファーストビューにあるならpriorityを使用する
Firefox 67+ で読み込み中に背景が白く表示されます。考えられる解決策：
- AVIF formatsを有効にする
- placeholderを使用する

バージョン履歴

Version	Changes
`v14.0.0`	`onLoadingComplete` prop と `domains` 設定が非推奨になりました。
`v13.4.14`	`placeholder` prop が`data:/image...`に対応。
`v13.2.0`	`contentDispositionType`設定が追加されました。
`v13.0.6`	`ref` prop が追加されました。
`v13.0.0`	`next/image`のインポートは`next/legacy/image`にリネームされました。`next/future/image`のインポートが`next/image`にリネームされました。インポート文を安全に自動的にリネームするためのcodemod が提供されています。`<span>`によるラップが廃止されました。 `layout`、`objectFit`、`objectPosition`、`lazyBoundary`、`lazyRoot`props が削除されました。`alt`が必須になりました。`onLoadingComplete`が`img`要素への参照を引数に取るようになりました。ビルトインのローダー設定が廃止されました。
`v12.3.0`	`remotePatterns`、`unoptimized`設定が安定版になりました。
`v12.2.0`	実験的な`remotePatterns`と`unoptimized`設定が追加されました。`layout="raw"`が廃止されました。
`v12.1.1`	`style` prop が追加されました。実験的に`layout="raw"`のサポートが追加されました。
`v12.1.0`	`dangerouslyAllowSVG`と`contentSecurityPolicy`設定が追加されました。
`v12.0.9`	`lazyRoot` prop が追加されました。
`v12.0.0`	`formats`設定が追加されました。 AVIF のサポートが追加されました。ラッパーが`<div>`から`<span>`へ変更されました。
`v11.1.0`	`onLoadingComplete` and `lazyBoundary`が追加されました。
`v11.0.0`	`src` prop support for static import. `placeholder` prop added. `blurDataURL`が追加されました。
`v10.0.5`	`loader` prop が追加されました。
`v10.0.1`	`layout` prop が追加されました。
`v10.0.0`	`next/image`が導入されました。

Props​

必須の Props​

src​

width​

height​

alt​

任意の Props​

loader​

fill​

sizes​

quality​

priority​

placeholder​

高度な属性​

style​

onLoadingComplete​

onLoad​

onError​

loading​

blurDataURL​

unoptimized​

その他の Props​

設定オプション​

remotePatterns​

domains​

loaderFile​

高度な設定​

deviceSizes​

imageSizes​

formats​

キャッシュの制御​

minimumCacheTTL​

disableStaticImages​

dangerouslyAllowSVG​

アニメーション画像​

レスポンシブ画像​

静的なインポートを使用したレスポンシブ画像​

アスペクト比を使用したレスポンシブ画像​

fillを使用したレスポンシブ画像​

Theme の検出​

既知のブラウザバグ​

バージョン履歴​

Props

必須の Props

`src`

`width`

`height`

`alt`

任意の Props

`loader`

`fill`

`sizes`

`quality`

`priority`

`placeholder`

高度な属性

`style`

`onLoadingComplete`

`onLoad`

`onError`

`loading`

`blurDataURL`

`unoptimized`

その他の Props

設定オプション

`remotePatterns`

`domains`

`loaderFile`

高度な設定

`deviceSizes`

`imageSizes`

`formats`

キャッシュの制御

`minimumCacheTTL`

`disableStaticImages`

`dangerouslyAllowSVG`

アニメーション画像

レスポンシブ画像

静的なインポートを使用したレスポンシブ画像

アスペクト比を使用したレスポンシブ画像

`fill`を使用したレスポンシブ画像

Theme の検出

既知のブラウザバグ

バージョン履歴