Menu

Image (Legacy)

Next.js 13以降、next/imageコンポーネントはパフォーマンスと開発者体験の向上を目指して書き直されました。後方互換性のあるアップグレードソリューションを提供するため、古いnext/imageはnext/legacy/imageに名前が変更されました。

警告：next/legacy/imageは非推奨であり、Next.jsの将来のバージョンで削除される予定です。代わりにnext/imageをご使用ください。

比較

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コンポーネントの最も一般的に使用されるプロパティについて説明します。より稀に使用されるプロパティの詳細については、Advanced Propsセクションを参照してください。

layout

ビューポートのサイズが変わるにつれて、画像のレイアウト動作が変わります。

layout動作srcSetsizesラッパーとサイザーの有無
intrinsic（デフォルト）コンテナの幅に合わせてスケールダウン、画像サイズまで1x、2x（imageSizesに基づく）N/Aあり
fixed正確にwidthとheightにサイズ変更1x、2x（imageSizesに基づく）N/Aあり
responsiveコンテナの幅に合わせてスケール640w、750w、...2048w、3840w（imageSizesとdeviceSizesに基づく）100vwあり
fillX軸と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="Picture of the author"
      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例は、パフォーマンスメトリクスに劇的な影響を与える可能性があります。33vwsizesがない場合、サーバーから選択された画像は、必要なサイズの3倍の幅になります。ファイルサイズは幅の二乗に比例するため、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の場合、画像の読み込み中にプレースホルダーはなく、空のスペースのみです。

試してみてください：

Advanced Props

場合によっては、より高度な使用法が必要になることがあります。<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エンコードされた画像である必要があります。拡大およびぼかしが行われるため、非常に小さい画像（10px以下）をお勧めします。プレースホルダーとしてより大きい画像を含めると、アプリケーションのパフォーマンスが低下する可能性があります。

試してみてください：

画像に合致する単色データURLを生成することもできます。

lazyBoundary

ビューポートとの画像の交差を検出し、遅延読み込みをトリガーするために使用される境界ボックスとして機能する文字列（marginプロップと同様の構文）。デフォルトは"200px"です。

画像がルートドキュメント以外のスクロール可能な親要素内にネストされている場合、lazyRootプロップも割り当てる必要があります。

詳細を参照

lazyRoot

スクロール可能な親要素を指すReactRef。デフォルトはnull（ドキュメントビューポート）です。

Refは、DOM要素またはDOM要素にRefを転送する 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を以下の設定で更新することで、すべての画像に割り当てることができます：

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

その他のプロップ

<Image />コンポーネント上の他のプロパティは、以下の例外を除き、基になるimg要素に渡されます：

  • srcSet。代わりにDevice Sizesを使用してください。
  • ref。代わりにonLoadingCompleteを使用してください。
  • decoding。これは常に"async"です。

設定オプション

Remote Patterns

マルウェアユーザーからアプリケーションを保護するには、外部画像を使用するために設定が必要です。これにより、アカウントからの外部画像のみがNext.js Image Optimization APIから提供されることが保証されます。これらの外部画像は、以下に示すように、next.config.jsファイルのremotePatternsプロップで設定できます：

next.config.js
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プロップの例です：

next.config.js
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を最適化する可能性があるため、お勧めできません。

以下は、searchを使用して、next.config.jsファイルのremotePatternsプロップの例です：

next.config.js
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で応答します。

Domains

警告：Next.js 14以降、マルウェアユーザーからアプリケーションを保護するために、厳密なremotePatternsを優先して非推奨です。ドメイン内の提供されるすべてのコンテンツを所有している場合にのみdomainsを使用してください。

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

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

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

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

Loader Configuration

Next.js組み込みImage Optimization APIを使用する代わりに、クラウドプロバイダーを使用して画像を最適化する場合は、next.config.jsファイルのloaderとpathプレフィックスを設定できます。これにより、Image srcに相対URLを使用でき、プロバイダーの正しい絶対URLを自動的に生成できます。

next.config.js
module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

組み込みImage パスのカスタマイズ

Next.jsの組み込み画像最適化のデフォルトパスを変更またはプレフィックスする場合は、pathプロップを使用して行うことができます。pathのデフォルト値は/_next/imageです。

next.config.js
module.exports = {
  images: {
    path: '/my-prefix/_next/image',
  },
}

組み込みLoaders

以下の Image Optimization クラウドプロバイダーが含まれています：

  • デフォルト：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を使用するには、デフォルト以外の別のloaderを使用する必要があります。ディスカッションで詳細を参照してください。

Advanced

以下の設定は高度な使用例向けであり、通常は必要ありません。以下のプロパティを設定する場合、Next.jsの今後の更新に対するデフォルトの変更はオーバーライドされます。

Device Sizes

ユーザーのデバイス幅が予測できる場合は、next.config.jsのdeviceSizesプロップを使用してデバイス幅ブレークポイントのリストを指定できます。これらの幅は、next/legacy/imageコンポーネントがlayout="responsive"またはlayout="fill"を使用する場合に、ユーザーのデバイスに正しい画像が提供されるように使用されます。

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

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

Image Sizes

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

2つの個別のリストがある理由は、imageSizesは画像が全幅より小さいことを示すsizesプロップを提供する画像にのみ使用されるためです。したがって、imageSizes のサイズはすべてdeviceSizesの最小サイズより小さくしてください。

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

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

Acceptable Formats

デフォルトImage Optimization APIは、最適な出力形式を決定するために、リクエストのAcceptヘッダー経由でブラウザーがサポートする画像形式を自動的に検出します。

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

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

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

AVIFサポートを有効にすることができます。ブラウザーがAVIFをサポートしていない場合、元の形式にフォールバックします：

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

補足：

  • ほとんどの場合、WebPを使用することをお勧めします。
  • AVIFは一般的にエンコードに50%長い時間がかかりますが、WebPと比較して20%圧縮が小さくなります。つまり、画像が最初にリクエストされたとき、それは通常遅く、その後キャッシュされる後続のリクエストがより高速になります。
  • Next.jsの前で Proxy/CDNでセルフホストする場合、Proxy はAcceptヘッダーを転送するように設定する必要があります。

キャッシング動作

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

画像はリクエスト時に動的に最適化され、<distDir>/cache/imagesディレクトリに保存されます。最適化された画像ファイルは、有効期限に達するまで後続のリクエストで提供されます。キャッシュされているが有効期限が切れているファイルに一致するリクエストが行われた場合、期限切れの画像が即座に提供されます。その後、画像がバックグラウンドで最適化され（再検証とも呼ばれます）、新しい有効期限でキャッシュに保存されます。

画像のキャッシュステータスは、x-nextjs-cache（Vercelにデプロイ時はx-vercel-cache）レスポンスヘッダーの値を読むことにより判定できます。可能な値は以下の通りです：

  • MISS：パスがキャッシュに含まれていません（最初のアクセス時に最大1回発生）
  • STALE：パスがキャッシュに含まれていますが、再検証時刻を超えているため、バックグラウンドで更新されます
  • HIT：パスがキャッシュに含まれており、再検証時刻を超えていません

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

  • アップストリーム画像にCache-Controlヘッダーが含まれていない、または値が非常に低い場合、minimumCacheTTLを設定してキャッシュ期間を増やすことができます。
  • 可能に生成されたイメージの総数を削減するために、deviceSizesとimageSizesを設定できます。
  • 複数の形式を無効にして単一の画像形式を優先するために、formatsを設定できます。

Minimum Cache TTL

キャッシュされた最適化された画像の Time to Live（TTL）を秒単位で設定できます。多くの場合、Static Image Importを使用する方が有効です。この方法は自動的にファイルコンテンツをハッシュし、immutableのCache-Controlヘッダーで画像をいつでもキャッシュします。

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

next.config.js
module.exports = {
  images: {
    minimumCacheTTL: 14400, // 4 hours
  },
}

TTLを増やして、再検証の数を減らし、潜在的にコストを低下させることができます：

next.config.js
module.exports = {
  images: {
    minimumCacheTTL: 2678400, // 31 days
  },
}

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

画像ごとのキャッシング動作を変更する必要がある場合は、headersを設定してアップストリーム画像（例えば/some-asset.jpg、/_next/imageではない）にCache-Controlヘッダーを設定できます。

現在、キャッシュを無効化するメカニズムがないため、minimumCacheTTLは低く保つことが最良です。そうしないと、srcプロップを手動で変更するか<distDir>/cache/imagesを削除する必要があります。

Static Imports の無効化

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

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

next.config.js内で静的画像インポートを無効化できます：

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

Dangerously Allow SVG

デフォルトloaderは、いくつかの理由からSVG画像を最適化しません。まず、SVGはベクター形式であり、損失なくサイズ変更できることを意味します。次に、SVGはHTMLおよびCSSと同じ多くの機能を持ち、適切なContent Security Policy（CSP）ヘッダーがない場合、脆弱性につながる可能性があります。

したがって、srcプロップがSVGであることが確認されている場合、unoptimizedプロップを使用することをお勧めします。これは、srcが".svg"で終わる場合に自動的に発生します。

ただし、デフォルト 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をattachmentに設定し、contentSecurityPolicyを設定することが強く推奨されます。

contentDispositionType

デフォルトloaderは、APIが任意のリモート画像を提供できるため、追加の保護のためにContent-Dispositionヘッダーをattachmentに設定します。

デフォルト値はattachmentであり、直接訪問時にブラウザーに画像をダウンロードさせます。これは、dangerouslyAllowSVGがtrueの場合に特に重要です。

ブラウザーが直接訪問時に画像をダウンロードせずにレンダリングできるようにするために、inlineをオプションで設定できます。

next.config.js
module.exports = {
  images: {
    contentDispositionType: 'inline',
  },
}

Animated Images

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

アニメーションファイルの自動検出は最善の努力であり、GIF、APNG、WebPをサポートしています。特定のアニメーション画像に対して Image Optimization を明示的にバイパスする場合は、unoptimizedプロップを使用してください。

Version History

VersionChanges
v16.0.0next/legacy/imageは非推奨であり、Next.jsの将来のバージョンで削除される予定です。代わりにnext/imageをご使用ください。
v13.0.0next/imageはnext/legacy/imageに名前変更