1
00:00:03,000 --> 00:00:05,257
We updated the ReviewsPage to

2
00:00:05,257 --> 00:00:07,515
use the Next Image component.

3
00:00:07,593 --> 00:00:09,701
There is one more file to do,

4
00:00:09,701 --> 00:00:11,489
that is the HomePage.

5
00:00:11,489 --> 00:00:13,328
Here we still see a warning

6
00:00:13,328 --> 00:00:16,684
because we're using the standard "img" tag.

7
00:00:16,684 --> 00:00:19,794
Let me open the Home page in the browser as well.

8
00:00:19,794 --> 00:00:23,041
Now, before we go and replace the "img" tag,

9
00:00:23,041 --> 00:00:25,212
I'd like to do some improvements

10
00:00:25,212 --> 00:00:26,434
to this Home page.

11
00:00:26,502 --> 00:00:30,109
Because showing a single review is not that nice,

12
00:00:30,109 --> 00:00:32,436
especially on a larger screen.

13
00:00:32,436 --> 00:00:34,565
In fact, at a normal zoom level

14
00:00:34,565 --> 00:00:36,214
it would look like this,

15
00:00:36,283 --> 00:00:38,455
with a lot of empty space.

16
00:00:38,455 --> 00:00:41,575
I increase the zoom level when recording videos,

17
00:00:41,575 --> 00:00:43,151
to make sure you can clearly

18
00:00:43,151 --> 00:00:44,446
see what's on the page.

19
00:00:44,503 --> 00:00:47,665
Anyway, rather than calling "getFeaturedReview"

20
00:00:47,665 --> 00:00:50,083
that only returns the latest entry,

21
00:00:50,083 --> 00:00:52,882
now that we have lots of data in the CMS

22
00:00:52,882 --> 00:00:54,996
maybe we could show a few more

23
00:00:54,996 --> 00:00:56,617
items in the Home page.

24
00:00:56,687 --> 00:00:59,366
We already have the "getReviews" function

25
00:00:59,366 --> 00:01:01,210
to fetch multiple entries.

26
00:01:01,210 --> 00:01:03,140
What we could do is pass the

27
00:01:03,140 --> 00:01:04,932
"pageSize" as an argument,

28
00:01:05,001 --> 00:01:07,187
so different pages can request

29
00:01:07,187 --> 00:01:09,372
a different number of results.

30
00:01:09,445 --> 00:01:10,886
In the ReviewsPage,

31
00:01:10,886 --> 00:01:14,031
we can keep showing 6 entries as before.

32
00:01:14,031 --> 00:01:16,811
Let's quickly test that it still works.

33
00:01:16,811 --> 00:01:19,395
We should still see 6 cards here.

34
00:01:19,395 --> 00:01:20,373
That's good.

35
00:01:20,391 --> 00:01:22,379
Now, back to the Home page,

36
00:01:22,379 --> 00:01:24,120
we don't want it to be the

37
00:01:24,120 --> 00:01:25,794
same as the Reviews page,

38
00:01:25,861 --> 00:01:29,464
but maybe we could display the latest 3 reviews.

39
00:01:29,464 --> 00:01:32,862
So, let's import the "getReviews" function here,

40
00:01:32,884 --> 00:01:36,820
and then call it, passing "3" as the "pageSize".

41
00:01:36,820 --> 00:01:39,287
Which means we'll get some "reviews",

42
00:01:39,287 --> 00:01:40,420
not a single one.

43
00:01:40,486 --> 00:01:42,595
Now, we'll need to display each

44
00:01:42,595 --> 00:01:44,091
element in this array.

45
00:01:44,223 --> 00:01:46,706
Let's add an unordered list here

46
00:01:46,706 --> 00:01:49,352
and "map" over the "reviews" array.

47
00:01:50,510 --> 00:01:52,208
For each object we want to

48
00:01:52,208 --> 00:01:53,842
render the existing card,

49
00:01:53,907 --> 00:01:56,643
so let's move it inside the new block.

50
00:01:56,643 --> 00:01:58,726
But now we should use a list

51
00:01:58,726 --> 00:02:00,587
item rather than a "div".

52
00:02:00,661 --> 00:02:02,624
The editor is showing an error.

53
00:02:02,624 --> 00:02:04,660
It says "Missing key prop

54
00:02:04,660 --> 00:02:06,696
for element in iterator".

55
00:02:06,778 --> 00:02:09,226
That's why it's useful to have the

56
00:02:09,226 --> 00:02:11,170
ESLint extension installed.

57
00:02:11,242 --> 00:02:13,447
When rendering an array in React

58
00:02:13,447 --> 00:02:15,514
we need to set the "key" prop,

59
00:02:15,583 --> 00:02:18,735
and we can use the "review.slug", that's unique.

60
00:02:19,008 --> 00:02:21,691
Let's see what this looks like if we save.

61
00:02:21,691 --> 00:02:23,229
We see three cards,

62
00:02:23,229 --> 00:02:25,898
but we need some spacing between them.

63
00:02:25,898 --> 00:02:28,597
Let's set the list to use flexbox

64
00:02:28,597 --> 00:02:30,861
with a "gap" between each item.

65
00:02:30,861 --> 00:02:31,961
That's better.

66
00:02:32,514 --> 00:02:34,430
Now, let's check what it looks

67
00:02:34,430 --> 00:02:35,962
like on a larger screen,

68
00:02:36,026 --> 00:02:38,204
and at a normal zoom level.

69
00:02:38,204 --> 00:02:40,153
It's certainly less empty.

70
00:02:40,153 --> 00:02:41,837
We could display some other

71
00:02:41,837 --> 00:02:43,395
information on each card,

72
00:02:43,458 --> 00:02:44,791
below the title,

73
00:02:44,791 --> 00:02:46,963
but we'll think about that later.

74
00:02:46,983 --> 00:02:49,711
Now, let's finish updating this code.

75
00:02:49,876 --> 00:02:52,041
Before I forget, we're no longer

76
00:02:52,041 --> 00:02:53,800
using "getFeaturedReview",

77
00:02:53,867 --> 00:02:56,296
so we can delete this function now.

78
00:02:56,296 --> 00:02:59,529
The HomePage calls "getReviews" instead.

79
00:02:59,529 --> 00:03:01,615
We can finally replace the

80
00:03:01,615 --> 00:03:03,701
"img" tag with Next Image.

81
00:03:03,781 --> 00:03:06,710
And you could do this yourself as an exercise,

82
00:03:06,710 --> 00:03:07,474
if you want.

83
00:03:07,538 --> 00:03:09,204
It's just like what we did

84
00:03:09,204 --> 00:03:10,741
in the previous lecture.

85
00:03:10,805 --> 00:03:12,565
Please pause the video if you

86
00:03:12,565 --> 00:03:13,900
wish to give it a try,

87
00:03:13,960 --> 00:03:15,945
and restart it when you're ready.

88
00:03:15,945 --> 00:03:21,205
I'll show you my code in a few seconds.

89
00:03:21,205 --> 00:03:23,371
Ok, this is my solution.

90
00:03:23,371 --> 00:03:25,639
I replaced the "img" tag with

91
00:03:25,639 --> 00:03:27,594
the Next Image component,

92
00:03:27,672 --> 00:03:29,904
setting "priority" to "true" for

93
00:03:29,904 --> 00:03:32,065
the first element in the array.

94
00:03:32,135 --> 00:03:34,559
Of course, the Image component needs

95
00:03:34,559 --> 00:03:36,309
to be imported at the top.

96
00:03:36,377 --> 00:03:38,793
And "index" is the second argument

97
00:03:38,793 --> 00:03:40,640
we get from "reviews.map".

98
00:03:40,711 --> 00:03:43,219
If we go and inspect the first image,

99
00:03:43,593 --> 00:03:46,391
we should see that it has "fetchpriority"

100
00:03:46,391 --> 00:03:47,346
set to "high".

101
00:03:47,414 --> 00:03:49,641
While if we look at the second image,

102
00:03:50,334 --> 00:03:53,575
this one should have "loading" set to "lazy".

103
00:03:53,575 --> 00:03:55,918
If you check the image dimensions

104
00:03:55,918 --> 00:03:58,426
you should also see that it has been

105
00:03:58,426 --> 00:04:00,516
resized by the Next.js server,

106
00:04:00,586 --> 00:04:03,142
although to exactly which dimensions

107
00:04:03,142 --> 00:04:04,846
depends on your monitor,

108
00:04:04,917 --> 00:04:09,312
if it's using the "1x" or "2x" pixel density.

109
00:04:09,312 --> 00:04:11,607
But with this, we're now using the

110
00:04:11,607 --> 00:04:13,767
Next Image component everywhere.

111
00:04:13,834 --> 00:04:15,560
In fact, if we run the lint

112
00:04:15,560 --> 00:04:17,029
checks in the terminal,

113
00:04:17,094 --> 00:04:19,081
by the way, we're still logging

114
00:04:19,081 --> 00:04:20,683
all the slugs every time.

115
00:04:20,747 --> 00:04:24,247
Let me comment out this "console.log" message now.

116
00:04:24,247 --> 00:04:26,749
Anyway, what I wanted to do is see

117
00:04:26,749 --> 00:04:28,956
if there are any warnings left

118
00:04:29,030 --> 00:04:32,658
if we do an "npm run lint" and check our code.

119
00:04:32,658 --> 00:04:34,903
You can see that there are no longer

120
00:04:34,903 --> 00:04:36,337
any warnings or errors.

121
00:04:36,399 --> 00:04:39,403
We're now using Next.js to automatically

122
00:04:39,403 --> 00:04:41,205
optimize all our images.