Adding external domains in nextjs project.

Well this is a rather simple post on how to setup external domains and use them in our nextjs projects.

if you have ever came across below error then this post is for you.

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

Old method(Kind of deprecated from Nextjs 14):

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ['images.unsplash.com', 'i.pravatar.cc']
    }
};

export default nextConfig;

• Upto nextjs 13 we need to just add all the external hostnames in domains array of nextConfig;
• And this will automatically allow the access of specified domains in our project.

New Method (Applicable from v14):

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'images.unsplash.com',
                pathname: '**'
            },
            {
                protocol: 'https',
                hostname: 'i.pravatar.cc',
                pathname: '**'
            },
        ]
    }
};

export default nextConfig;

• The only difference here is we rename the domains to remotePatterns array which accepts an object of varied parameters like protocol, hostname,port, pathname etc.
• And if you are just trying to make it work in your personal project you can just copy the above New method.
• Otherwise you can specify the exact hostname, protocols, port numbers and acceptable pathnames. Ex: images.unsplash.com/**/user12 etc.