1
00:00:02,000 --> 00:00:04,000
In this project, which we have here,

2
00:00:04,000 --> 00:00:08,000
we currently only have one page, the index.js page.

3
00:00:08,000 --> 00:00:12,000
Now there we're rendering some dummy product data

4
00:00:12,000 --> 00:00:16,000
and it's very simple dummy product data, of course.

5
00:00:16,000 --> 00:00:19,000
Now what if our data there was a bit more complex?

6
00:00:19,000 --> 00:00:23,000
So every product also had a description, let's say.

7
00:00:23,000 --> 00:00:25,000
And I'll keep this very simple here

8
00:00:25,000 --> 00:00:28,000
since I want to focus on the Next.js features,

9
00:00:28,000 --> 00:00:30,000
not on this concrete example.

10
00:00:31,000 --> 00:00:35,000
So here, the description is this is product one.

11
00:00:35,000 --> 00:00:38,000
It's one extra JSON key added here.

12
00:00:38,000 --> 00:00:42,000
And on the second product, it's this is product two.

13
00:00:42,000 --> 00:00:44,000
And you might be able to imagine

14
00:00:44,000 --> 00:00:46,000
what it will be on the third product.

15
00:00:46,000 --> 00:00:48,000
Yes, this is product three.

16
00:00:49,000 --> 00:00:53,000
Now the idea could be that on the index.js file

17
00:00:53,000 --> 00:00:55,000
we render a list of products,

18
00:00:55,000 --> 00:00:58,000
and every product is a clickable link,

19
00:00:58,000 --> 00:01:00,000
which takes us to a detail page

20
00:01:00,000 --> 00:01:04,000
where we then also see the description of the product.

21
00:01:04,000 --> 00:01:06,000
So similar to what we built before

22
00:01:06,000 --> 00:01:08,000
in our project with the events,

23
00:01:08,000 --> 00:01:11,000
we have a detail page for the products.

24
00:01:12,000 --> 00:01:15,000
And for this, we can of course, add a new page

25
00:01:15,000 --> 00:01:18,000
with a dynamic segment between square brackets.

26
00:01:18,000 --> 00:01:21,000
And here we could name this PID, for product ID,

27
00:01:21,000 --> 00:01:25,000
but that identifier is up to you, dot js.

28
00:01:25,000 --> 00:01:28,000
So that's now a dynamic page.

29
00:01:28,000 --> 00:01:32,000
Alternatively, we create a folder named PID like this,

30
00:01:32,000 --> 00:01:35,000
and in there we then have an index.js file,

31
00:01:35,000 --> 00:01:37,000
but I'll stick to this setup.

32
00:01:37,000 --> 00:01:40,000
And here we could now add a component function,

33
00:01:40,000 --> 00:01:44,000
which is the product detail page, let's say.

34
00:01:45,000 --> 00:01:50,000
And the idea is, that in this component on this page,

35
00:01:50,000 --> 00:01:52,000
we show the product details.

36
00:01:52,000 --> 00:01:56,000
So to keep this simple, I just want to return,

37
00:01:56,000 --> 00:02:00,000
let's say a fragment here, imported from React.

38
00:02:00,000 --> 00:02:02,000
And there I then have an H1 tag

39
00:02:02,000 --> 00:02:05,000
with the title of the product,

40
00:02:05,000 --> 00:02:08,000
and below that, a paragraph with the description.

41
00:02:08,000 --> 00:02:11,000
But that data should now be fetched

42
00:02:11,000 --> 00:02:15,000
from the dummy backend JSON file as well.

43
00:02:15,000 --> 00:02:17,000
Now again, of course, we could write

44
00:02:17,000 --> 00:02:20,000
standard React code here, so to say,

45
00:02:20,000 --> 00:02:23,000
and use useEffect imported from React

46
00:02:23,000 --> 00:02:27,000
to send a HTTP request to some server

47
00:02:27,000 --> 00:02:30,000
which might provide this product data.

48
00:02:30,000 --> 00:02:32,000
But then we're back in the world where

49
00:02:32,000 --> 00:02:37,000
that data is not there when this page is initially rendered.

50
00:02:37,000 --> 00:02:40,000
So search engines still wouldn't see it,

51
00:02:40,000 --> 00:02:42,000
so that's not what we'll do here.

52
00:02:44,000 --> 00:02:45,000
Instead, what we will do here

53
00:02:45,000 --> 00:02:48,000
is we will again use

54
00:02:48,000 --> 00:02:51,000
this async prop function.

55
00:02:51,000 --> 00:02:54,000
So we'll export this async function getStaticProps.

56
00:02:56,000 --> 00:02:59,000
This function is again a function we can use here,

57
00:02:59,000 --> 00:03:00,000
and here we then, again,

58
00:03:00,000 --> 00:03:03,000
want to reach out to the backend JSON file,

59
00:03:03,000 --> 00:03:06,000
but now instead of reading

60
00:03:06,000 --> 00:03:09,000
the entire file and returning all products,

61
00:03:09,000 --> 00:03:12,000
I want to read the file and only return

62
00:03:12,000 --> 00:03:14,000
one product from that file.

63
00:03:14,000 --> 00:03:17,000
That will be the difference.

64
00:03:17,000 --> 00:03:19,000
And therefore of course we need to know

65
00:03:19,000 --> 00:03:22,000
which product should be returned here.

66
00:03:22,000 --> 00:03:24,000
And of course, that's something we can determine

67
00:03:24,000 --> 00:03:27,000
by looking at the concrete value, which is in the URL.

68
00:03:28,000 --> 00:03:32,000
So to concrete value for this PID key here.

69
00:03:32,000 --> 00:03:34,000
That's where does context parameter again

70
00:03:34,000 --> 00:03:38,000
becomes important because I did briefly mention before

71
00:03:38,000 --> 00:03:41,000
that we can use this context parameter,

72
00:03:41,000 --> 00:03:44,000
which is exposed to us buying Next.js,

73
00:03:44,000 --> 00:03:48,000
to get hold of the concrete param values.

74
00:03:48,000 --> 00:03:51,000
So the concrete values for these dynamic segments

75
00:03:51,000 --> 00:03:53,000
in our paths.

76
00:03:54,000 --> 00:03:57,000
We do get access to that by having a look

77
00:03:57,000 --> 00:04:00,000
at the params key in context.

78
00:04:00,000 --> 00:04:03,000
Now that's not a name I came up with,

79
00:04:03,000 --> 00:04:05,000
instead, that is one of the properties

80
00:04:05,000 --> 00:04:07,000
exposed by this context object

81
00:04:07,000 --> 00:04:10,000
which is given to you by Next.js.

82
00:04:10,000 --> 00:04:15,000
And params is an object full of key value pairs

83
00:04:15,000 --> 00:04:18,000
where the keys are the identifiers

84
00:04:18,000 --> 00:04:21,000
for the dynamic path segments.

85
00:04:21,000 --> 00:04:23,000
So in this case, PID,

86
00:04:23,000 --> 00:04:26,000
which is the only dynamic parameter of this page here

87
00:04:26,000 --> 00:04:29,000
and the values are the concrete values

88
00:04:29,000 --> 00:04:31,000
that were entered in the URL.

89
00:04:32,000 --> 00:04:35,000
So here I then get my product ID

90
00:04:35,000 --> 00:04:37,000
by accessing params.pid.

91
00:04:37,000 --> 00:04:40,000
PID because that's what I picked here on the file name.

92
00:04:41,000 --> 00:04:44,000
Now, one quick note about extracting the params here

93
00:04:44,000 --> 00:04:46,000
to avoid confusion.

94
00:04:46,000 --> 00:04:50,000
Of course, you can also extract params

95
00:04:50,000 --> 00:04:51,000
through the use router hook

96
00:04:51,000 --> 00:04:53,000
inside of the component function.

97
00:04:53,000 --> 00:04:56,000
That's what we did before in this course.

98
00:04:56,000 --> 00:04:59,000
We got access to that router object

99
00:04:59,000 --> 00:05:00,000
with the useRouter hook,

100
00:05:00,000 --> 00:05:04,000
and we extracted params with router.query.

101
00:05:04,000 --> 00:05:08,000
Now there is a difference between extracting params

102
00:05:08,000 --> 00:05:12,000
in the component function and the getStaticProps.

103
00:05:12,000 --> 00:05:16,000
When we extract these params in the component function,

104
00:05:16,000 --> 00:05:19,000
we can use them inside of the component,

105
00:05:19,000 --> 00:05:22,000
for example to use that extracted ID

106
00:05:22,000 --> 00:05:25,000
to send a request to some backend server

107
00:05:25,000 --> 00:05:26,000
to fetch data from there,

108
00:05:26,000 --> 00:05:31,000
but that would then only happen in the browser.

109
00:05:31,000 --> 00:05:33,000
If you want to pre-render a page

110
00:05:33,000 --> 00:05:36,000
with help of getStaticProps,

111
00:05:36,000 --> 00:05:38,000
which we use to prepare the data

112
00:05:38,000 --> 00:05:40,000
for pre-rendering the page,

113
00:05:40,000 --> 00:05:42,000
then this happens on the server.

114
00:05:42,000 --> 00:05:45,000
And as I explained, getStaticProps runs before

115
00:05:45,000 --> 00:05:46,000
the component function runs.

116
00:05:46,000 --> 00:05:48,000
It needs to run before that

117
00:05:48,000 --> 00:05:50,000
because the component function

118
00:05:50,000 --> 00:05:53,000
is then executed to pre-render the page.

119
00:05:54,000 --> 00:05:57,000
So if you plan on preparing a page on the server

120
00:05:57,000 --> 00:06:01,000
or during the build process with getStaticProps,

121
00:06:01,000 --> 00:06:04,000
then you need to get access to the params,

122
00:06:04,000 --> 00:06:07,000
so to that dynamic path segment

123
00:06:07,000 --> 00:06:09,000
inside of getStaticProps

124
00:06:09,000 --> 00:06:12,000
so that you can use the param data here

125
00:06:12,000 --> 00:06:15,000
to prepare the data for the component.

126
00:06:15,000 --> 00:06:19,000
Then we don't need to extract that dynamic segment

127
00:06:19,000 --> 00:06:20,000
in the component function

128
00:06:20,000 --> 00:06:23,000
unless we also need it there for some reason.

129
00:06:23,000 --> 00:06:25,000
But for preparing the data,

130
00:06:25,000 --> 00:06:27,000
we then want to do that in getStaticProps.

131
00:06:28,000 --> 00:06:30,000
And now with that, we could reach out

132
00:06:30,000 --> 00:06:34,000
to our file, to the dummy backend JSON file,

133
00:06:34,000 --> 00:06:38,000
and try to read that product with that ID.

134
00:06:39,000 --> 00:06:43,000
So for this I'll briefly copy that code from index.js,

135
00:06:43,000 --> 00:06:47,000
where I get access to this dummy backend JSON file,

136
00:06:47,000 --> 00:06:51,000
and I'll therefore also grab those imports here

137
00:06:51,000 --> 00:06:54,000
and add them to pid.js

138
00:06:54,000 --> 00:06:55,000
like this.

139
00:06:57,000 --> 00:06:59,000
And now that we got hold of this file,

140
00:06:59,000 --> 00:07:01,000
I just want to filter my data,

141
00:07:01,000 --> 00:07:04,000
the products in there, to be precise

142
00:07:04,000 --> 00:07:06,000
for a product with this ID.

143
00:07:07,000 --> 00:07:09,000
So here I'll then get my product

144
00:07:09,000 --> 00:07:11,000
by reaching out to data.products

145
00:07:11,000 --> 00:07:13,000
and calling find there,

146
00:07:13,000 --> 00:07:15,000
and then we pass a function to find

147
00:07:15,000 --> 00:07:18,000
which is executed on every product in that array.

148
00:07:18,000 --> 00:07:20,000
And we want to return true here

149
00:07:20,000 --> 00:07:21,000
if the ID of the product

150
00:07:21,000 --> 00:07:24,000
we're currently looking at in that array

151
00:07:24,000 --> 00:07:26,000
is equal to the product ID

152
00:07:26,000 --> 00:07:29,000
we got here from our parameters.

153
00:07:29,000 --> 00:07:31,000
And if that is equal, we know that's the product

154
00:07:31,000 --> 00:07:34,000
we need for this component.

155
00:07:34,000 --> 00:07:37,000
So then here, at the end of getStaticProps,

156
00:07:37,000 --> 00:07:41,000
we return an object with the props key,

157
00:07:41,000 --> 00:07:46,000
and here I then set my loaded product, let's say,

158
00:07:46,000 --> 00:07:49,000
equal to the product fetched here.

159
00:07:50,000 --> 00:07:53,000
Now there is a load of product props available,

160
00:07:53,000 --> 00:07:55,000
inside of the product detail page.

161
00:07:55,000 --> 00:07:58,000
So here we can extract this,

162
00:07:58,000 --> 00:08:01,000
maybe again with object de-structuring,

163
00:08:01,000 --> 00:08:02,000
we can get this from the props,

164
00:08:02,000 --> 00:08:05,000
which we should accept therefore,

165
00:08:05,000 --> 00:08:07,000
and then it's this loaded product

166
00:08:07,000 --> 00:08:12,000
from which we can read the title and the description.

167
00:08:12,000 --> 00:08:16,000
So here it's then loadedProduct.description.

168
00:08:18,000 --> 00:08:20,000
Now, in order to test this,

169
00:08:20,000 --> 00:08:24,000
we need to make sure we can go to this detail page.

170
00:08:24,000 --> 00:08:26,000
And then from the index.js file,

171
00:08:26,000 --> 00:08:30,000
I will wrap the text ends of the list item

172
00:08:30,000 --> 00:08:32,000
with the link component,

173
00:08:32,000 --> 00:08:35,000
which, of course, needs to be imported again

174
00:08:35,000 --> 00:08:40,000
from next/link, so that still needs to be imported.

175
00:08:40,000 --> 00:08:44,000
Then I move the product title between those link tags,

176
00:08:44,000 --> 00:08:47,000
and then href is set to a dynamic value,

177
00:08:47,000 --> 00:08:50,000
which I construct with a template literal,

178
00:08:50,000 --> 00:08:53,000
where I want to go to slash

179
00:08:53,000 --> 00:08:57,000
and then inject the product ID here.

180
00:08:59,000 --> 00:09:01,000
And then with that, if we now save all,

181
00:09:01,000 --> 00:09:03,000
we've got clickable links here,

182
00:09:03,000 --> 00:09:05,000
and if I click on a link,

183
00:09:05,000 --> 00:09:07,000
I get an error.

184
00:09:07,000 --> 00:09:10,000
getStaticPaths is required.

185
00:09:10,000 --> 00:09:12,000
Now that is an expected error,

186
00:09:12,000 --> 00:09:14,000
and it's an important one.

187
00:09:14,000 --> 00:09:15,000
So let's understand what it does,

188
00:09:15,000 --> 00:09:17,000
but before we do that,

189
00:09:17,000 --> 00:09:20,000
in the next lecture, I again want to emphasize

190
00:09:20,000 --> 00:09:23,000
that the code here is generally correct.

191
00:09:23,000 --> 00:09:27,000
We use params to get access to the concrete values

192
00:09:27,000 --> 00:09:29,000
encoded in the URL,

193
00:09:29,000 --> 00:09:32,000
and we can then use that extracted data

194
00:09:32,000 --> 00:09:34,000
to fetch a specific piece of data

195
00:09:34,000 --> 00:09:37,000
and expose this to the component.

196
00:09:37,000 --> 00:09:39,000
So this is not wrong,

197
00:09:39,000 --> 00:09:41,000
and still we have this problem.

198
00:09:41,000 --> 00:09:44,000
So let's understand where this is coming from.