Render remote image url inside Next JS Image
Post by: Niraj Dhungana
Posted on: Nov 29 2021
#Next JS# next/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.
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.
So, how do we get the actual size for all the images? We can't.
But we can use something called
objectFit. These are the props which we can pass to our
Image component coming from next-js.
layout you can choose from values like
responsive. And inside
objectFit you choose from
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.
And the values that worked for me are
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.