Resolving the The "images.domains" Configuration is Deprecated Error in Next.js

Starting from Next.js version 12.3.0, the images.domains configuration has been deprecated. Instead, you should use the new images.remotePatterns configuration. This guide explains how to update your configuration to resolve this warning.

Current Configuration

If your current configuration looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // Disabling Strict Mode
  images: {
    domains: ["images.pexels.com"],
  },
};

export default nextConfig;

This configuration is now deprecated and may stop working in future releases.

Required Changes

To fix this, update your configuration to use images.remotePatterns. This new setting provides more granular control over external image sources.

Updated Configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // Disabling Strict Mode
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.pexels.com",
        pathname: "/**",
      },
    ],
  },
};

export default nextConfig;

Explanation of the New Configuration

• protocol: Specifies the protocol of the image source, e.g., https or http.
• hostname: Defines the domain from which images are allowed.
• pathname: Specifies the image path. Use / for the root path or /images/** for all subpaths.

Why This Change?

1. Enhanced Security: The new configuration allows you to restrict image loading to specific sources, paths, and protocols.
2. Greater Flexibility: You can define not just domains but also paths and protocols for external images.

Note

After making these changes, restart your project to apply the updated configuration.

Final next.config.js Output

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // Disabling Strict Mode
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.pexels.com",
        pathname: "/**",
      },
    ],
  },
};

export default nextConfig;

With these changes, the warning about images.domains will be resolved, and your project will be fully compatible with the latest versions of Next.js.