Error: Invalid src propのエラー解消

はじめに

Error: Invalid src propというエラーが出たので解消しました。

エラー内容

このエラーは、next/imageで外部ドメインの画像を表示するためにnext.config.jに images.domainsの設定が必要であることを示しています。

Unhandled Runtime Error

Error: Invalid src prop (https://www.comfortzone.com/-/media/project/oneweb/comfortzone/images/blog/how-can-i-soothe-and-calm-my-cat.jpeg?h=717&iar=0&w=1000&hash=4B47BC0AD485430E429977C30A7A37DF) on

next/image

, hostname "www.comfortzone.com" is not configured under images in your

next.config.js

See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Array.map
<anonymous> (0:0)
Show ignored frames

エラー解消

NextConfigにdomainsを設定したら解消しました。

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    domains: ['www.comfortzone.com'],//ここを追加
  },
}

export default nextConfig

これで解消しました🎉