はじめに

Next.js には組み込みの画像最適化機能を提供する next/image コンポーネントがあります。
これを利用することで、
自動的な画像の最適化 や レスポンシブ対応、遅延読み込み（lazy loading） などが可能になります。

本記事では、Next.js 14 の App Router における next/image の基本的な使い方や設定について詳しく解説します。

1. next/image の特徴

next/image を使うことで、以下のようなメリットがあります。

• ✅ 画像の最適化 → 自動的に WebP などの軽量フォーマットに変換
• ✅ レスポンシブ対応 → 画面サイズに応じた適切な画像を配信
• ✅ 遅延読み込み（lazy loading） → 初期ロードを高速化
• ✅ CDN キャッシュ → Vercel などの CDN に最適化された画像を配信
• ✅ 外部画像の対応 → さまざまな画像ソースに対応

2. next/image の基本的な使い方

🔹 ローカル画像を表示する

Next.js では、public/ フォルダ内の画像を next/image で表示できます。

JSX
import Image from "next/image";
import exampleImage from "../public/example.jpg";

export default function Home() {
  return (
    <div>
      <h1>ローカル画像の表示</h1>
      <Image src={exampleImage} alt="サンプル画像" width={500} height={300} />
    </div>
  );
}

✅ ポイント

• src にローカル画像のパスを指定
• width と height を明示的に設定する必要がある

🔹 外部画像を表示する

外部の画像（例: CDN や API から取得した画像）を next/image で表示するには、
next.config.js で domains を設定する必要があります。

1. next.config.js の設定

JAVASCRIPT
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "example.com",
      },
    ],
  },
};

2. コンポーネントでの使用

JSX
import Image from "next/image";

export default function ExternalImage() {
  return (
    <Image
      src="https://example.com/sample.jpg"
      alt="外部画像"
      width={500}
      height={300}
    />
  );
}

✅ ポイント

• 外部ドメインの画像を表示するために、next.config.js に remotePatterns を追加
• width と height を指定するのが基本

3. next/image の便利な機能

✅ fill を活用したレスポンシブ対応

Next.js 14 では layout="intrinsic" は廃止され、fill を使って親要素に合わせたレスポンシブな画像を表示できます。

JSX
import Image from "next/image";

export default function ResponsiveImage() {
  return (
    <div style={{ position: "relative", width: "100%", height: "300px" }}>
      <Image
        src="/example.jpg"
        alt="サンプル"
        fill
        style={{ objectFit: "contain" }}
      />
    </div>
  );
}

✅ ポイント

• fill を指定すると、画像が親要素のサイズにフィットする
• style={{ objectFit: "contain" }} を指定して、アスペクト比を維持
• div の position: relative が必要（fill は absolute になるため）

✅ プレースホルダーの設定

placeholder="blur" を使うと、画像の読み込み前に ぼかし効果 を表示できます。
ただし、外部画像を使用する場合は blurDataURL を手動で指定する必要があります。

JSX
<Image
  src="/example.jpg"
  alt="サンプル"
  width={500}
  height={300}
  placeholder="blur"
  blurDataURL="data:image/png;base64,...（省略）"
/>

✅ 高品質な画像を扱う際に便利

4. next/image の制限と注意点

❌ next/image は use client 内で使うと警告が出る

• next/image はデフォルトでサーバーコンポーネントとして動作するため、use client を指定したコンポーネント内では使用しないのが基本

❌ next.config.js で domains 設定を忘れるとエラーが発生

• 外部画像を扱う場合、設定が必須

5. まとめ

Next.js 14 の App Router における next/image は、画像を最適化しつつ効率的に配信できる便利なコンポーネントです。

📌 学んだこと

• next/image を使うと、画像が最適化され自動的に軽量化 される
• ローカル画像と外部画像の扱い方が異なる（next.config.js の設定が必要）
• レスポンシブ対応には fill を活用
• 制限として use client 内での使用に注意

これらの知識を活かして、Next.js の next/image を効果的に活用しましょう。