Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,080 --> 00:00:05,380
Now before we explore more static functions
2
00:00:05,380 --> 00:00:07,230
next.js offers to us.
3
00:00:07,230 --> 00:00:09,020
And when we need them,
4
00:00:09,020 --> 00:00:12,550
let's take another closer look at getStaticProps.
5
00:00:12,550 --> 00:00:16,020
On this slide you see that I added a parameter
6
00:00:16,020 --> 00:00:18,280
called context there.
7
00:00:18,280 --> 00:00:21,160
Because indeed this function
8
00:00:21,160 --> 00:00:25,840
which is called by next.js receives an argument.
9
00:00:25,840 --> 00:00:28,560
We just haven't used it this far.
10
00:00:28,560 --> 00:00:32,619
But we do actually get an object here as our argument,
11
00:00:32,619 --> 00:00:37,620
as a parameter with some extra information about this page
12
00:00:38,450 --> 00:00:41,503
when it's executed by next.js.
13
00:00:41,503 --> 00:00:45,170
And for example, we would get any dynamic params,
14
00:00:45,170 --> 00:00:48,150
any dynamic path segment values
15
00:00:48,150 --> 00:00:49,280
which we'll see in a second.
16
00:00:49,280 --> 00:00:50,990
So we'll ignore that for now.
17
00:00:50,990 --> 00:00:54,480
And we also get a couple of other pieces of information
18
00:00:54,480 --> 00:00:57,720
which at the moment though, don't matter to us.
19
00:00:57,720 --> 00:00:59,420
So let's ignore this for now.
20
00:00:59,420 --> 00:01:01,410
You will see context in action
21
00:01:01,410 --> 00:01:04,050
throughout the next lectures though.
22
00:01:04,050 --> 00:01:05,760
Instead, let's take a closer look
23
00:01:05,760 --> 00:01:08,340
at this return object again.
24
00:01:08,340 --> 00:01:11,580
In there we see props and revalidate.
25
00:01:11,580 --> 00:01:14,010
Now there are two other keys,
26
00:01:14,010 --> 00:01:16,920
which you can set on this object.
27
00:01:16,920 --> 00:01:21,210
One key is the not found key,
28
00:01:21,210 --> 00:01:23,010
which wants a Boolean value
29
00:01:23,010 --> 00:01:25,303
which is either true or false.
30
00:01:26,220 --> 00:01:27,850
If you set this to true,
31
00:01:27,850 --> 00:01:31,220
this page will return a four O four error
32
00:01:31,220 --> 00:01:34,920
and therefore render the four O four error page
33
00:01:34,920 --> 00:01:37,600
instead of the normal page.
34
00:01:37,600 --> 00:01:40,230
So if I add not found true here and save this,
35
00:01:40,230 --> 00:01:43,493
if we reload we get the four O four page.
36
00:01:44,350 --> 00:01:46,830
Now, why might we want to do that?
37
00:01:46,830 --> 00:01:50,850
Well, if the code here where you fetch data
38
00:01:50,850 --> 00:01:54,180
fails to fetch the data for whatever reason,
39
00:01:54,180 --> 00:01:56,400
then you could for example, do that.
40
00:01:56,400 --> 00:02:00,120
So we could check if data products, length,
41
00:02:00,120 --> 00:02:01,807
if that is zero.
42
00:02:01,807 --> 00:02:04,490
So if we have no products,
43
00:02:04,490 --> 00:02:07,980
then maybe we want to return an object here
44
00:02:07,980 --> 00:02:11,840
in get static props, which has not found set to true.
45
00:02:11,840 --> 00:02:14,210
So that we show the not found page
46
00:02:14,210 --> 00:02:16,940
and only if we have at least one product
47
00:02:16,940 --> 00:02:21,400
in the fetched data, we return the regular page.
48
00:02:21,400 --> 00:02:23,670
That would be a typical use case
49
00:02:23,670 --> 00:02:27,620
where you sometimes want to render the four O four page
50
00:02:27,620 --> 00:02:30,710
because you failed to fetch data.
51
00:02:30,710 --> 00:02:32,610
So if I save this and reload.
52
00:02:32,610 --> 00:02:34,440
Now I see that page again,
53
00:02:34,440 --> 00:02:36,573
because of course we do have products.
54
00:02:37,490 --> 00:02:41,533
Another key you can set is the redirect key.
55
00:02:42,372 --> 00:02:47,372
The redirect key allows you to redirect the user.
56
00:02:47,720 --> 00:02:50,680
So instead of rendering the page content,
57
00:02:50,680 --> 00:02:53,240
instead of rendering this component content
58
00:02:53,240 --> 00:02:57,080
you can redirect to another page, to another route.
59
00:02:57,080 --> 00:02:58,920
And that could also be needed
60
00:02:58,920 --> 00:03:02,160
because maybe you failed to fetch data.
61
00:03:02,160 --> 00:03:05,630
Let's say the problem is not that there is no data
62
00:03:05,630 --> 00:03:09,590
but instead you weren't able to access the database
63
00:03:09,590 --> 00:03:11,610
or anything like that.
64
00:03:11,610 --> 00:03:14,580
So if there is no data to begin with
65
00:03:14,580 --> 00:03:18,410
so not just no products, but no data in general
66
00:03:18,410 --> 00:03:21,870
then maybe you want to redirect.
67
00:03:21,870 --> 00:03:23,780
Then you can do this by returning an object
68
00:03:23,780 --> 00:03:26,910
where the redirect key is set to an object,
69
00:03:26,910 --> 00:03:30,120
where you then set a destination to some route.
70
00:03:30,120 --> 00:03:34,370
For example, to the no data route, which we don't have here,
71
00:03:34,370 --> 00:03:37,670
but which you could have in a project of yours, of course.
72
00:03:37,670 --> 00:03:41,580
And where then they have where that route would be loaded
73
00:03:41,580 --> 00:03:45,920
with a redirect status code returned by next.js
74
00:03:45,920 --> 00:03:49,570
instead of this page component.
75
00:03:49,570 --> 00:03:51,880
Now we don't need either of the two here,
76
00:03:51,880 --> 00:03:53,810
but I wanted to mention them here
77
00:03:53,810 --> 00:03:57,440
so that you are aware of these special options,
78
00:03:57,440 --> 00:04:00,000
which basically can come in handy.
79
00:04:00,000 --> 00:04:04,320
If something goes wrong with fetching your data.
80
00:04:04,320 --> 00:04:07,220
And with that, that's enough for a getStaticProps
81
00:04:07,220 --> 00:04:09,050
for this very moment.
82
00:04:09,050 --> 00:04:12,630
Let's now have a look at another very important use case
83
00:04:12,630 --> 00:04:14,540
and very important problem
84
00:04:14,540 --> 00:04:17,923
you often face in next.js projects.
6509
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.