1
00:00:02,000 --> 00:00:04,000
So what's up with this error.

2
00:00:04,000 --> 00:00:09,000
Now good thing is this error actually tells us the solution

3
00:00:09,000 --> 00:00:11,000
though of course, we don't really understand

4
00:00:11,000 --> 00:00:14,000
why we need that solution.

5
00:00:14,000 --> 00:00:17,000
Well, keep in mind that currently

6
00:00:17,000 --> 00:00:21,000
Next.js is pre-generating all the pages.

7
00:00:21,000 --> 00:00:25,000
And I mentioned that it would pre-generate pages by default.

8
00:00:25,000 --> 00:00:29,000
It turns out this is not the case

9
00:00:29,000 --> 00:00:32,000
if you have a dynamic page,

10
00:00:32,000 --> 00:00:36,000
so where the name of the component has such square brackets.

11
00:00:36,000 --> 00:00:40,000
If you have a dynamic segment leading to that page,

12
00:00:40,000 --> 00:00:41,000
if you have that,

13
00:00:41,000 --> 00:00:45,000
the default behavior is not to pre-generate the page.

14
00:00:45,000 --> 00:00:48,000
And why is that not the default,

15
00:00:48,000 --> 00:00:50,000
because keep in mind that technically

16
00:00:50,000 --> 00:00:55,000
for a this page, we won't just have one page,

17
00:00:55,000 --> 00:00:58,000
but multiple pages for different IDs,

18
00:00:58,000 --> 00:01:01,000
we have technically different pages

19
00:01:01,000 --> 00:01:03,000
which have kind of the same frame

20
00:01:03,000 --> 00:01:07,000
and the same general HTML content,

21
00:01:07,000 --> 00:01:09,000
but different data.

22
00:01:09,000 --> 00:01:14,000
This page can be loaded /P1/P2/P1000.

23
00:01:15,000 --> 00:01:19,000
So Next.js doesn't know in advance,

24
00:01:19,000 --> 00:01:22,000
how many pages it needs to pre-generate

25
00:01:22,000 --> 00:01:24,000
for this dynamic page.

26
00:01:24,000 --> 00:01:27,000
It doesn't know which values for PID

27
00:01:27,000 --> 00:01:30,000
will eventually be supported.

28
00:01:30,000 --> 00:01:32,000
And because it doesn't know that

29
00:01:32,000 --> 00:01:37,000
dynamic pages like this are not pre-generated by default

30
00:01:37,000 --> 00:01:39,000
instead they are always generated

31
00:01:39,000 --> 00:01:42,000
just in time on the server,

32
00:01:42,000 --> 00:01:44,000
Which is why it worked before.

33
00:01:44,000 --> 00:01:46,000
But it's now not working anymore

34
00:01:46,000 --> 00:01:48,000
because we added get static props.

35
00:01:48,000 --> 00:01:50,000
And as I mentioned,

36
00:01:50,000 --> 00:01:54,000
when you add this function to a page component file,

37
00:01:54,000 --> 00:01:58,000
then you tell Next.js that you want to pre-render

38
00:01:58,000 --> 00:02:01,000
this page in advance.

39
00:02:01,000 --> 00:02:04,000
For index.js that didn't make a difference

40
00:02:04,000 --> 00:02:07,000
there it was default anyways,

41
00:02:07,000 --> 00:02:09,000
but for this dynamic page it does make a difference

42
00:02:09,000 --> 00:02:12,000
because they it was not the default

43
00:02:12,000 --> 00:02:14,000
for the reasons mentioned

44
00:02:14,000 --> 00:02:19,000
Next.js has no chance of knowing how many pages you need

45
00:02:19,000 --> 00:02:23,000
and which concrete values of this dynamic segment you need.

46
00:02:24,000 --> 00:02:27,000
That's why for such dynamic routes,

47
00:02:27,000 --> 00:02:31,000
we need to give Next.js more information.

48
00:02:31,000 --> 00:02:35,000
We can also tell Next.js which paths.

49
00:02:35,000 --> 00:02:38,000
So which instances off a dynamic page

50
00:02:38,000 --> 00:02:41,000
should be pre-generated.

51
00:02:41,000 --> 00:02:43,000
Because here we don't just need data

52
00:02:43,000 --> 00:02:47,000
we also need to let Next.js know which ID values,

53
00:02:47,000 --> 00:02:51,000
which dynamic segment values will be available

54
00:02:51,000 --> 00:02:55,000
and for which values a page should be pre-generated.

55
00:02:55,000 --> 00:03:00,000
So that multiple instances of that page blueprint

56
00:03:00,000 --> 00:03:04,000
can be pre-generated by Next.js.

57
00:03:04,000 --> 00:03:08,000
And we do inform Next.js about this with another function

58
00:03:08,000 --> 00:03:10,000
we can add on the page.

59
00:03:10,000 --> 00:03:13,000
So another function we can add in this page file,

60
00:03:13,000 --> 00:03:17,000
and that's the getStaticPaths function,

61
00:03:17,000 --> 00:03:19,000
which also is a async.

62
00:03:19,000 --> 00:03:21,000
So where you can also use the await keyword

63
00:03:21,000 --> 00:03:24,000
and just ask get static props.

64
00:03:24,000 --> 00:03:26,000
That's a function which you can add

65
00:03:26,000 --> 00:03:29,000
to your page component files and only there.

66
00:03:29,000 --> 00:03:32,000
So not in any other component files

67
00:03:32,000 --> 00:03:37,000
and you need to export it to make Next.js aware of it.

68
00:03:37,000 --> 00:03:40,000
And now let's explore how this function works

69
00:03:40,000 --> 00:03:42,000
and how we use it.