1
00:00:02,000 --> 00:00:03,000
So let's solve this error

2
00:00:03,000 --> 00:00:06,000
with the getStaticPaths function.

3
00:00:06,000 --> 00:00:09,000
For this in our pid.js file,

4
00:00:09,000 --> 00:00:12,000
I simply export another function.

5
00:00:12,000 --> 00:00:17,000
Another async function called getStaticPaths.

6
00:00:17,000 --> 00:00:19,000
And just like getStaticProps,

7
00:00:19,000 --> 00:00:22,000
you must make sure that you have no typo in there

8
00:00:22,000 --> 00:00:26,000
because Next.js will look for this function specifically.

9
00:00:27,000 --> 00:00:29,000
Now the goal of this function

10
00:00:29,000 --> 00:00:34,000
is to tell Next.js which instances of this dynamic page

11
00:00:35,000 --> 00:00:37,000
should be generated.

12
00:00:37,000 --> 00:00:40,000
Therefore, this should return an object,

13
00:00:40,000 --> 00:00:42,000
just as getStaticProps does,

14
00:00:42,000 --> 00:00:45,000
but an object with different kinds of values.

15
00:00:45,000 --> 00:00:49,000
An object where you have a paths key.

16
00:00:49,000 --> 00:00:53,000
And that's now an array, an array full of objects.

17
00:00:53,000 --> 00:00:57,000
So that is a given structure, which you must return here.

18
00:00:57,000 --> 00:01:01,000
Now in this object, you must add a params key now,

19
00:01:01,000 --> 00:01:03,000
and that holds another object

20
00:01:03,000 --> 00:01:06,000
where you have a bunch of key value pairs

21
00:01:06,000 --> 00:01:08,000
where the keys are all the different

22
00:01:08,000 --> 00:01:12,000
dynamic segment identifiers that might lead to this page.

23
00:01:12,000 --> 00:01:15,000
If that would be nested deeper in a folder

24
00:01:15,000 --> 00:01:17,000
where the folder name is also dynamic,

25
00:01:17,000 --> 00:01:20,000
you could have multiple identifiers.

26
00:01:20,000 --> 00:01:21,000
Here it's only one.

27
00:01:21,000 --> 00:01:25,000
So pid, and the values are then the concrete values

28
00:01:25,000 --> 00:01:27,000
for which this page should be generated.

29
00:01:28,000 --> 00:01:29,000
So here, for example,

30
00:01:29,000 --> 00:01:33,000
we know that we want to generate this page three times

31
00:01:33,000 --> 00:01:35,000
for p one, p two, and p three

32
00:01:35,000 --> 00:01:40,000
as values for this dynamic page identifier here.

33
00:01:40,000 --> 00:01:43,000
And therefore I'll set pid here to p one.

34
00:01:43,000 --> 00:01:46,000
And then I will repeat that.

35
00:01:46,000 --> 00:01:49,000
So now we just create another object

36
00:01:49,000 --> 00:01:54,000
where params is set to another object with pid p two.

37
00:01:55,000 --> 00:01:58,000
And we now repeat this a third time here.

38
00:02:00,000 --> 00:02:03,000
So another object where params is then set

39
00:02:03,000 --> 00:02:06,000
to p three, like this.

40
00:02:08,000 --> 00:02:13,000
Now this tells Next.js that this dynamic page here

41
00:02:13,000 --> 00:02:18,000
should be pre-generated three times with these three values

42
00:02:18,000 --> 00:02:22,000
as a value for this dynamic segment identifier.

43
00:02:22,000 --> 00:02:27,000
And then Next.js will call getStaticProps three times

44
00:02:27,000 --> 00:02:29,000
for these different ideas.

45
00:02:29,000 --> 00:02:32,000
And we then can extract that ID like this

46
00:02:32,000 --> 00:02:33,000
inside of this function.

47
00:02:34,000 --> 00:02:35,000
Now for this to work,

48
00:02:35,000 --> 00:02:39,000
we also need to add another key next to paths,

49
00:02:39,000 --> 00:02:41,000
and that's the fallback key,

50
00:02:41,000 --> 00:02:45,000
which for the moment should be set to false.

51
00:02:45,000 --> 00:02:46,000
I'll come back to that later.

52
00:02:46,000 --> 00:02:48,000
For the moment, set it to false.

53
00:02:48,000 --> 00:02:51,000
And then if you save everything, you will see

54
00:02:51,000 --> 00:02:55,000
that if you will load local host 3000 slash p two,

55
00:02:55,000 --> 00:02:58,000
for example, you have the Product Two page.

56
00:02:58,000 --> 00:03:00,000
If I go back to the starting page

57
00:03:00,000 --> 00:03:02,000
and I click on product three,

58
00:03:02,000 --> 00:03:04,000
I have product three data here.

59
00:03:04,000 --> 00:03:08,000
And now that is displayed correctly and successfully

60
00:03:08,000 --> 00:03:13,000
because it was pre-generated successfully by Next.js.

61
00:03:13,000 --> 00:03:16,000
And therefore getStaticPaths is required

62
00:03:16,000 --> 00:03:20,000
to tell Next.js which concrete instances

63
00:03:20,000 --> 00:03:24,000
of this dynamic page must be pre-generated.