next/imageでmicrocmsのアイキャッチを取得したい

実現したいこと

microcmsのeyecatch画像をnext/imageを使用して取得をし表示をしたい

発生している問題・エラーメッセージ

Error: Invalid src prop (https://images.microcms-assets.io/assets/694bd8d438e745a3bc53d220286caab9/c10dd74e27034795b29f712257fab74e/blog-template.png) on `next/image`, hostname "images.microcms-assets.io" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

翻訳したところ
"images.microcms-assets.io" が構成されていませんnext.config.js の画像の下
とのことでしたが
検索等したのですが理解ができず躓いてしまっております。

該当のソースコード

<Image src={blog.eyecatch.url} width={312} height={163} alt="Sunset in the mountains"/>

試したこと

next.config.jsに以下のコードを追記

next.config.js
1const nextConfig = {
2  reactStrictMode: true,
3  swcMinify: true,
4
5　//↓のコードを追加
6  images:{
7    domains:['images.microcms-assets.io'],
8  },
9
10}
11module.exports = nextConfig