【Next.js】Imageで外部URLを使用するための設定

Imageで外部URLを使用するにはnext.config.jsに以下のように設定を記述する必要があります。

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}