🥐

画像のドメインを `next.config.js` の images に設定されていないと出るエラー

に公開
Next.js
tech

はじめに

検証用にフリーの画像を表示させるように実装したら、エラーが出たので解消しました。

エラー内容

Unhandled Runtime Error

Error: Invalid src prop (https://example.com) on `next/image`, hostname 'www.comfortzone.com' is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Array.map
<anonymous> (0:0)
Show ignored frames

訳しました。

未処理のランタイムエラー

エラー無効な src プロパティ (https://example.com) on `next/image`, ホスト名 'www.comfortzone.com' が `next.config.js` の images に設定されていません。
詳細はこちら: https://nextjs.org/docs/messages/next-image-unconfigured-host

配列.マップ
<匿名> (0:0)
無視されたフレームを表示する

エラー解消

domainsに画像のドメインを設定したら解消しました。

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    domains: ['www.comfortzone.com'],//ここに画像のドメインを設定する
  },
}

export default nextConfig

実際のURL
'https://www.comfortzone.com/-/media/project/oneweb/comfortzone/images/blog/how-can-i-soothe-and-calm-my-cat.jpeg?h=717&iar=0&w=1000&hash=4B47BC0AD485430E429977C30A7A37DF',

www.comfortzone.comをドメインに設定します。

実際の画像

なぜ画像のドメインを設定する必要があるのか？

Next.jsのnext/imageコンポーネントは画像を最適化して表示してくれる非常に便利な仕組みですが、その最適化処理を安全かつ効率的に行うために、外部ドメインの画像を使う際は明示的に許可する必要があります。

Next.js の公式ドキュメントに記載されている内容を自分なりに解釈し、next/image の画像最適化がどういうもので、なぜドメインの指定が必要なのかをまとめました。
https://nextjs.org/docs/pages/building-your-application/optimizing/images

Next.jsの画像最適化

next/image コンポーネントは、画像の読み込み・表示を ユーザーにとって快適かつパフォーマンスよく行うための専用コンポーネントです。以下のような機能を通して、画像の表示を大きく最適化してくれます。

サイズ最適化

表示される画面サイズやデバイスに応じて、自動的に画像をリサイズしてくれます。大きすぎる画像をスマホで読み込んでしまうようなムダを防ぎ、読み込みを高速化します。

Automatically sizes images to the device’s screen size.

最新フォーマット

対応しているブラウザでは、自動的にWebPやAVIFなどのモダンなフォーマットで画像を配信してくれます。これにより、画質を保ちながらもファイルサイズを削減できます。

Serves modern formats like WebP and AVIF when the browser supports them.

レスポンシブ対応

画像のsrcSetやsizes属性を自動で生成してくれるため、開発者がレスポンシブ画像に関する複雑な設定をしなくても、適切なサイズの画像が自動で選ばれます。

Automatically sets the srcSet and sizes attributes.

Lazy Loading

Lazy Loadingとは、「必要になるまで読み込まない」仕組みのことです。
デフォルトで画像の遅延読み込みが有効になっており、まだ画面に表示されていない画像の読み込みを後回しにすることで、ページの初期表示速度が向上します。

By default, next/image uses lazy loading.

CDN活用

画像は Next.js（特にVercel上）で自動的に最適化＆CDN配信されるため、世界中のユーザーに対して高速で安定した画像表示が可能になります。

When deployed on Vercel, images are served from the Vercel Edge Network.

セキュリティとパフォーマンスの観点

上記のような強力な最適化を Next.js 側で行うために、外部画像の読み込み元を制限する必要があります。許可されていないドメインから画像を読み込もうとすると、Next.js は安全性と最適化の観点からブロックします。

これは、例えば以下のようなリスクや課題を避けるためです

  • 悪意のある画像やトラッキング画像の読み込み
  • キャッシュできない画像によるパフォーマンス劣化
  • インターネットの通信に使われるデータ量（通信量）をムダに使ってしまう

そのため、許可するドメインを設定する必要があります。

さいごに

Next.js の画像最適化は、ただ画像を表示するだけでなく、ユーザー体験・表示速度・セキュリティまでしっかり考えられた仕組みでした。
次回から外部画像を扱う際は、今回のようにドメイン設定を忘れずに行いたいと思います。

Discussion