Configuring Next.js For External Image Loading
In Next.js, load external images by configuring next.config.js with remotePatterns or disabling image optimization with unoptimized. Choose between optimized flexibility and no optimization for dynamic image sources.
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 uno...