【Next.js】Imageコンポーネント完全ガイド – 使い方・最適化・エラー解決

はじめに

こんにちは、優也@月収100万を目指して月100時間勉強する男です。

Next.js Imageコンポーネントは、Next.jsで画像を最適化するための必須機能です。通常の<img>タグではなくNext.js Imageを使うことで、自動的に画像が最適化され、ページの表示速度が大幅に向上します。

しかし、「なぜNext.js Imageを使うのか?」「どう使えばいいのか?」と疑問に思う方も多いはずです。

この記事では、Next.js Imageについて、基本的な使い方からよくあるエラーの解決方法まで、初心者向けに丁寧に解説します。

Next.js Imageコンポーネントとは?

next/imageは、Next.jsが提供する画像最適化コンポーネントです。

詳しくはNext.js公式ドキュメント – Image Optimizationをご覧ください。

従来のimgタグとNext.js Imageの違い

CLSとは?

CLS (Cumulative Layout Shift) は、ページ読み込み中のレイアウトのズレを測る指標です。

画像のサイズが未指定だと、読み込み時にガクッとレイアウトがずれて、ユーザー体験が悪化します。Next.js ImageはWidth/Heightの指定でこれを自動的に防ぎます。

詳しくはGoogle Web Vitalsを参照してください。

Next.js Imageの基本的な使い方

ローカル画像の表示

プロジェクト内の画像を表示する方法です。

import Image from 'next/image';
import logo from '/public/logo.png';

export default function Home() {
  return (
    <div>
      <Image
        src={logo}
        alt="Next.js Imageでロゴを表示"
      />
    </div>
  );
}

import Image from 'next/image';
import logo from '/public/logo.png';

export default function Home() {
  return (
    <div>
      <Image
        src={logo}
        alt="Next.js Imageでロゴを表示"
      />
    </div>
  );
}

上記のコードのポイントは以下の通りです:

• importで画像を読み込む
• widthとheightは自動で設定される
• alt属性は必須(アクセシビリティ)

外部画像の表示

インターネット上の画像を表示する場合は、widthとheightの指定が必須です。

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <Image
        src="https://example.com/photo.jpg"
        alt="Next.js Imageで外部画像を表示"
        width={800}
        height={600}
      />
    </div>
  );
}

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <Image
        src="https://example.com/photo.jpg"
        alt="Next.js Imageで外部画像を表示"
        width={800}
        height={600}
      />
    </div>
  );
}

外部画像を使う場合の注意点:

• 外部画像はnext.config.jsでの設定が必要
• 詳しくは 【Next.js】外部画像を表示する方法 で解説

publicフォルダの画像

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <Image
        src="/images/hero.jpg"
        alt="Next.js Imageでヒーロー画像を表示"
        width={1200}
        height={600}
      />
    </div>
  );
}

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <Image
        src="/images/hero.jpg"
        alt="Next.js Imageでヒーロー画像を表示"
        width={1200}
        height={600}
      />
    </div>
  );
}

publicフォルダ内の画像は/から始まるパスで指定します。

よくあるエラーと解決方法

エラー1: width and height required

以下のようなエラーが表示される場合があります:

Error: Image with src “…” must use “width” and “height” properties

このエラーが発生する原因は、外部画像やpublicフォルダの画像でwidth/heightが未指定であることです。

解決方法として、以下のようにwidth/heightを追加してください:

<Image
  src="/photo.jpg"
  alt="写真"
  width={800}
  height={600}
/>

<Image
  src="/photo.jpg"
  alt="写真"
  width={800}
  height={600}
/>

エラー2: Invalid src prop

以下のようなエラーが表示される場合があります:

Error: Invalid src prop (…) on next/image

このエラーが発生する原因は以下の2つです:

• パス指定が間違っている
• 外部画像のホストが未登録

解決方法:

1. パスを確認(/から始まるか)
2. 外部画像ならnext.config.jsを設定

詳しくは 【Next.js】画像が表示されない原因と解決方法 で解説しています。

エラー3: Hostname not configured

以下のようなエラーが表示される場合があります:

Error: Invalid src prop. Hostname “example.com” is not configured

このエラーが発生する原因は、外部画像のホストがnext.config.jsに未登録であることです。

解決方法については 【Next.js】外部画像を表示する方法 を参照してください。

Next.js Imageの便利なプロパティ

fill属性

親要素いっぱいに画像を表示できます。

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/hero.jpg"
    alt="ヒーロー画像"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/hero.jpg"
    alt="ヒーロー画像"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

fill属性を使う際の注意点:

• 親要素にposition: relativeが必要
• widthとheightは不要

priority属性

ファーストビューの画像に指定すると、優先的に読み込まれます。

<Image
  src="/hero.jpg"
  alt="ヒーロー画像"
  width={1200}
  height={600}
  priority
/>

<Image
  src="/hero.jpg"
  alt="ヒーロー画像"
  width={1200}
  height={600}
  priority
/>

priority属性を使うべき場面:

• ヒーロー画像
• ロゴ
• ファーストビューの重要な画像

quality属性

画質を調整できます(1-100、デフォルト75)。

<Image
  src="/photo.jpg"
  alt="写真"
  width={800}
  height={600}
  quality={90}
/>

<Image
  src="/photo.jpg"
  alt="写真"
  width={800}
  height={600}
  quality={90}
/>

placeholder属性

画像読み込み中にぼかしを表示できます。

<Image
  src="/photo.jpg"
  alt="写真"
  width={800}
  height={600}
  placeholder="blur"
/>

<Image
  src="/photo.jpg"
  alt="写真"
  width={800}
  height={600}
  placeholder="blur"
/>

まとめ

Next.js Imageについて解説しました。

重要ポイント:

• <img>ではなくNext.js Imageを使う
• 外部画像はwidthとheightが必須
• 外部画像はnext.config.jsで設定
• CLSを自動的に防げる
• 画像が自動で最適化される

Next.js Imageのメリット:

• 自動最適化
• 遅延読み込み
• レスポンシブ対応
• CLS防止

Next.jsで画像を扱う際は、必ずNext.js Imageを使いましょう!

関連記事:

• 【Next.js】画像が表示されない原因と解決方法5選
• 【Next.js】外部画像を表示する方法 – next.config.js設定完全版
• 【2025年版】Next.jsで始めるReact開発環境の構築方法