2026.01.16 2026.02.10

Next.js 外部画像を表示する方法 – next.config.js設定完全版

yuya_react

はじめに

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

Next.js 外部画像を表示しようとして「Hostname not configured」エラーが出た経験はありませんか?

Next.js 外部画像を使うには、next.config.jsでの設定が必須です。私も最初はこの設定でつまずき、何度もエラーと格闘しました。

この記事では、Next.js 外部画像の表示方法とnext.config.jsの設定を初心者向けに解説します。Unsplash、Cloudinary、S3などよく使う画像ホストの設定例も紹介するので、この記事を読めばNext.js 外部画像を確実に表示できます。

Next.js 外部画像とは?

Next.js 外部画像とは、インターネット上の別のサーバーにある画像のことです。

外部画像の例:

Unsplashの画像: https://images.unsplash.com/photo-...
自社のCDN: https://cdn.example.com/images/...
AWS S3: https://s3.amazonaws.com/...
Cloudinary: https://res.cloudinary.com/...

これらのNext.js 外部画像を使うには、セキュリティ上の理由からnext.config.jsでの許可が必要です。

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

Next.js 外部画像でエラーが出る理由

Next.js 外部画像を使おうとすると、以下のエラーが表示されます:

Error: Invalid src prop. Hostname “example.com” is not configured under images in your next.config.js

このエラーは、Next.jsが未登録のホストからの画像読み込みをブロックしているために発生します。

セキュリティ対策として、next.config.jsに明示的に許可したホストのみ、Next.js 外部画像として読み込めます。

next.config.jsの基本設定

Next.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;

設定の説明

protocol: 'https'または'http'を指定
hostname: 画像のドメイン名(プロトコル不要)
port: ポート番号(通常は省略)
pathname: パスパターン(通常は'/**')

開発サーバーの再起動

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

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

再起動しないと設定が反映されません。

よく使う画像ホストの設定例

Next.js 外部画像でよく使われる画像ホストの設定例を紹介します。

Unsplashの設定

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

module.exports = nextConfig;

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

module.exports = nextConfig;

使い方:

<Image
  src="https://images.unsplash.com/photo-1234567890"
  alt="Unsplashの外部画像"
  width={800}
  height={600}
/>

<Image
  src="https://images.unsplash.com/photo-1234567890"
  alt="Unsplashの外部画像"
  width={800}
  height={600}
/>

Cloudinaryの設定

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

module.exports = nextConfig;

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

module.exports = nextConfig;

AWS S3の設定

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-bucket.s3.amazonaws.com',
      },
    ],
  },
};

module.exports = nextConfig;

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-bucket.s3.amazonaws.com',
      },
    ],
  },
};

module.exports = nextConfig;

your-bucketの部分は実際のバケット名に変更してください。

複数のホストを登録する

Next.js 外部画像を複数のホストから使う場合:

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

module.exports = nextConfig;

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

module.exports = nextConfig;

カンマで区切って複数のホストを登録できます。

パスパターンで制限をかける

特定のパスのみ許可することもできます。

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

module.exports = nextConfig;

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

module.exports = nextConfig;

この設定ではhttps://example.com/images/配下の画像のみ許可されます。

パスパターンの例:

'/images/**': /images/配下すべて
'/photos/*.jpg': /photos/直下のJPGのみ
'/**': すべてのパス(デフォルト)

旧形式(domains)からの移行

Next.js 12以前で使われていたdomains形式から、新しいremotePatterns形式への移行方法です。

旧形式(非推奨)

const nextConfig = {
  images: {
    domains: ['example.com', 'images.unsplash.com'],
  },
};

const nextConfig = {
  images: {
    domains: ['example.com', 'images.unsplash.com'],
  },
};

新形式(推奨)

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

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

remotePatternsの方がセキュリティが高く、柔軟な設定ができるため推奨されています。

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

エラー1: 設定したのに表示されない

原因: 開発サーバーを再起動していない

解決方法: Ctrl + Cでサーバーを停止し、npm run devで再起動してください。

エラー2: ホスト名が間違っている

原因: プロトコル(https://)を含めてしまっている

間違い:

hostname: 'https://example.com',

hostname: 'https://example.com',

正しい:

hostname: 'example.com',

hostname: 'example.com',

エラー3: 複数ホストで一部だけ表示されない

原因: カンマ忘れやJSON構文エラー

解決方法: 各オブジェクトの間にカンマがあるか確認してください。

まとめ

Next.js 外部画像の表示方法とnext.config.jsの設定について解説しました。

重要ポイント:

Next.js 外部画像はnext.config.jsで許可が必要
remotePatternsで詳細に設定できる
設定後は必ず開発サーバーを再起動
複数のホストを登録可能
domains形式よりremotePatternsが推奨

設定手順:

next.config.jsを開く
remotePatternsを追加
開発サーバーを再起動
Next.js 外部画像を表示

この設定をすれば、UnsplashやCloudinaryなどのNext.js 外部画像を自由に使えます。

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

関連記事:

外部参考リンク:

ABOUT ME