Render remote image url inside Next JS Image

No doubt next-js is one of the greatest things that we have. It is fast like single page React apps and also Next js does lots of things behind the scene to optimize our web contents.

Which we don’t even give a damn while creating our project. And image optimization is one of those. If you have a Next js app where you are using next/image to render your images.

Then you will see something like this if you instect your page.

Why next/image is important

The above image is the inspection result of my own website. And if you ask what is this? Then it’s an optimization which the image component did from inside the next-js.

You can see there are lots of image sizes inside that source url. That is because next-js will use those different sizes inside different screens. Like if the screen size is large then it will use the large size of image and the screen size is small. You know what it will do.

Next js does all those things behind the scene because when you use image url. It finds out the actual size of an image. Then it optimizes for different screen sizes.

The problem with next/image

You can read more about next/image inside the next js official website. But we are here to find out how to use this component to render images from remote api links.

Because if you try to render images from a remote url inside next/image it will display an error instead of the image.

This is not exactly a problem. According to official documentation, to use a remote image url we need to first configure our next js app. And most of the programmers skip this part and that’s the problem.

To configure a remote image url to your next js app. Open next.config.js file and add this code.

1// next.config.js
2module.exports = {
3  reactStrictMode: true,
4  images: {
5	// here you can add the url's that you are planning 
6   // to use inside your next/image.
7    domains: ["res.cloudinary.com", "i.ytimg.com"],
8  },
9};
10

Here you can see I am using two url inside domains. Because I am fetching images inside my website from two places, one is from YouTube api and cloudinary.

The actual url for the first one is "https://res.cloudinary.com/image-endpoint". So, I hope you get the point. Which part of the url you need to include inside the domains.

The most important thing here is next/image takes only ssl secure url (https not http). Also if you try to use a url with http next js will convert it to https. So, beware of this situation.

Size will be another problem

When we want to use next/image we also need to specify the size of our image. This is fine if we have an image stored locally. But here we want to use images from remote api links.

1// from next js official docs
2<Image
3	src="/me.png"
4    alt="Picture of the author"
5    width={500}
6    height={500}
7/>
8

So, how do we get the actual size for all the images? We can't.

But we can use something called layout and objectFit. These are the props which we can pass to our Image component coming from next-js.

Inside layout you can choose from values like fixed, fill, intrinsic, responsive. And inside objectFit you choose from contain, cover, fill and a bunch of others.

We already talked about that the next/image will find out image sizes on it’s own, so we don’t need to worry about that.

1<Image
2    alt="add empty alt insted. but don't remove it"
3    src={imageUrl}
4    layout="fill"
5    objectFit="cover"
6/>
7

And the values that worked for me are cover for objectFit and fill for layout. You can check others if you like them but if you want images to fit inside your component then these values will work for you as well.