next.config.js にドメイン追加し忘れで起きるエラー解説

Next.js で microCMS の画像を表示しようとしたらエラーになった件

参考図書

• 作って学ぶ Next.js/React Webサイト構築

参考図書の内容を学習中、microCMS のブログ記事に設定したアイキャッチ画像を Next.js の コンポーネントで表示しようとしたところ、以下のエラーが出ました。

↓発生したエラー
Server Error
Error: Invalid src prop (https://images.microcms-assets.io/assets/xxx/schedule.jpg) on next/image, hostname "images.microcms-assets.io" is not configured under images in your next.config.js

原因

Next.js の コンポーネントは、外部ドメインの画像を許可制にしています。

デフォルトでは public/ フォルダの画像しか利用できません。
そのため、microCMS の画像 CDN ドメイン (images.microcms-assets.io) が未設定だったことが原因でした。

解決方法

next.config.js に対象のドメインを追加します。

next.config.js

module.exports = {
  images: {
    domains: ["images.microcms-assets.io"], // ← 追加
  },
};

サーバー再起動が必要

next.config.js は ビルド時に読み込まれる設定ファイルです。
そのため、設定を変更しただけでは反映されません。

• 開発環境の場合

$ npm run dev

を一度止めて、再度実行する必要がありました。

• Docker を利用している場合

$ docker compose restart

または

$ docker compose up --build

で再起動が必要でした。

まとめ

• <Image> で外部ドメインの画像を使う場合は next.config.js に domains を追加する
• next.config.js 変更後は 必ずサーバー再起動が必要
• microCMS の場合は images.microcms-assets.io を追加すればOK