DEV Community

Cover image for Allow All Domains for Images in Next.js
Joodi
Joodi

Posted on โ€ข Edited on

2 1 1 1 1

Allow All Domains for Images in Next.js

In Next.js, loading images from external domains requires configuration in next.config.js. You can allow images from all domains either by using remotePatterns with a wildcard or by disabling image optimization entirely with unoptimized.

๐Ÿ‘‰ If youโ€™re dealing with an external image provider, you might run into these cases, so pick the right one based on your needs. ๐Ÿš€

Image description


Method 1: Using remotePatterns (Updated) โœ…

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*", // Allow images from all domains
      },
    ],
  },
};

export default nextConfig;
Enter fullscreen mode Exit fullscreen mode

Method 2: Using unoptimized

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    unoptimized: true, // Disable image optimization
  },
};

export default nextConfig;
Enter fullscreen mode Exit fullscreen mode

When to Use:

  • remotePatterns: When you want optimized images and flexibility.
  • unoptimized: When you need images from any domain without optimization.

This approach helps in handling dynamic image sources and bypassing domain restrictions. ๐Ÿ”ฅ

โ— Update: Big thanks to Ajit Kumar for pointing out an important detail in the comments. He mentioned that using "*" as a wildcard for hostname in remotePatterns is not allowed due to security reasons. Iโ€™ve updated the post to reflect the correct configuration to stay up-to-date with Next.js best practices. ๐Ÿ™Œ

Let's Connect ๐ŸŒ

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (3)

Collapse
 
ajitkumar profile image
Ajit Kumar โ€ข โ€ข Edited

Does it remotepatterns still valid in new version of Nextjs? I was seeing some options like domains have depreciated in latest release.

I think, remotepatterns is replacement of domains in nextjs 15. Thanks. I will explore it further.

Collapse
 
ajitkumar profile image
Ajit Kumar โ€ข

I think, wildcard "" is not allowed due to security risk.
Error: Invalid images.remotePatterns configuration:
Pattern hostname "
" is not allowed.

Collapse
 
joodi profile image
Joodi โ€ข

Hey Ajit Kumar! ๐Ÿ‘‹

Thanks for pointing that out! You were totally right about the "*" wildcard. Iโ€™ve updated the post now. Appreciate it! ๐Ÿ™Œ

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay