1
00:00:03,000 --> 00:00:04,950
We made quite a few changes

2
00:00:04,950 --> 00:00:06,756
to the StardewValleyPage,

3
00:00:06,828 --> 00:00:09,220
and it now loads the review data

4
00:00:09,220 --> 00:00:11,462
from a separate Markdown file.

5
00:00:11,536 --> 00:00:14,756
But what about our other review page?

6
00:00:14,756 --> 00:00:17,912
We should really do the same for Hollow Knight.

7
00:00:17,912 --> 00:00:21,111
Let's create a Markdown file for that game.

8
00:00:21,111 --> 00:00:24,299
I'll just duplicate the Stardew Valley one,

9
00:00:24,299 --> 00:00:27,737
and rename it to "hollow-knight.md".

10
00:00:27,737 --> 00:00:29,684
Then we can change the title,

11
00:00:29,684 --> 00:00:31,229
to say "Hollow Knight".

12
00:00:31,717 --> 00:00:34,385
As the date, I'll just put the next day.

13
00:00:34,385 --> 00:00:37,242
The image path needs updating as well.

14
00:00:37,665 --> 00:00:40,372
And finally we'll want a review body,

15
00:00:40,372 --> 00:00:43,558
that I'm going to copy from Wikipedia again,

16
00:00:43,558 --> 00:00:45,620
just to have some text that's

17
00:00:45,620 --> 00:00:47,183
relevant to this game.

18
00:00:47,254 --> 00:00:49,658
Let's split it into two paragraphs,

19
00:00:50,114 --> 00:00:52,546
and make the game title bold, like

20
00:00:52,546 --> 00:00:54,548
we did for the other review.

21
00:00:54,620 --> 00:00:57,413
Ok, the Markdown file is ready.

22
00:00:57,413 --> 00:01:01,145
Now we need to display its contents on the page.

23
00:01:01,145 --> 00:01:03,848
But we don't really want to duplicate

24
00:01:03,848 --> 00:01:05,309
the same code again,

25
00:01:05,382 --> 00:01:06,968
in this other component,

26
00:01:06,968 --> 00:01:09,805
when almost everything will be the

27
00:01:09,805 --> 00:01:12,308
same as the StardewValleyPage.

28
00:01:12,391 --> 00:01:14,580
The only thing that needs to be different

29
00:01:14,580 --> 00:01:18,333
is the argument we pass to the getReview function.

30
00:01:18,333 --> 00:01:21,238
Next.js allows us to use the same

31
00:01:21,238 --> 00:01:23,791
component for multiple paths.

32
00:01:23,879 --> 00:01:26,539
That's called a "dynamic route".

33
00:01:26,539 --> 00:01:28,075
Let's see how it works.

34
00:01:28,075 --> 00:01:30,458
We don't want a separate component

35
00:01:30,458 --> 00:01:32,211
for each review any more,

36
00:01:32,281 --> 00:01:35,319
so I'll delete the "hollow-knight" route.

37
00:01:35,319 --> 00:01:37,688
This means that, if we try loading

38
00:01:37,688 --> 00:01:39,430
the "hollow-knight" path,

39
00:01:39,499 --> 00:01:42,427
at the moment we'll get a 404 page.

40
00:01:42,427 --> 00:01:45,597
But now we can change the "stardew-valley"

41
00:01:45,597 --> 00:01:47,257
route to be "dynamic",

42
00:01:47,332 --> 00:01:50,137
by renaming this folder to "[slug]"

43
00:01:50,137 --> 00:01:51,659
in square brackets.

44
00:01:51,739 --> 00:01:53,562
This is a strange name,

45
00:01:53,562 --> 00:01:56,258
but the square brackets mean it will

46
00:01:56,258 --> 00:01:58,805
match any path segment in the URL,

47
00:01:58,880 --> 00:02:01,038
a bit like a wildcard.

48
00:02:01,038 --> 00:02:03,958
And "slug" is name of the parameter

49
00:02:03,958 --> 00:02:06,426
that will receive the actual value

50
00:02:06,426 --> 00:02:08,675
for the requested path segment,

51
00:02:08,749 --> 00:02:10,227
as we'll see in a minute.

52
00:02:10,227 --> 00:02:12,307
Now, if I press Enter, this will

53
00:02:12,307 --> 00:02:14,063
actually rename the folder,

54
00:02:14,128 --> 00:02:16,088
and you can see that the browser

55
00:02:16,088 --> 00:02:17,191
reloaded the page,

56
00:02:17,252 --> 00:02:20,857
showing the content generated by this component.

57
00:02:20,857 --> 00:02:25,086
That's because the "/reviews/hollow-knight" path

58
00:02:25,086 --> 00:02:27,790
now matches this dynamic route.

59
00:02:27,790 --> 00:02:31,359
So this is not just the StardewValleyPage

60
00:02:31,359 --> 00:02:32,143
any more,

61
00:02:32,230 --> 00:02:35,250
we can rename it to ReviewPage instead,

62
00:02:35,250 --> 00:02:38,404
since it will be used for all the reviews.

63
00:02:38,404 --> 00:02:40,580
But how can we know exactly

64
00:02:40,580 --> 00:02:42,756
which review was requested?

65
00:02:42,836 --> 00:02:45,865
Well, this component will receive some "props".

66
00:02:45,865 --> 00:02:47,952
Let me log them to the console,

67
00:02:47,952 --> 00:02:50,989
so we can see when this component is rendered,

68
00:02:50,989 --> 00:02:53,606
and exactly what props it receives.

69
00:02:53,889 --> 00:02:55,787
Let's look at the server logs,

70
00:02:55,787 --> 00:02:57,637
and if I save this change,

71
00:02:57,637 --> 00:03:00,424
you can see that the ReviewPage received

72
00:03:00,424 --> 00:03:02,444
some "params" in the "props",

73
00:03:02,513 --> 00:03:05,459
with the "slug" set to "hollow-knight".

74
00:03:05,459 --> 00:03:08,141
So, what's going on here is that

75
00:03:08,141 --> 00:03:12,495
the browser requests the "/reviews/hollow-knight"

76
00:03:12,495 --> 00:03:12,939
path,

77
00:03:13,028 --> 00:03:15,830
and the Next.js server maps it to

78
00:03:15,830 --> 00:03:18,293
the "reviews" "[slug]" route,

79
00:03:18,377 --> 00:03:20,242
because "[slug]" in square

80
00:03:20,242 --> 00:03:22,107
brackets matches anything,

81
00:03:22,179 --> 00:03:24,709
but for this particular request, the

82
00:03:24,709 --> 00:03:26,959
actual value is "hollow-knight",

83
00:03:27,029 --> 00:03:29,733
so that's what's passed as a parameter

84
00:03:29,733 --> 00:03:31,299
to our page component.

85
00:03:31,370 --> 00:03:34,288
Of course, if we request a different review,

86
00:03:34,288 --> 00:03:35,911
like "stardew-valley",

87
00:03:35,911 --> 00:03:39,341
the "slug" parameter will have a different value.

88
00:03:39,341 --> 00:03:41,850
This means we can use that parameter

89
00:03:41,850 --> 00:03:43,453
to load the right file,

90
00:03:43,522 --> 00:03:46,798
and display different content for each review,

91
00:03:46,798 --> 00:03:49,203
rather than always the same page.

92
00:03:49,203 --> 00:03:51,798
We simply need to destructure these

93
00:03:51,798 --> 00:03:54,096
"props" to access the "params",

94
00:03:54,170 --> 00:03:56,660
in fact, we could extract the "slug"

95
00:03:56,660 --> 00:03:58,804
directly from the props object,

96
00:03:58,874 --> 00:04:01,081
and then pass the "slug" value

97
00:04:01,081 --> 00:04:02,994
to the getReview function.

98
00:04:03,068 --> 00:04:05,366
This way it should load a different

99
00:04:05,366 --> 00:04:06,744
file for each review.

100
00:04:06,810 --> 00:04:08,309
If we save this change,

101
00:04:08,309 --> 00:04:10,654
you can see that it's now displaying

102
00:04:10,654 --> 00:04:12,153
the Hollow Knight data.

103
00:04:12,218 --> 00:04:15,023
While, if we navigate to the other review,

104
00:04:15,023 --> 00:04:18,535
it still shows the Stardew Valley content.

105
00:04:18,535 --> 00:04:22,746
So, every route will automatically load the right data,

106
00:04:22,746 --> 00:04:24,277
based on the "slug".

107
00:04:24,353 --> 00:04:26,532
There's no need to write a separate

108
00:04:26,532 --> 00:04:28,462
page component for each review.

109
00:04:28,524 --> 00:04:31,032
We can just use a dynamic route,

110
00:04:31,032 --> 00:04:33,001
by putting the parameter name

111
00:04:33,001 --> 00:04:34,563
inside square brackets,

112
00:04:34,631 --> 00:04:38,574
and Next.js will use this ReviewPage component

113
00:04:38,574 --> 00:04:41,505
for all the URLs that match the

114
00:04:41,505 --> 00:04:44,342
"/reviews/" something pattern.