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上記のエラーが発生した。
エラー内容の中に、
以下を確認するように記載があるので、
こちらも確認してもらうと良いですね。
https://nextjs.org/docs/messages/next-image-unconfigured-host
別ドメインの画像表示のための設定
上記の別ドメインの画像表示のエラーの対応方法として、
next.jsの設定ファイルに対して、
ドメインを設定する必要があります。
調整ファイル
next.config.js調整内容
const nextConfig = {
images: {
domains: ['sample.com'],
},
}このように、
設定ファイルの中に、
画像用のドメインを設定する必要があります。
こちらを調整した後に、
再コンパイルすると、
うまく別ドメインの画像が表示されました。
ピックアップ
こちらもおすすめ
初心者向けの色々な情報はあるけれど、
- 無料でお試しができるスクール
- ホームページなど簡単に作成できる
- 組織で使いたいサービス
について、
少しでも試して良いものがあると、
それを活用することで学習や業務などが効率化できるので、
おすすめのサイトなどをいくつか紹介しておきます
