Fix: Invalid src prop on next/image (Hostname not configured)

The Symptom

You attempted to render an image dynamically using the Next.js <Image /> component where the src is an absolute external URL (like an AWS S3 bucket, a Supabase storage URL, or a Google user profile picture). The application instantly crashes with this unhandled runtime error:

Unhandled Runtime Error
Error: Invalid src prop (https://images.unsplash.com/photo-123) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

The Cure

To protect your server from being used to maliciously proxy and optimize dangerous images, Next.js strictly requires you to manually whitelist every external domain you intend to serve images from. You must update your configuration file.

Immediate Resolution:

Open your next.config.js or next.config.mjs file in your project root and add the domain to the remotePatterns array.

javascript (next.config.js) 
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com', // Replace with your target domain
        port: '',
        pathname: '/**', // Allows any path under this domain
      },
      // You can add multiple domains to this array
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com', // Required for Google Auth Avatars
      }
    ],
  },
};

module.exports = nextConfig;

The Breakdown

When you use the standard HTML <img> tag, the user's browser requests the image directly from the external server. However, the Next.js <Image> component works differently.

Next.js intercepts the request, downloads the external image to your own server (or Edge network), dynamically resizes it, converts it to modern formats like WebP or AVIF, and then serves it to the user. This is fantastic for performance and Core Web Vitals.

Because your server is acting as a proxy and doing heavy computational work to convert these images, malicious actors could theoretically pass a massive 500MB image URL into your src tag to intentionally overload and crash your Vercel server (a Denial of Wallet attack). remotePatterns is a strict security boundary ensuring your server only optimizes images from your trusted databases and CDNs.

Important Note: Restart Your Server

Changes made to next.config.js are not detected by Next.js's Hot Module Replacement (HMR). After adding the domains, you must physically stop your local development server (CTRL + C) and restart it (npm run dev) for the whitelist to take effect.

Developer Logs

Loading logs...