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.

Method 1: Using remotePatterns with Wildcard

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

Let's Connect 🌐

• Github
• Medium
• LinkedIn