DEV Community

Joodi
Joodi

Posted on

2 1 1 1 1

The "images.domains" Configuration is Deprecated ๐Ÿž

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

Image description

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

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

Top comments (1)

Collapse
 
joodi profile image
Joodi โ€ข

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

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay