← 一覧へ
コードの書き間違い出る場所:ブラウザの画面・開発者ツールたまに出る

外の画像のアドレスが許可されていない(Next.js)

Error: Invalid src prop (https://images.example.com/a.jpg) on `next/image`, hostname "images.example.com" is not configured under images in your `next.config.js`

ひとことで言うと

「Next.js の画像部品で、まだ許可していないサイトの画像を表示しようとしました」という意味です。

よくある原因

  1. next.config の images の設定に、そのサイトを登録していない

自分で確かめること

たいていは、こうすると直ります

next.config の images.remotePatterns に、そのサイトを登録して、開発サーバーを起動し直します。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

【エラー】
Error: Invalid src prop (https://images.example.com/a.jpg) on `next/image`, hostname "images.example.com" is not configured under images in your `next.config.js`

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「外の画像のアドレスが許可されていない(Next.js)」というもので、よくある原因は次のとおりです。
・next.config の images の設定に、そのサイトを登録していない

どれに当てはまるかを確かめる方法も教えてください。