MicroCMSでアイキャッチ画像を　next/image で表示させたい

前提

私は初学者でReactとMicroCMSを使用してブログを制作したいと考えていますが
つまずいてしまいました...

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

Server Error
Error: Invalid src prop (https://images.microcms-assets.io/assets/edec805b08d749bd8ae58f916b7b0801/5f54f68a9f3e4a468231ba1b623e24e3/schedule.jpg) 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

該当のソースコード

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['images.microcms-assets.io'],
  },
}

試したこと

エラーを確認したところ、12.3.0以前は最初のコードが使用できるようなのですが
私が使っているバージョンは "next": "13.3.0"です。
そのため、下記のコードに書き直す必要があるのですが、何をどう書き換えていいのかわかりません。

const nextConfig = {
  reactStrictMode: true,
 images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

私が書き換えてみたコードは下記です

それぞれにどのような意味があるのかわからず、画像パスを参考に記入してみました。
これが何を表すのか、どのように書けばいいのか教えていただけると幸いです。

const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'microcms-assets.io',
        port: '',
        pathname: '/assets/',
      },
    ],
  },
}

補足情報

アイキャッチのURLは下記になります。

    "eyecatch": {
        "url": "https://images.microcms-assets.io/assets/edec805b08d749bd8ae58f916b7b0801/5f54f68a9f3e4a468231ba1b623e24e3/schedule.jpg",
        "height": 1280,
        "width": 1920
    },

よろしくお願いいたします

行動規範の内容に同意します

回答1件

以下ChatGPTによる回答です、参考ください！

images: remotePatternsは、Next.jsアプリケーションの構成ファイルであるnext.config.jsで使用されるオプションの1つで、画像コンポーネントの<Image>でリモート画像を取得するための正規表現の配列を指定するために使用されます。

例えば、次のように設定することができます。

js
1module.exports = {
2  images: {
3    domains: ['example.com'],
4    loader: 'default',
5    path: '/_next/image',
6    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
7    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
8    disableStaticImages: true,
9    minimumCacheTTL: 60,
10    // リモート画像のURLにマッチする正規表現パターンを指定する
11    remotePatterns: [
12      // 例: リモート画像URLがhttps://example.com/images/以下にある場合
13      /^https:\/\/example\.com\/images\//,
14    ],
15  },
16}