NextjsHow-ToBeginner · 3 min read

How to Configure Image Domains in Next.js for External Images

In Next.js, configure allowed external image domains by adding a images.domains array in the next.config.js file. This lets the next/image component optimize images from those domains securely.

📐

Syntax

To allow images from external domains, add the images.domains property inside the exported object in next.config.js. This property is an array of strings, each string being a domain name.

Example parts:

module.exports = { ... }: exports the config object.
images: { domains: [...] }: configures allowed image domains.
domains: ['example.com']: list of domains allowed to serve images.

javascript

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

💻

Example

This example shows how to configure Next.js to allow images from images.unsplash.com and use the next/image component to display an external image.

javascript

/* next.config.js */
module.exports = {
  images: {
    domains: ['images.unsplash.com'],
  },
};

// pages/index.js
import Image from 'next/image';

export default function Home() {
  return (
    <main>
      <h1>External Image Example</h1>
      <Image
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb"
        alt="Nature"
        width={600}
        height={400}
      />
    </main>
  );
}

Output

<h1>External Image Example</h1> and a 600x400 optimized image from images.unsplash.com displayed on the page.

⚠️

Common Pitfalls

Common mistakes when configuring image domains include:

Not adding the external domain to images.domains, causing Next.js to block the image.
Using full URLs instead of just domain names in the domains array.
Forgetting to restart the development server after changing next.config.js.

Always list only the domain (without protocol or path) and restart your server to apply changes.

javascript

/* Wrong way: full URL instead of domain */
module.exports = {
  images: {
    domains: ['https://images.unsplash.com/photo-123'], // ❌ Incorrect
  },
};

/* Right way: domain only */
module.exports = {
  images: {
    domains: ['images.unsplash.com'], // ✅ Correct
  },
};

📊

Quick Reference

Setting	Description	Example
images.domains	Array of allowed external image domains	['images.unsplash.com', 'example.com']
Restart server	Required to apply config changes	Stop and run `npm run dev` again
Use domain only	Do not include protocol or path	'images.unsplash.com' not 'https://images.unsplash.com/photo'
Use with next/image	Optimizes images from allowed domains

✅

Key Takeaways

Add external image domains in next.config.js under images.domains as an array of domain strings.

Only include domain names, no protocol or paths, in the domains array.

Restart the Next.js server after updating next.config.js to apply changes.

Use the next/image component to benefit from image optimization on allowed domains.

Incorrect domain configuration blocks images from loading and shows errors.