画像の最適化

Next.jsの<Image>コンポーネントは、HTML<img>要素を拡張し、以下の機能を提供します：

サイズの最適化： WebPなどの最新の画像フォーマットを使用して、各デバイスに適切にサイズされた画像を自動的に配信します。
ビジュアルの安定性： 画像読み込み時のレイアウトシフトを自動的に防止します。
ページロードの高速化： ネイティブブラウザの遅延読み込みを使用して、画像がビューポートに入る時のみ読み込みます。オプションでぼかしプレースホルダーが利用できます。
アセットの柔軟性： オンデマンドで画像をリサイズでき、リモートサーバーに保存された画像にも対応します。

<Image>の使用を開始するには、next/imageからインポートし、コンポーネント内にレンダリングします。

app/page.tsx

TypeScript

import Image from 'next/image'
 
export default function Page() {
  return <Image src="" alt="" />
}

srcプロパティは、ローカルまたはリモート画像です。

🎥 動画： next/imageの使用方法について詳しく学ぶ → YouTube（9分）。

ローカル画像

ルートディレクトリのpublicという名前のフォルダに、画像やフォントなどの静的ファイルを保存できます。public内のファイルは、ベースURL（/）から始まるコードで参照できます。

app/page.tsx

TypeScript

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="著者の写真"
      width={500}
      height={500}
    />
  )
}

画像が静的にインポートされている場合、Next.jsはwidthとheightの固有値を自動的に決定します。これらの値は画像比率を決定し、画像読み込み中の累積レイアウトシフトを防ぐために使用されます。

app/page.tsx

TypeScript

import Image from 'next/image'
import ProfileImage from './profile.png'
 
export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="著者の写真"
      // width={500} は自動的に提供されます
      // height={500} は自動的に提供されます
      // blurDataURL="data:..." は自動的に提供されます
      // placeholder="blur" // 読み込み中のオプションのぼかしアップ
    />
  )
}

リモート画像

リモート画像を使用するには、srcプロパティにURLの文字列を指定できます。

app/page.tsx

TypeScript

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="著者の写真"
      width={500}
      height={500}
    />
  )
}

Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、width、height、およびオプションのblurDataURLプロパティを手動で提供する必要があります。widthとheightは画像の正しいアスペクト比を推測し、画像読み込み時のレイアウトシフトを回避するために使用されます。または、fillプロパティを使用して、画像を親要素のサイズに合わせることもできます。

リモートサーバーからの画像を安全に許可するには、next.config.jsでサポートされているURLパターンのリストを定義する必要があります。悪意のある使用を防ぐために、できるだけ具体的にしてください。例えば、以下の設定は特定のAWS S3バケットからのみ画像を許可します：

next.config.ts

TypeScript

import type { NextConfig } from 'next'
 
const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}
 
export default config

画像の最適化

ローカル画像

リモート画像

APIリファレンス

Image コンポーネント