プログラミング

【Next.js】Unsplashの画像を使うときの設定

Next.jsのImageでUnsplashの画像が表示できない

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

このようにエラーが吐かれ、表示できません。

まだ初心者すぎてエラーを見るとドキがムネムネするんですが、メッセージ読んだら書いてありました。

ホスト名 "images.unsplash.com "がnext.config.jsのimages以下に設定されていません。

完全に理解した（理解した）。

next.config.jsの設定

上記の内容をもとに設定していきます。

設定をいじる前の状態が↓

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

ここに使用したいドメインを指定する必要がある、ということらしい。

追記した結果（赤字が追記部分）↓

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["images.unsplash.com"],
  },
};

module.exports = nextConfig;

"unsplash.com" を指定してもダメで、エラーメッセージ内にある "images.unsplash.com" を指定する必要があります。

設定が終わったら ctl+C でサーバーを止めて、再度 npm run dev で起動させます。

すると問題なく画像が表示されている…はず。

-プログラミング
-, ,