Next.jsで別ドメインの画像ファイルを表示させる方法

Nextjsで実装していたときに、

画像の表示において、

  • 別ドメインの画像URLを表示させる

ということを、

構築しているシステムで試そうとした。

画像管理はバックエンドのシステムの方で行うので、

それを表示させたいという点で、

ドメインをサブドメインで切り分けていたので、

その点でうまく表示されない事象が起きた。

今回は、

上記で行いたかったことに関して、

試したことや起きた事象など、

備忘録としてこの記事に残します。

公式サイトの情報

公式サイトで、

Next.jsに関する情報は確認。

画像表示の基本

画像表示については、

<Image>

のタグを使って、

import Image from 'next/image';
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  );
}

という形で、

画像表示を行いました。

こちらの画像表示については、

以下の公式サイトも確認。

別ドメインの画像表示を試すとエラー

上記の画像表示を使用して、

別ドメインで試したところ、

Unhandled Runtime Error
Error: Invalid src prop (https://sample.com/xxxxx.png) on `next/image`, 
hostname "sample.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

上記のエラーが発生した。

エラー内容の中に、

以下を確認するように記載があるので、

こちらも確認してもらうと良いですね。

別ドメインの画像表示のための設定

上記の別ドメインの画像表示のエラーの対応方法として、

next.jsの設定ファイルに対して、

ドメインを設定する必要があります。

調整ファイル

next.config.js

調整内容

const nextConfig = {
  images: {
    domains: ['sample.com'],
  },
}

このように、

設定ファイルの中に、

画像用のドメインを設定する必要があります。

こちらを調整した後に、

再コンパイルすると、

うまく別ドメインの画像が表示されました。

ピックアップ

こちらもおすすめ

初心者向けの色々な情報はあるけれど、

  • 無料でお試しができるスクール
  • ホームページなど簡単に作成できる
  • 組織で使いたいサービス

について、

少しでも試して良いものがあると、

それを活用することで学習や業務などが効率化できるので、

おすすめのサイトなどをいくつか紹介しておきます

おすすめ書籍

スポンサー

人気記事

おすすめ記事