# Next.js の Image コンポーネント

Next.js プロジェクトでは、標準の HTML <img> 要素から <Image> コンポーネントに切り替えることが推奨されています。

Using <img> could result in slower LCP and higher bandwidth. Consider using <Image> from next/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

画像の読み込み時に発生してしまう Cumulative Layout Shift (CLS) を防ぐために、あらかじめ Width と Height を指定し画像が表示される領域を確保しておく必要があります。

# なぜ next/image の Image コンポーネントを使う

画像の読み込みを最適化し、パフォーマンスを向上させることができるメリット

自動画像最適化
画像が自動的に最適化され、ユーザーに対して高速に読み込む
レスポンシブ画像
異なる画面サイズに適応するように画像が自動的に調整
Lazy Loading 対応
遅延読み込みで初期読み込み時間が短縮され、ページのパフォーマンスが向上
レイアウトシフトの防止
画像の幅と高さを指定することで、レイアウトシフトを防ぎ、ページの安定性を向上
最新の画像フォーマット
WebP などの最新の画像フォーマットをサポートし、画像サイズを小さく保つ
外部画像のドメインチェックと最適化
next.config.jsに外部ドメインを指定することで、外部画像も最適化
優先度の設定、レスポンシブ対応
priority や layout プロパティを使用して、読み込み優先度とレスポンシブ対応設定ができる ï

# Next.js の Image コンポーネント使用例

import Image from "next/image";

<Image
  src="/path/to/image.jpg"
  alt="画像の説明"
  width={800} // 幅をピクセル単位で指定
  height={600} // 高さをピクセル単位で指定
  layout="responsive" // レスポンシブレイアウトを指定
  placeholder="blur" // ぼかし効果をプレースホルダーとして使用
  quality={75} // 画像の品質を指定（0-100）
/>;

# Error: Invalid src prop

Error: Invalid src prop (https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600) on next/image, hostname "tailwindui.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

以下のコードは、Tailwind のロゴを読み込む際にエラーが発生します。

<Image
  className="h-8 w-auto"
  src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
  alt=""
  width={32}
  height={32}
/>
</a>

原因

Next.js の<Image>コンポーネントで外部ドメインから画像を読み込む際に、そのドメインが next.config.js に設定されていないためです。

解決方法

next.config.js ファイルに外部ドメインを設定

// next.config.js
module.exports = {
  images: {
    domains: ["tailwindui.com"],
  },
};

詳細な remotePatterns 設定

必要に応じて、remotePatterns を使用して細かく設定できます。

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**.hapicode.com",
        port: "",
      },
    ],
  },
};

# 参考

2024-07-04 4ヶ月前

nextjs