Next.js provides various Image
Optimization features.
It can convert files to modern formats, like WebP,
automatically resize images, enable lazy loading,
and so on.
Let's see how to use those features
in our application.
Note that, in the terminal, I now
have the dev server running,
not the production one.
And, by the way, I always have the
Strapi server running as well,
in a separate terminal.
Now, in the previous video we set up ESLint,
and we've seen that it shows a
few warnings about our code.
One of them is in the ReviewPage,
where we use a standard HTML "img" element,
but there's a rule suggesting we use
the "next/image" component instead.
Let me go and open a review page,
and show you how this image works at the moment,
if we inspect it using the Chrome Developer Tools.
We can see that its original
size is 1280 by 720 pixels,
even though we set the element
width to 640 pixels.
Also, if we lookÂ at the Network tab,
here we can filter images only.
We can see that it's of type "jpeg",
and its size is 147 kilobytes.
Let's remember these details for later.
Now, let's do what the ESLint rule suggested,
and use the "Image" component instead,
that we can import from the "next/image" module.
We can use this component as a replacement
for the standard HTML "img" element.
The Next Image component accepts
mostly the same props.
Let's see what happens if we save this change.
We get an error,
saying that "Image Optimization
using the default loader"
"is not compatible with output: export."
This is happening because
we configured Next.js to do a Static Export.
But Image Optimization only works
if we run our application in a Node.js server.
So, we can no longer build our
app as a fully static website.
Now, the dev server should restart automatically;
let's try reloading the page in the browser,
and see if it works.
It doesn't.
But at least it's a different error this time.
It says "hostname localhost is not configured
under images in your next.config.js".
What this means is that we need
to add some configuration
specifying which hostnames we are
allowed to load "images" from.
We can do that by setting
a "remotePatterns" array,
containing an object for each image server.
Here we need to specify at least the "hostname".
In our case, we want to load
the images from Strapi,
that's running on "localhost".
This step is required for security reasons,
because otherwise bad people could
take advantage of our application
to send requests to other
websites on the internet.
So we want to restrict which servers
we are allowed to call.
In fact, it's better to be
as specific as possible,
and also set the other properties.
Starting from the "protocol",
in our case we're using "http" locally,
but in production you would normally use "https".
Then we can set a "port",
and we want "1337",
that is the port used by the Strapi server.
Finally, we can optionally set a "pathname",
and in Strapi all images are under "uploads",
so we can write "uploads" followed by two asterisks
to match any files inside that path.
This will prevent access to
the Strapi API for example,
that's under the "/api" path instead.
With this configuration,
if we reload the page, it should hopefully work.
We can finally see the "Hades" review again.
So we're now using the Next Image component.
In the next video we'll see exactly
what difference this makes.