So let's now work
on optimizing these user-generated images.
And one problem we'll have here
is that we don't know the size of the files
that have been uploaded by the users in advance,
but I'll of course show you how to work around that.
Now let's start by going to the post component
where we output those images.
And of course we can start
by also using the NextJS image component here
instead of the native built-in image element.
For that, you must make sure
that you import that component though,
so that you import image from next image.
Now, if you do that
and you would save the code like this,
you would get an error
and you would get an error
because of course, we're now setting a string path
as the source for our image component.
And as you saw before, that doesn't work like that.
Instead, this image component wants an object
as a value for the source prop, or does it?
Well, actually it needs such an object
if you're not setting a width and height manually.
But if you do set width and height props
on the next image component,
you can indeed use a string path here.
Now, the width and height you do set here could be used
to size the image
and you could therefore set width and height
to the sizes you wanna display the image at,
but that's actually not how you should use these props.
As I mentioned before,
whilst you can do it as a workaround,
it's not the recommended way of using width and height.
Instead, you should normally set the native raw width
and height of the input image here.
And of course, we don't know that if the image was chosen
and uploaded by a user of our website.
Therefore, what NextJS offers
as an alternative in situations like this
is that you set the fill prop here.
And you can simply add it like this
and therefore set it to true.
If you do that, you'll see that we still get an error,
but now it's a different error
that essentially this host name
from which we're trying to fetch the image is not configured
under images in our next config.
So what's this error about?
Well, whenever you are loading an image
from an external site, as we're doing it here,
NextJS for security reasons, blocks that image
and gives you that error instead.
But of course, here we wanna load the image
from that remote site
and therefore what we have to do is we have to go
to this next.config file
and unlock this specific external site, so to say,
to allow loading images from there.
And you do that by adding the images property here
to this configuration object,
and you set this to an object itself.
And then in there you can add the remotePatterns setting
and set this to an array
of remote host addresses you wanna allow
for loading images in your NextJS application.
Now, remotePatterns actually wants an array of objects
and in every object you can then set up a host name.
So the domain name in the end
of these external sites you wanna allow.
In my case here, res.cloudinary.com,
that is the domain with which all those links
to the Cloudinary hosted images will start.
By adding this configuration setting
and then saving this file,
you will see that if you now reload, this error goes away.
But now I got large images
which take up the entire size of the screen.
And that's happening because of this fill prop.
And it's of course not the behavior we want
so let's work on that.