Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,150 --> 00:00:04,860
In this project, which we have here,
2
00:00:04,860 --> 00:00:08,990
we currently only have one page, the index.js page.
3
00:00:08,990 --> 00:00:12,130
Now there we're rendering some dummy product data
4
00:00:12,130 --> 00:00:16,230
and it's very simple dummy product data, of course.
5
00:00:16,230 --> 00:00:19,960
Now what if our data there was a bit more complex?
6
00:00:19,960 --> 00:00:23,950
So every product also had a description, let's say.
7
00:00:23,950 --> 00:00:25,640
And I'll keep this very simple here
8
00:00:25,640 --> 00:00:28,610
since I want to focus on the Next.js features,
9
00:00:28,610 --> 00:00:30,773
not on this concrete example.
10
00:00:31,650 --> 00:00:35,550
So here, the description is this is product one.
11
00:00:35,550 --> 00:00:38,510
It's one extra JSON key added here.
12
00:00:38,510 --> 00:00:42,420
And on the second product, it's this is product two.
13
00:00:42,420 --> 00:00:44,100
And you might be able to imagine
14
00:00:44,100 --> 00:00:46,460
what it will be on the third product.
15
00:00:46,460 --> 00:00:48,403
Yes, this is product three.
16
00:00:49,290 --> 00:00:53,840
Now the idea could be that on the index.js file
17
00:00:53,840 --> 00:00:55,770
we render a list of products,
18
00:00:55,770 --> 00:00:58,180
and every product is a clickable link,
19
00:00:58,180 --> 00:01:00,910
which takes us to a detail page
20
00:01:00,910 --> 00:01:04,069
where we then also see the description of the product.
21
00:01:04,069 --> 00:01:06,380
So similar to what we built before
22
00:01:06,380 --> 00:01:08,870
in our project with the events,
23
00:01:08,870 --> 00:01:11,823
we have a detail page for the products.
24
00:01:12,740 --> 00:01:15,090
And for this, we can of course, add a new page
25
00:01:15,090 --> 00:01:18,220
with a dynamic segment between square brackets.
26
00:01:18,220 --> 00:01:21,870
And here we could name this PID, for product ID,
27
00:01:21,870 --> 00:01:25,760
but that identifier is up to you, dot js.
28
00:01:25,760 --> 00:01:28,450
So that's now a dynamic page.
29
00:01:28,450 --> 00:01:32,350
Alternatively, we create a folder named PID like this,
30
00:01:32,350 --> 00:01:35,340
and in there we then have an index.js file,
31
00:01:35,340 --> 00:01:37,720
but I'll stick to this setup.
32
00:01:37,720 --> 00:01:40,800
And here we could now add a component function,
33
00:01:40,800 --> 00:01:44,683
which is the product detail page, let's say.
34
00:01:45,560 --> 00:01:50,030
And the idea is, that in this component on this page,
35
00:01:50,030 --> 00:01:52,560
we show the product details.
36
00:01:52,560 --> 00:01:56,340
So to keep this simple, I just want to return,
37
00:01:56,340 --> 00:02:00,600
let's say a fragment here, imported from React.
38
00:02:00,600 --> 00:02:02,940
And there I then have an H1 tag
39
00:02:02,940 --> 00:02:05,210
with the title of the product,
40
00:02:05,210 --> 00:02:08,919
and below that, a paragraph with the description.
41
00:02:08,919 --> 00:02:11,870
But that data should now be fetched
42
00:02:11,870 --> 00:02:15,380
from the dummy backend JSON file as well.
43
00:02:15,380 --> 00:02:17,340
Now again, of course, we could write
44
00:02:17,340 --> 00:02:20,110
standard React code here, so to say,
45
00:02:20,110 --> 00:02:23,515
and use useEffect imported from React
46
00:02:23,515 --> 00:02:27,260
to send a HTTP request to some server
47
00:02:27,260 --> 00:02:30,460
which might provide this product data.
48
00:02:30,460 --> 00:02:32,680
But then we're back in the world where
49
00:02:32,680 --> 00:02:37,680
that data is not there when this page is initially rendered.
50
00:02:37,900 --> 00:02:40,800
So search engines still wouldn't see it,
51
00:02:40,800 --> 00:02:42,993
so that's not what we'll do here.
52
00:02:44,050 --> 00:02:45,770
Instead, what we will do here
53
00:02:45,770 --> 00:02:48,760
is we will again use
54
00:02:48,760 --> 00:02:51,250
this async prop function.
55
00:02:51,250 --> 00:02:54,893
So we'll export this async function getStaticProps.
56
00:02:56,200 --> 00:02:59,170
This function is again a function we can use here,
57
00:02:59,170 --> 00:03:00,640
and here we then, again,
58
00:03:00,640 --> 00:03:03,510
want to reach out to the backend JSON file,
59
00:03:03,510 --> 00:03:06,670
but now instead of reading
60
00:03:06,670 --> 00:03:09,930
the entire file and returning all products,
61
00:03:09,930 --> 00:03:12,510
I want to read the file and only return
62
00:03:12,510 --> 00:03:14,640
one product from that file.
63
00:03:14,640 --> 00:03:17,050
That will be the difference.
64
00:03:17,050 --> 00:03:19,260
And therefore of course we need to know
65
00:03:19,260 --> 00:03:22,210
which product should be returned here.
66
00:03:22,210 --> 00:03:24,370
And of course, that's something we can determine
67
00:03:24,370 --> 00:03:27,333
by looking at the concrete value, which is in the URL.
68
00:03:28,220 --> 00:03:32,320
So to concrete value for this PID key here.
69
00:03:32,320 --> 00:03:34,760
That's where does context parameter again
70
00:03:34,760 --> 00:03:38,460
becomes important because I did briefly mention before
71
00:03:38,460 --> 00:03:41,180
that we can use this context parameter,
72
00:03:41,180 --> 00:03:44,440
which is exposed to us buying Next.js,
73
00:03:44,440 --> 00:03:48,000
to get hold of the concrete param values.
74
00:03:48,000 --> 00:03:51,910
So the concrete values for these dynamic segments
75
00:03:51,910 --> 00:03:53,063
in our paths.
76
00:03:54,290 --> 00:03:57,030
We do get access to that by having a look
77
00:03:57,030 --> 00:04:00,750
at the params key in context.
78
00:04:00,750 --> 00:04:03,150
Now that's not a name I came up with,
79
00:04:03,150 --> 00:04:05,430
instead, that is one of the properties
80
00:04:05,430 --> 00:04:07,720
exposed by this context object
81
00:04:07,720 --> 00:04:10,720
which is given to you by Next.js.
82
00:04:10,720 --> 00:04:15,410
And params is an object full of key value pairs
83
00:04:15,410 --> 00:04:18,370
where the keys are the identifiers
84
00:04:18,370 --> 00:04:21,029
for the dynamic path segments.
85
00:04:21,029 --> 00:04:23,120
So in this case, PID,
86
00:04:23,120 --> 00:04:26,900
which is the only dynamic parameter of this page here
87
00:04:26,900 --> 00:04:29,670
and the values are the concrete values
88
00:04:29,670 --> 00:04:31,120
that were entered in the URL.
89
00:04:32,660 --> 00:04:35,450
So here I then get my product ID
90
00:04:35,450 --> 00:04:37,690
by accessing params.pid.
91
00:04:37,690 --> 00:04:40,743
PID because that's what I picked here on the file name.
92
00:04:41,880 --> 00:04:44,960
Now, one quick note about extracting the params here
93
00:04:44,960 --> 00:04:46,820
to avoid confusion.
94
00:04:46,820 --> 00:04:50,163
Of course, you can also extract params
95
00:04:50,163 --> 00:04:51,830
through the use router hook
96
00:04:51,830 --> 00:04:53,850
inside of the component function.
97
00:04:53,850 --> 00:04:56,850
That's what we did before in this course.
98
00:04:56,850 --> 00:04:59,270
We got access to that router object
99
00:04:59,270 --> 00:05:00,720
with the useRouter hook,
100
00:05:00,720 --> 00:05:04,910
and we extracted params with router.query.
101
00:05:04,910 --> 00:05:08,380
Now there is a difference between extracting params
102
00:05:08,380 --> 00:05:12,330
in the component function and the getStaticProps.
103
00:05:12,330 --> 00:05:16,800
When we extract these params in the component function,
104
00:05:16,800 --> 00:05:19,050
we can use them inside of the component,
105
00:05:19,050 --> 00:05:22,540
for example to use that extracted ID
106
00:05:22,540 --> 00:05:25,030
to send a request to some backend server
107
00:05:25,030 --> 00:05:26,700
to fetch data from there,
108
00:05:26,700 --> 00:05:31,370
but that would then only happen in the browser.
109
00:05:31,370 --> 00:05:33,930
If you want to pre-render a page
110
00:05:33,930 --> 00:05:36,090
with help of getStaticProps,
111
00:05:36,090 --> 00:05:38,230
which we use to prepare the data
112
00:05:38,230 --> 00:05:40,100
for pre-rendering the page,
113
00:05:40,100 --> 00:05:42,320
then this happens on the server.
114
00:05:42,320 --> 00:05:45,067
And as I explained, getStaticProps runs before
115
00:05:45,067 --> 00:05:46,950
the component function runs.
116
00:05:46,950 --> 00:05:48,730
It needs to run before that
117
00:05:48,730 --> 00:05:50,290
because the component function
118
00:05:50,290 --> 00:05:53,333
is then executed to pre-render the page.
119
00:05:54,190 --> 00:05:57,880
So if you plan on preparing a page on the server
120
00:05:57,880 --> 00:06:01,340
or during the build process with getStaticProps,
121
00:06:01,340 --> 00:06:04,300
then you need to get access to the params,
122
00:06:04,300 --> 00:06:07,400
so to that dynamic path segment
123
00:06:07,400 --> 00:06:09,670
inside of getStaticProps
124
00:06:09,670 --> 00:06:12,100
so that you can use the param data here
125
00:06:12,100 --> 00:06:15,470
to prepare the data for the component.
126
00:06:15,470 --> 00:06:19,000
Then we don't need to extract that dynamic segment
127
00:06:19,000 --> 00:06:20,620
in the component function
128
00:06:20,620 --> 00:06:23,490
unless we also need it there for some reason.
129
00:06:23,490 --> 00:06:25,140
But for preparing the data,
130
00:06:25,140 --> 00:06:27,243
we then want to do that in getStaticProps.
131
00:06:28,530 --> 00:06:30,890
And now with that, we could reach out
132
00:06:30,890 --> 00:06:34,540
to our file, to the dummy backend JSON file,
133
00:06:34,540 --> 00:06:38,093
and try to read that product with that ID.
134
00:06:39,060 --> 00:06:43,300
So for this I'll briefly copy that code from index.js,
135
00:06:43,300 --> 00:06:47,820
where I get access to this dummy backend JSON file,
136
00:06:47,820 --> 00:06:51,220
and I'll therefore also grab those imports here
137
00:06:51,220 --> 00:06:54,440
and add them to pid.js
138
00:06:54,440 --> 00:06:55,363
like this.
139
00:06:57,130 --> 00:06:59,360
And now that we got hold of this file,
140
00:06:59,360 --> 00:07:01,680
I just want to filter my data,
141
00:07:01,680 --> 00:07:04,060
the products in there, to be precise
142
00:07:04,060 --> 00:07:06,183
for a product with this ID.
143
00:07:07,260 --> 00:07:09,310
So here I'll then get my product
144
00:07:09,310 --> 00:07:11,280
by reaching out to data.products
145
00:07:11,280 --> 00:07:13,350
and calling find there,
146
00:07:13,350 --> 00:07:15,330
and then we pass a function to find
147
00:07:15,330 --> 00:07:18,720
which is executed on every product in that array.
148
00:07:18,720 --> 00:07:20,240
And we want to return true here
149
00:07:20,240 --> 00:07:21,780
if the ID of the product
150
00:07:21,780 --> 00:07:24,830
we're currently looking at in that array
151
00:07:24,830 --> 00:07:26,830
is equal to the product ID
152
00:07:26,830 --> 00:07:29,170
we got here from our parameters.
153
00:07:29,170 --> 00:07:31,730
And if that is equal, we know that's the product
154
00:07:31,730 --> 00:07:34,330
we need for this component.
155
00:07:34,330 --> 00:07:37,690
So then here, at the end of getStaticProps,
156
00:07:37,690 --> 00:07:41,700
we return an object with the props key,
157
00:07:41,700 --> 00:07:46,700
and here I then set my loaded product, let's say,
158
00:07:46,810 --> 00:07:49,163
equal to the product fetched here.
159
00:07:50,530 --> 00:07:53,510
Now there is a load of product props available,
160
00:07:53,510 --> 00:07:55,890
inside of the product detail page.
161
00:07:55,890 --> 00:07:58,090
So here we can extract this,
162
00:07:58,090 --> 00:08:01,000
maybe again with object de-structuring,
163
00:08:01,000 --> 00:08:02,830
we can get this from the props,
164
00:08:02,830 --> 00:08:05,480
which we should accept therefore,
165
00:08:05,480 --> 00:08:07,590
and then it's this loaded product
166
00:08:07,590 --> 00:08:12,510
from which we can read the title and the description.
167
00:08:12,510 --> 00:08:16,683
So here it's then loadedProduct.description.
168
00:08:18,460 --> 00:08:20,690
Now, in order to test this,
169
00:08:20,690 --> 00:08:24,470
we need to make sure we can go to this detail page.
170
00:08:24,470 --> 00:08:26,750
And then from the index.js file,
171
00:08:26,750 --> 00:08:30,180
I will wrap the text ends of the list item
172
00:08:30,180 --> 00:08:32,470
with the link component,
173
00:08:32,470 --> 00:08:35,720
which, of course, needs to be imported again
174
00:08:35,720 --> 00:08:40,210
from next/link, so that still needs to be imported.
175
00:08:40,210 --> 00:08:44,300
Then I move the product title between those link tags,
176
00:08:44,300 --> 00:08:47,930
and then href is set to a dynamic value,
177
00:08:47,930 --> 00:08:50,690
which I construct with a template literal,
178
00:08:50,690 --> 00:08:53,270
where I want to go to slash
179
00:08:53,270 --> 00:08:57,923
and then inject the product ID here.
180
00:08:59,590 --> 00:09:01,990
And then with that, if we now save all,
181
00:09:01,990 --> 00:09:03,640
we've got clickable links here,
182
00:09:03,640 --> 00:09:05,680
and if I click on a link,
183
00:09:05,680 --> 00:09:07,240
I get an error.
184
00:09:07,240 --> 00:09:10,200
getStaticPaths is required.
185
00:09:10,200 --> 00:09:12,420
Now that is an expected error,
186
00:09:12,420 --> 00:09:14,140
and it's an important one.
187
00:09:14,140 --> 00:09:15,930
So let's understand what it does,
188
00:09:15,930 --> 00:09:17,530
but before we do that,
189
00:09:17,530 --> 00:09:20,530
in the next lecture, I again want to emphasize
190
00:09:20,530 --> 00:09:23,800
that the code here is generally correct.
191
00:09:23,800 --> 00:09:27,240
We use params to get access to the concrete values
192
00:09:27,240 --> 00:09:29,050
encoded in the URL,
193
00:09:29,050 --> 00:09:32,060
and we can then use that extracted data
194
00:09:32,060 --> 00:09:34,950
to fetch a specific piece of data
195
00:09:34,950 --> 00:09:37,410
and expose this to the component.
196
00:09:37,410 --> 00:09:39,990
So this is not wrong,
197
00:09:39,990 --> 00:09:41,780
and still we have this problem.
198
00:09:41,780 --> 00:09:44,523
So let's understand where this is coming from.
15215
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.