How do you configure Next.js to allow optimizing images that are hosted on an external domain?

You add the external domain's hostname to the images configuration inside your next.config.js file, since Next.js only optimizes images from domains you explicitly trust, preventing it from being used to proxy and optimize arbitrary images from anywhere on the internet.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com' }
    ]
  }
};