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. 🚀

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;

Method 2: Using unoptimized

import type { NextConfig } from "next";

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

export default nextConfig;

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 🌐

• Github
• Medium
• LinkedIn