CODEWITHSUNDEEP
next.jscloudinary
vishwajeet
vishwajeet

Reputation: 353

The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead

I get the following warning in Next 14:

The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead.

My next.config.js has this

images: {
  domains: ['res.cloudinary.com'],
  remotePatterns: [
    {
      protocol: "https",
      hostname: "**",
    },
  ],
}

If I remove domains from there, I get error:

`next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`

Upvotes: 31

Views: 29188

Answers (6)

yabibal eshetie
yabibal eshetie

Reputation: 1

Modify the configuration in next.config.js or mjs below.

images: {
    remotePatterns: [
        {
            protocol: 'https',
            hostname: 'res.cloudinary.com',
            pathname: '**',
        },
    ],
},

Upvotes: 0

Himmath Choudhary
Himmath Choudhary

Reputation: 1

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
      },
    ],
  },
};

Upvotes: 0

li Anna
li Anna

Reputation: 381

Resolve warning: The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead.

const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'm.media-amazon.com',
                pathname: '**'
            },
            {
                protocol: 'https',
                hostname: 'lh3.googleusercontent.com',
                pathname: '**'
            }
        ]
    }
};

module.exports = nextConfig;

Upvotes: 2

md. Alamin
md. Alamin

Reputation: 1

It should Resolve this issue.

images: {
    remotePatterns: [
        {**strong text**
            protocol: 'https',
            hostname: 'i.ibb.co',
            pathname: '**',
        },
        {
            protocol: 'https',
            hostname: 'lh3.googleusercontent.com',
            pathname: '**',
        },
        {
            protocol: 'https',
            hostname: 'daisyui.com',
            pathname: '**',
        },
    ],
}, };

Upvotes: 0

Nityam Kumar
Nityam Kumar

Reputation: 81

Here is the solution. I am using Google Provider Next-Auth (authjs’s new name). In the hostname add your URL. For more details, visit Next/image un-configured Host.

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com',
        port: '',
        pathname: '/**',
      },
    ],

Upvotes: 4

Xurify
Xurify

Reputation: 746

In Next.js Version 14, domains configuration has been deprecated in favour of remotePatterns. This can be defined in the next.config.js file.

Here is a reference as per the Next.js docs: remotePatterns

In your snippet, after you remove the domains configuration as you have described, it seems that you have mixed up your values in remotePatterns configuration, because you have set the hostname value to the wildcard '**' instead of the actual hostname 'res.cloudinary.com', thus the error hostname "res.cloudinary.com" is not configured.

Try to do this instead:

 images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '**',
      },
    ],
  },

Upvotes: 55

Related Questions