Next.jsのnext/imageコンポーネントで外部ドメインの画像を表示する方法

事象

Next.js の next/image コンポーネントを使用して画像を表示する際、src 属性に外部ドメインのURLを指定するとエラーが発生することがあります。この記事では、そのようなエラーが発生した際の対処法を解説します。

原因

Next.js はデフォルトで、プロジェクトのドメインからの画像の読み込みのみを許可しています。これはセキュリティの観点から、不正なまたは危険なドメインからのリソースの読み込みを防ぐための措置です。

対処法

外部ドメインからの画像を読み込むためには、next.config.js ファイルにそのドメインを許可リストに追加する必要があります。以下のように images セクションに domains プロパティを追加し、許可するドメインをリストアップします。

next.config.js

module.exports = {
  images: {
    domains: [
      "example.com", // この部分を実際のドメイン名に置き換えてください
    ],
  },
};

この設定を行うことで、next/image コンポーネントの src 属性に指定した外部ドメインの画像が正常に表示されるようになります。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！