We updated the ReviewsPage to
use the Next Image component.
There is one more file to do,
that is the HomePage.
Here we still see a warning
because we're using the standard "img" tag.
Let me open the Home page in the browser as well.
Now, before we go and replace the "img" tag,
I'd like to do some improvements
to this Home page.
Because showing a single review is not that nice,
especially on a larger screen.
In fact, at a normal zoom level
it would look like this,
with a lot of empty space.
I increase the zoom level when recording videos,
to make sure you can clearly
see what's on the page.
Anyway, rather than calling "getFeaturedReview"
that only returns the latest entry,
now that we have lots of data in the CMS
maybe we could show a few more
items in the Home page.
We already have the "getReviews" function
to fetch multiple entries.
What we could do is pass the
"pageSize" as an argument,
so different pages can request
a different number of results.
In the ReviewsPage,
we can keep showing 6 entries as before.
Let's quickly test that it still works.
We should still see 6 cards here.
That's good.
Now, back to the Home page,
we don't want it to be the
same as the Reviews page,
but maybe we could display the latest 3 reviews.
So, let's import the "getReviews" function here,
and then call it, passing "3" as the "pageSize".
Which means we'll get some "reviews",
not a single one.
Now, we'll need to display each
element in this array.
Let's add an unordered list here
and "map" over the "reviews" array.
For each object we want to
render the existing card,
so let's move it inside the new block.
But now we should use a list
item rather than a "div".
The editor is showing an error.
It says "Missing key prop
for element in iterator".
That's why it's useful to have the
ESLint extension installed.
When rendering an array in React
we need to set the "key" prop,
and we can use the "review.slug", that's unique.
Let's see what this looks like if we save.
We see three cards,
but we need some spacing between them.
Let's set the list to use flexbox
with a "gap" between each item.
That's better.
Now, let's check what it looks
like on a larger screen,
and at a normal zoom level.
It's certainly less empty.
We could display some other
information on each card,
below the title,
but we'll think about that later.
Now, let's finish updating this code.
Before I forget, we're no longer
using "getFeaturedReview",
so we can delete this function now.
The HomePage calls "getReviews" instead.
We can finally replace the
"img" tag with Next Image.
And you could do this yourself as an exercise,
if you want.
It's just like what we did
in the previous lecture.
Please pause the video if you
wish to give it a try,
and restart it when you're ready.
I'll show you my code in a few seconds.
Ok, this is my solution.
I replaced the "img" tag with
the Next Image component,
setting "priority" to "true" for
the first element in the array.
Of course, the Image component needs
to be imported at the top.
And "index" is the second argument
we get from "reviews.map".
If we go and inspect the first image,
we should see that it has "fetchpriority"
set to "high".
While if we look at the second image,
this one should have "loading" set to "lazy".
If you check the image dimensions
you should also see that it has been
resized by the Next.js server,
although to exactly which dimensions
depends on your monitor,
if it's using the "1x" or "2x" pixel density.
But with this, we're now using the
Next Image component everywhere.
In fact, if we run the lint
checks in the terminal,
by the way, we're still logging
all the slugs every time.
Let me comment out this "console.log" message now.
Anyway, what I wanted to do is see
if there are any warnings left
if we do an "npm run lint" and check our code.
You can see that there are no longer
any warnings or errors.
We're now using Next.js to automatically
optimize all our images.