コンテンツにスキップ
API ReferenceComponentsImage (Legacy)

Image (Legacy)

これはレガシーAPIであり、推奨されなくなりました。後方互換性のために引き続きサポートされています。

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 propのサポートを追加しました
    • layout propをstyleまたはclassNameに置き換えて削除しました
    • objectFit propをstyleまたはclassNameに置き換えて削除しました
    • objectPosition propをstyleまたはclassNameに置き換えて削除しました
  • IntersectionObserverの実装を削除し、ネイティブの遅延読み込みに置き換えました
    • ネイティブの同等物がないため、lazyBoundary propを削除しました
    • ネイティブの同等物がないため、lazyRoot propを削除しました
  • loader configをloader propに置き換えて削除しました
  • alt propをオプションから必須に変更しました
  • 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動作srcSetサイズラッパーとサイザーあり
intrinsic (デフォルト)コンテナの幅に合わせて縮小、画像サイズまで1x、2x（imageSizesに基づく）該当なしはい
fixedwidthおよびheightに正確にサイズ設定1x、2x（imageSizesに基づく）該当なしはい
responsiveコンテナの幅に合わせてスケーリング640w、750w、...2048w、3840w（imageSizesおよびdeviceSizesに基づく）100vwはい
埋め込みコンテナを埋めるために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文字列を返す関数です。

カスタムローダーの使用例を以下に示します。

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は、パフォーマンスメトリックに劇的な影響を与える可能性があります。33vwのサイズがない場合、サーバーから選択される画像は必要以上に3倍幅になります。ファイルサイズは幅の二乗に比例するため、sizesがない場合、ユーザーは必要以上に9倍大きい画像をダウンロードすることになります。

srcsetとsizesの詳細を学ぶ

quality

最適化された画像の品質。1から100までの整数で、100が最高の品質です。デフォルトは75です。

priority

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

priorityプロパティは、Largest Contentful Paint (LCP)要素として検出されたすべての画像に使用する必要があります。複数の優先度画像がある場合があるのは、異なるビューポートサイズで異なる画像がLCP要素になる可能性があるためです。

画像がファーストビューに表示される場合にのみ使用する必要があります。デフォルトはfalseです。

placeholder

画像が読み込まれている間に使用されるプレースホルダー。可能な値はblurまたはemptyです。デフォルトはemptyです。

blurの場合、プレースホルダーとしてblurDataURLプロパティが使用されます。srcが静的インポートからのオブジェクトで、インポートされた画像が.jpg、.png、.webp、または.avifの場合、blurDataURLは自動的に設定されます。

動的な画像の場合、blurDataURLプロパティを提供する必要があります。Plaiceholderなどのソリューションは、base64生成に役立ちます。

emptyの場合、画像が読み込まれている間はプレースホルダーはなく、空のスペースのみが表示されます。

試してみる

高度なProps

場合によっては、より高度な使用法が必要になることがあります。<Image />コンポーネントは、オプションで以下の高度なプロパティを受け入れます。

style

CSSスタイルを基になる画像要素に渡すことができます。

すべてのlayoutモードは画像要素に独自のスタイルを適用することに注意してください。これらの自動スタイルは、style propよりも優先されます。

また、必須の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画像が正常に読み込まれる前にプレースホルダーとして使用されるData URL。placeholder="blur"と組み合わせた場合にのみ有効です。

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

試してみる

画像に合わせるために、単色Data URLを生成することもできます。

lazyBoundary

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

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

詳細はこちら

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を以下の設定で更新することで、すべての画像に適用できます。

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で応答します。

以下は、hostnameにワイルドカードパターンを使用した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',
  },
}

組み込みLoader

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

  • デフォルト: next dev、next start、またはカスタムサーバーで自動的に動作します。
  • Vercel: Vercelにデプロイすると自動的に動作します。設定は不要です。詳細はこちら
  • Imgix: loader: 'imgix'
  • Cloudinary: loader: 'cloudinary'
  • Akamai: loader: 'akamai'
  • Custom: loader: 'custom'カスタムクラウドプロバイダーをnext/legacy/imageコンポーネントのloader propを実装して使用します。

他のプロバイダーが必要な場合は、next/legacy/imageでloader propを使用できます。

output: 'export'を使用してビルド時に画像を最適化することはできません。オンデマンドでのみ可能です。next/legacy/imageをoutput: 'export'で使用するには、デフォルト以外の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 propを提供する画像にのみ使用されるからです。これは、画像が画面のフル幅より小さいことを示しています。したがって、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をサポートしていない場合、元のsrc画像のフォーマットにフォールバックします。

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

知っておくと良いこと:

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

Caching Behavior

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

画像はリクエスト時に動的に最適化され、<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を設定すると、生成される可能性のある画像ファイルの総数を減らすことができます。
  • formatsを設定すると、単一の画像フォーマットのために複数のフォーマットを無効にすることができます。

Minimum Cache TTL

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

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

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 propを直接変更するか、<distDir>/cache/imagesを削除する必要があるかもしれません。

Disable 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) headersがないと脆弱性につながる可能性があります。

したがって、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を設定し、画像に埋め込まれたスクリプトの実行を防ぐために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プロパティを使用してください。

バージョン履歴

バージョン変更履歴
v16.0.0next/legacy/imageは非推奨であり、将来のNext.jsのバージョンで削除されます。代わりにnext/imageを使用してください。
v13.0.0next/imageがnext/legacy/imageにリネームされました。