Next.jsで外部URLから画像を表示する。

公式ドキュメントにはこう書いています。

Use remotePatterns in your next.config.js file to allow images from specific external paths and block all others. This ensures that only external images from your account can be served.
外部のURLからimageを読み込む場合にはnext.configでremotePatternsを使用してくださいと。

next.config.tsで

module.exports = {
  images: {
    remotePatterns: [new URL('https://example.com/account123/**')],
  },
}

か

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

を使用することで外部から呼び出せる。