1
00:00:02,000 --> 00:00:03,000
getStaticPaths

2
00:00:03,000 --> 00:00:05,000
is another function

3
00:00:05,000 --> 00:00:06,000
NextJS understands,

4
00:00:08,000 --> 00:00:10,000
just like getStaticProps

5
00:00:10,000 --> 00:00:12,000
and getServerSideProps.

6
00:00:12,000 --> 00:00:16,000
And getStaticPaths is a function you need to export

7
00:00:16,000 --> 00:00:18,000
in a page component file.

8
00:00:18,000 --> 00:00:21,000
If it's a dynamic page

9
00:00:21,000 --> 00:00:26,000
like we have it here and you're using getStaticProps,

10
00:00:26,000 --> 00:00:28,000
not if you're using getServerSideProps

11
00:00:28,000 --> 00:00:32,000
and not if you're using neever get static

12
00:00:32,000 --> 00:00:33,000
nor getServerSideProps

13
00:00:33,000 --> 00:00:38,000
but it is needed if you do use getStaticProps.

14
00:00:38,000 --> 00:00:42,000
So in that case, you need to export another function here

15
00:00:42,000 --> 00:00:44,000
in this page component file.

16
00:00:44,000 --> 00:00:48,000
And that's the getStaticPaths function.

17
00:00:48,000 --> 00:00:50,000
And this can also be a async function

18
00:00:50,000 --> 00:00:54,000
so that you can use a single weight in there.

19
00:00:54,000 --> 00:00:58,000
Now what's the deal with getStaticPaths though.

20
00:00:58,000 --> 00:01:01,000
To understand it, let's again think about the fact

21
00:01:01,000 --> 00:01:04,000
that with getStaticProps

22
00:01:04,000 --> 00:01:08,000
a page is pre-generated during the build process.

23
00:01:08,000 --> 00:01:10,000
Now, what does this mean?

24
00:01:10,000 --> 00:01:15,000
This means that of course, NextJS needs to pre-generate

25
00:01:15,000 --> 00:01:20,000
all versions of this dynamic page in advance

26
00:01:20,000 --> 00:01:22,000
for all the supported IDs.

27
00:01:22,000 --> 00:01:26,000
Because since this is dynamic, NextJS needs to know

28
00:01:26,000 --> 00:01:31,000
for which ID values it should pre-generate the page.

29
00:01:31,000 --> 00:01:35,000
Because how would it pre-generate this page otherwise?

30
00:01:35,000 --> 00:01:38,000
We get the ID from the URL here.

31
00:01:38,000 --> 00:01:42,000
Great, but keep in mind that this is not pre-generated

32
00:01:42,000 --> 00:01:45,000
when a user visits this page with a specific value

33
00:01:45,000 --> 00:01:49,000
in the URL, but during the build process.

34
00:01:49,000 --> 00:01:53,000
So here we need to pre-generated for all the URLs,

35
00:01:53,000 --> 00:01:57,000
for all the meetup ID values users might be entering

36
00:01:57,000 --> 00:01:59,000
at runtime.

37
00:01:59,000 --> 00:02:03,000
And if they enter an ID for which we didn't pre-generate

38
00:02:03,000 --> 00:02:06,000
the page, they will see a 404 error.

39
00:02:06,000 --> 00:02:08,000
But because that is how it works,

40
00:02:08,000 --> 00:02:11,000
we need to add getStaticPaths

41
00:02:11,000 --> 00:02:13,000
which has the job of returning an object

42
00:02:13,000 --> 00:02:18,000
where we describe all the dynamic segment values.

43
00:02:18,000 --> 00:02:21,000
So all the meetup IDs in this case,

44
00:02:21,000 --> 00:02:24,000
for which this page should be pre-generated.

45
00:02:25,000 --> 00:02:28,000
Now for this, this object needs to have a paths key,

46
00:02:28,000 --> 00:02:30,000
which is an array.

47
00:02:30,000 --> 00:02:33,000
And in that array, you must have multiple objects

48
00:02:33,000 --> 00:02:37,000
one object per version of this dynamic page.

49
00:02:37,000 --> 00:02:39,000
Where this object has a parans key.

50
00:02:39,000 --> 00:02:43,000
That's a must have, which then itself again is an object

51
00:02:43,000 --> 00:02:45,000
with all the key value pairs

52
00:02:45,000 --> 00:02:47,000
that might lead to your dynamic page.

53
00:02:47,000 --> 00:02:50,000
So if you have multiple dynamic segments,

54
00:02:50,000 --> 00:02:54,000
then you would have multiple keys in this nested object.

55
00:02:54,000 --> 00:02:59,000
Here we only have meetup ID as a single dynamic segment.

56
00:02:59,000 --> 00:03:01,000
And hence here in this parans object,

57
00:03:01,000 --> 00:03:03,000
we would add a meetup ID key

58
00:03:03,000 --> 00:03:07,000
and then enter the concrete value for meetup ID

59
00:03:07,000 --> 00:03:10,000
for which this page should be pre-generated.

60
00:03:10,000 --> 00:03:13,000
And if we have multiple possible values.

61
00:03:13,000 --> 00:03:16,000
Like in this case where I have, M1 and M2

62
00:03:16,000 --> 00:03:21,000
we would return a paths array with two objects inside of it,

63
00:03:21,000 --> 00:03:24,000
where the other one uses M2 as a meetup ID.

64
00:03:26,000 --> 00:03:29,000
Now, in reality, you would of course not hard-code this

65
00:03:29,000 --> 00:03:30,000
as a developer,

66
00:03:30,000 --> 00:03:34,000
but you would also fetch your supported IDs from a database

67
00:03:34,000 --> 00:03:38,000
or from an API and generate this array dynamically.

68
00:03:38,000 --> 00:03:41,000
And we are also going to do that later,

69
00:03:41,000 --> 00:03:43,000
but for the moment let's hard-code it.

70
00:03:45,000 --> 00:03:48,000
With that, if you save that file with getStaticPaths added

71
00:03:48,000 --> 00:03:52,000
with this code and with getStaticProps

72
00:03:52,000 --> 00:03:55,000
still being in there, with that if you now reload,

73
00:03:55,000 --> 00:03:57,000
we don't get this error anymore.

74
00:03:57,000 --> 00:04:01,000
Instead we get this error regarding the fallback key

75
00:04:01,000 --> 00:04:04,000
instead of getStaticPaths.

76
00:04:04,000 --> 00:04:06,000
And that's another piece of configuration,

77
00:04:06,000 --> 00:04:09,000
which you need to add in this returned object

78
00:04:09,000 --> 00:04:12,000
next to your paths key,

79
00:04:12,000 --> 00:04:14,000
the fallback key.

80
00:04:14,000 --> 00:04:18,000
This key tells NextJS whether your paths array

81
00:04:18,000 --> 00:04:22,000
contains all supported parameter values

82
00:04:22,000 --> 00:04:24,000
or just some of them.

83
00:04:24,000 --> 00:04:28,000
If you set fall back to false,

84
00:04:28,000 --> 00:04:29,000
you say that your paths

85
00:04:29,000 --> 00:04:33,000
contains all supported meetup ID values.

86
00:04:33,000 --> 00:04:36,000
That means that if the user enters anything

87
00:04:36,000 --> 00:04:38,000
that's not supported here, for example, M3

88
00:04:40,000 --> 00:04:43,000
he or she would see a 404 error.

89
00:04:43,000 --> 00:04:46,000
If you set fall back to true on the other hand,

90
00:04:46,000 --> 00:04:48,000
NextJS would try to generate a page

91
00:04:48,000 --> 00:04:52,000
for this meetup ID dynamically on the server

92
00:04:52,000 --> 00:04:53,000
for the incoming request.

93
00:04:54,000 --> 00:04:56,000
Fall back is a nice feature

94
00:04:56,000 --> 00:04:59,000
because it allows you to pre-generate some of your pages

95
00:04:59,000 --> 00:05:02,000
for specific meetup ID values.

96
00:05:02,000 --> 00:05:07,000
For example the pages which are visited most frequently

97
00:05:07,000 --> 00:05:10,000
and then pre-generate the missing ones dynamically

98
00:05:10,000 --> 00:05:13,000
when requests for them are coming in.

99
00:05:13,000 --> 00:05:16,000
Here however, I'll set fallback to false

100
00:05:16,000 --> 00:05:21,000
to indicate that I defined all supported paths here.

101
00:05:21,000 --> 00:05:24,000
Now, if you wanna learn more about fallback and so on,

102
00:05:24,000 --> 00:05:27,000
I do cover that in greater detail in my full course.

103
00:05:27,000 --> 00:05:28,000
But the general concept

104
00:05:28,000 --> 00:05:31,000
is that we can simply define some paths

105
00:05:31,000 --> 00:05:33,000
instead of all paths.

106
00:05:33,000 --> 00:05:35,000
If we, for example, have hundreds of pages

107
00:05:35,000 --> 00:05:38,000
and we don't wanna pre-generate all of them,

108
00:05:38,000 --> 00:05:41,000
but maybe just our most popular pages.

109
00:05:42,000 --> 00:05:44,000
And therefore with fallback added now,

110
00:05:44,000 --> 00:05:46,000
if we save this again and reload,

111
00:05:46,000 --> 00:05:51,000
now we successfully load the page for this first meetup.

112
00:05:51,000 --> 00:05:53,000
If I go to M2, that also works.

113
00:05:53,000 --> 00:05:57,000
But if I enter M3, I get the default 404 page here

114
00:05:57,000 --> 00:06:00,000
because I had fallback set to false

115
00:06:00,000 --> 00:06:04,000
and M3 is not one of the supported parameters here.

116
00:06:05,000 --> 00:06:07,000
That's how this works.

117
00:06:07,000 --> 00:06:08,000
And getStaticPaths

118
00:06:08,000 --> 00:06:11,000
therefore is another important function,

119
00:06:11,000 --> 00:06:15,000
which you need in dynamic pages to tell NextJS

120
00:06:15,000 --> 00:06:17,000
for which dynamic parameter values

121
00:06:17,000 --> 00:06:20,000
this page should be pre-generated.

122
00:06:20,000 --> 00:06:24,000
And then again, getStaticProps executes for every page.

123
00:06:24,000 --> 00:06:28,000
So for every meetup ID value allows you to fetch data

124
00:06:28,000 --> 00:06:30,000
for that meetup and allows you to return props

125
00:06:30,000 --> 00:06:32,000
for that meetup.

126
00:06:32,000 --> 00:06:35,000
And as a side note here, where I locked the meetup ID

127
00:06:35,000 --> 00:06:39,000
we do see that here in this terminal.

128
00:06:39,000 --> 00:06:41,000
We don't see it in the browser,

129
00:06:41,000 --> 00:06:42,000
developer tools,

130
00:06:42,000 --> 00:06:44,000
here the console is empty

131
00:06:44,000 --> 00:06:48,000
because I mentioned that this is called the code

132
00:06:48,000 --> 00:06:52,000
instead of getStaticProps, which runs during build time.

133
00:06:52,000 --> 00:06:54,000
And when running in the development server

134
00:06:54,000 --> 00:06:57,000
it does run for every incoming request

135
00:06:57,000 --> 00:07:00,000
but only on the developer server side.

136
00:07:00,000 --> 00:07:03,000
So we only see it in the terminal of this developer server

137
00:07:03,000 --> 00:07:07,000
then, and not in the browser.

138
00:07:07,000 --> 00:07:10,000
That's how it getStaticProps works for dynamic pages

139
00:07:10,000 --> 00:07:12,000
and that's how it getStaticPaths works

140
00:07:12,000 --> 00:07:14,000
and why it is required.