Next.js Image 表示されない原因と解決方法5選【エラー完全対応】

はじめに

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

Next.js Imageを使っていて「画像が表示されない!」と困った経験はありませんか?

Next.js Imageは便利な機能ですが、設定ミスやコードの書き方によって画像が表示されないエラーが頻発します。私も最初は何度もエラーに悩まされました。

この記事では、Next.js Imageで画像が表示されない原因を5つのパターンに分けて解説します。それぞれの原因と具体的な解決方法を紹介するので、この記事を読めばエラーを確実に解決できます。

Next.js Imageで画像が表示されない5つの原因

Next.js Imageで画像が表示されない原因は、主に以下の5つです:

1. width/heightが未指定
2. パスの指定ミス
3. 外部画像のホスト未登録
4. next.config.jsの設定ミス
5. ファイル名や拡張子の問題

それぞれ詳しく見ていきましょう。

原因1: width/heightが未指定

エラー内容

以下のようなエラーが表示されます:

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

発生する原因

Next.js Imageで外部画像やpublicフォルダの画像を使う場合、必ずwidthとheightの指定が必要です。

解決方法

以下のようにwidthとheightを追加してください:

<Image
  src="/images/photo.jpg"
  alt="Next.js Imageで画像表示"
  width={800}
  height={600}
/>

<Image
  src="/images/photo.jpg"
  alt="Next.js Imageで画像表示"
  width={800}
  height={600}
/>

注意点:

• ローカル画像(importで読み込んだ画像)は自動設定されるため不要
• 外部画像とpublicフォルダの画像は必須

原因2: パスの指定ミス

エラー内容

以下のようなエラーが表示されます:

Error: Invalid src prop on next/image

発生する原因

画像のパス指定が間違っている場合に発生します。

よくある間違い:

• src="images/photo.jpg" (スラッシュ忘れ)
• src="../public/images/photo.jpg" (相対パス)
• src="./images/photo.jpg" (相対パス)

解決方法

publicフォルダの画像は、必ず/から始めてください:

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

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

正しいパス指定:

• publicフォルダの画像: /images/photo.jpg
• 外部画像: https://example.com/photo.jpg
• ローカル画像: importで読み込む

原因3: 外部画像のホスト未登録

エラー内容

以下のようなエラーが表示されます:

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

発生する原因

Next.js Imageで外部画像を使う場合、next.config.jsにホスト名を登録する必要があります。

セキュリティ上の理由から、登録されていないホストの画像は読み込めません。

解決方法

next.config.jsに以下の設定を追加してください:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
};

module.exports = nextConfig;

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
};

module.exports = nextConfig;

複数のホストを登録する場合:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
};

module.exports = nextConfig;

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
};

module.exports = nextConfig;

詳しい設定方法は 【Next.js】外部画像を表示する方法 で解説しています。

原因4: next.config.jsの設定ミス

発生する原因

next.config.jsの記述に誤りがある場合、Next.js Imageが正しく動作しません。

よくある間違い:

• カンマ忘れ
• 閉じ括弧忘れ
• protocolのスペルミス(httpsをhttpにしてしまう)

解決方法

以下の正しい構文を確認してください:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

確認ポイント:

• protocolは'https'または'http'
• hostnameにプロトコル(https://)は不要
• 各プロパティの後ろにカンマ
• 設定変更後は開発サーバーの再起動が必要

開発サーバーの再起動

設定を変更したら、必ず開発サーバーを再起動してください:

1. ターミナルでCtrl + C
2. npm run devで再起動

原因5: ファイル名や拡張子の問題

発生する原因

以下のような場合に画像が表示されません:

• ファイル名のスペル間違い
• 大文字小文字の違い(Photo.jpg vs photo.jpg)
• サポートされていない拡張子

解決方法

ファイル名を確認:

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

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

• ファイル名: photo.jpg
• 実際のファイル: Photo.jpg → エラー

大文字小文字を正確に合わせてください。

サポートされている画像形式:

• JPEG (.jpg, .jpeg)
• PNG (.png)
• WebP (.webp)
• AVIF (.avif)
• GIF (.gif)
• SVG (.svg)

エラーの確認方法

Next.js Imageでエラーが発生した場合、以下を確認してください:

1. ブラウザのコンソールを開く
   • Chrome: F12 → Console
   • 赤いエラーメッセージを確認
2. 開発サーバーのターミナルを確認
   • エラーメッセージが表示されている
3. Network タブで確認
   • F12 → Network
   • 画像ファイルが404エラーになっていないか

よくある質問

Q1: ローカル画像はどう指定すればいい?

A: importで読み込んでください:

import photo from '/public/images/photo.jpg';

<Image
  src={photo}
  alt="写真"
/>

import photo from '/public/images/photo.jpg';

<Image
  src={photo}
  alt="写真"
/>

Q2: 画像が表示されるまで時間がかかる

A: priority属性を追加してください:

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

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

Q3: SVG画像が表示されない

A: SVGはunoptimized属性が必要な場合があります:

<Image
  src="/logo.svg"
  alt="ロゴ"
  width={200}
  height={100}
  unoptimized
/>

<Image
  src="/logo.svg"
  alt="ロゴ"
  width={200}
  height={100}
  unoptimized
/>

まとめ

Next.js Imageで画像が表示されない原因と解決方法を5つ紹介しました。

5つの原因まとめ:

1. width/heightが未指定 → 追加する
2. パスの指定ミス → /から始める
3. 外部画像のホスト未登録 → next.config.jsに追加
4. next.config.jsの設定ミス → 構文を確認
5. ファイル名や拡張子の問題 → 正確に指定

エラー解決の手順:

1. エラーメッセージを確認
2. 上記5つの原因をチェック
3. 該当する解決方法を実行
4. 開発サーバーを再起動

Next.js Imageを正しく使えば、画像の最適化とパフォーマンス向上が実現できます。この記事を参考に、エラーを確実に解決しましょう!

基本的な使い方については 【Next.js】Imageコンポーネント完全ガイド をご覧ください。

関連記事:

• 【Next.js】Imageコンポーネント完全ガイド
• 【Next.js】外部画像を表示する方法 – next.config.js設定完全版
• 【2025年版】Next.jsで始めるReact開発環境の構築方法

外部参考リンク:

• Next.js公式ドキュメント – Image Component
• Next.js公式 – remotePatterns設定