Fix Next.js Invalid Image src Prop: Root Causes and Minimal Checks

Quick Answer

• Conclusion: The "Invalid src prop" error occurs when next/image tries to load an external image from a hostname not listed in your Next.js configuration. The fix is to add the domain to images.domains (Next.js 10–12) or images.remotePatterns (Next.js 13+).
• First checks: Verify the image URL is publicly accessible and returns a valid image file (not HTML). Confirm you're using the correct Next.js version to choose between domains and remotePatterns.
• Minimal fix: Add the external domain to next.config.js and restart your dev server. For example: images: { domains: ['example.com'] }.
• Environment boundary: This applies to all Next.js projects using next/image with external image sources. Next.js 13+ deprecates domains in favor of remotePatterns.

What Problem It Solves

Next.js provides built-in image optimization through the next/image component, which automatically resizes, optimizes, and serves images in modern formats. However, for security and performance reasons, Next.js blocks external image sources by default. When you try to load an image from a domain not explicitly allowed, you get the "Invalid src prop" error.

This configuration fix enables your Next.js application to safely load and optimize images from trusted external sources like CDNs, third-party APIs, or user-generated content platforms.

When This Error or Setup Appears

You'll encounter this error in any scenario where next/image loads images from external domains:

• E-commerce sites displaying product images from Shopify, Amazon S3, or other third-party providers
• Social media platforms showing user-uploaded avatars or media from Cloudinary, Imgix
• Content management systems rendering images from external CDNs
• Any project integrating with image services like Unsplash, Pexels, or custom image APIs

The error typically appears during development or build time with a message like:

Error: Invalid src prop (...) on <next/image>, hostname "example.com" is not configured under images in your next.config.js

Minimal Working Configuration

For Next.js 10–12 (using domains)

Create or modify next.config.js in your project root:

JAVASCRIPT
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: [
      'example.com',
      'images.unsplash.com',
      'cdn.shopify.com',
    ],
  },
}

module.exports = nextConfig

For Next.js 13+ (using remotePatterns)

JAVASCRIPT
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
}

module.exports = nextConfig

After modifying next.config.js, restart your development server:

BASH
npm run dev
# or
yarn dev
# or
pnpm dev

Root Cause Analysis

The error occurs because Next.js's image optimization pipeline performs server-side requests to fetch and optimize images. Without explicit domain configuration, Next.js would be vulnerable to:

1. SSRF (Server-Side Request Forgery): An attacker could trick the server into making requests to internal services
2. Resource abuse: Uncontrolled external image loading could exhaust server resources
3. Security bypass: Malicious domains could serve harmful content through the optimization pipeline

By requiring explicit domain configuration, Next.js ensures you've vetted all external image sources.

Common Errors and Fixes

Additional Fixes for Dynamic Domains

For user-generated content where domains are unpredictable:

1. Proxy server approach: Create an API route that proxies image requests, making all images appear from your own domain
2. remotePatterns with wildcards: Use pattern matching to allow broader domain patterns
3. unoptimized prop: Skip optimization for specific images by adding unoptimized to the <Image> component
4. Third-party image service: Route all images through a service like Cloudinary or Imgix

Production Notes and Security Checks

• Static domain lists: domains and remotePatterns are static and require redeployment to change. For frequently changing domains, use a proxy approach.
• HTTPS enforcement: Always use protocol: 'https' in remotePatterns to prevent man-in-the-middle attacks
• Server load: Image optimization increases CPU usage. Use CDN caching to reduce server strain.
• Version awareness: Next.js 13+ deprecates domains. Migrate to remotePatterns for future compatibility.
• Configuration security: Ensure next.config.js has proper file permissions to prevent unauthorized modifications
• Install sharp: For production builds, install the sharp package for optimal image processing:

  BASH
  npm install sharp
  

FAQ

Q: Why does Next.js require explicit external image domain configuration? Doesn't this slow down development?

A: Next.js requires this configuration primarily for security (preventing SSRF attacks) and performance (ensuring optimization resources target only trusted sources). While it adds an initial setup step, it significantly improves application security. To maintain development speed, configure all expected domains at project initialization or use remotePatterns with pattern matching to reduce maintenance overhead.

Q: If my images come from dynamic user input (like user avatar URLs), how do I handle unpredictable domains?

A: For dynamic user input, several approaches work: 1) Create a proxy API route that fetches images from any domain, making all requests appear from your own domain; 2) Use remotePatterns with flexible pattern matching (Next.js 13+); 3) Set unoptimized on the <Image> component to skip optimization; 4) Route all images through a third-party image service that provides unified URLs. The proxy approach is recommended as it maintains security while handling dynamic domains.

Q: I configured images.domains but images still won't load. What am I missing?

A: Common reasons include: 1) You haven't restarted the dev server after modifying next.config.js; 2) The domain format is incorrect (use root domain only, e.g., example.com without protocol or path); 3) Browser or Next.js caching is serving old configuration (try incognito mode or clear cache); 4) The image URL itself is invalid or requires authentication; 5) You're using Next.js 13+ where domains is deprecated—use remotePatterns instead. Check the browser console for the specific error message to diagnose further.