`next/image` Un-configured Host

Why This Error Occurred

One of your pages that leverages the next/image component, passed a src value that uses a hostname in the URL that isn't defined in the images.remotePatterns in next.config.js.

Possible Ways to Fix It

Add the protocol, hostname, port, and pathname to the images.remotePatterns config in next.config.js:

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

Fixing older versions of Next.js

Older versions of Next.js can configure images.remotePatterns using the object:

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

Older versions of Next.js can configure images.domains instead:

module.exports = {
  images: {
    domains: ['assets.example.com'],
  },
}

Useful Links

• Image Optimization Documentation
• Remote Patterns Documentation