1
00:00:02,000 --> 00:00:04,000
Now the starting page is working.

2
00:00:04,000 --> 00:00:07,000
What about the event detail page here?

3
00:00:07,000 --> 00:00:10,000
This page currently still fetches it's data

4
00:00:10,000 --> 00:00:13,000
from the dummy-data file.

5
00:00:13,000 --> 00:00:16,000
It's this eventId this dynamic page here.

6
00:00:16,000 --> 00:00:17,000
And of course here

7
00:00:17,000 --> 00:00:21,000
we now also want to get our concrete event

8
00:00:21,000 --> 00:00:24,000
the individual event for which we wanna display data

9
00:00:24,000 --> 00:00:28,000
we wanna get that from our firebase backend.

10
00:00:29,000 --> 00:00:33,000
Now for this, first of all, we can go to dummy-data

11
00:00:33,000 --> 00:00:36,000
and copy the getEventById function

12
00:00:36,000 --> 00:00:41,000
and add this to the api-utiljs file.

13
00:00:41,000 --> 00:00:45,000
Export it there but turn it into an async function

14
00:00:45,000 --> 00:00:47,000
and instead of DUMMY_EVENTS here

15
00:00:47,000 --> 00:00:48,000
we again wanna use AllEvents.

16
00:00:49,000 --> 00:00:52,000
So just as in getfeaturedevents,

17
00:00:52,000 --> 00:00:55,000
I'll get access to all events await this

18
00:00:55,000 --> 00:00:58,000
and then find my single event on the,

19
00:00:58,000 --> 00:01:00,000
well, overall events which I got here.

20
00:01:01,000 --> 00:01:03,000
Now that's step one.

21
00:01:03,000 --> 00:01:08,000
Step two is to use that in the dynamic event ID page.

22
00:01:08,000 --> 00:01:09,000
And again, the question is

23
00:01:09,000 --> 00:01:12,000
how do we wanna fetch the data?

24
00:01:12,000 --> 00:01:15,000
Now we could fetch it on the client side

25
00:01:15,000 --> 00:01:17,000
but that wouldn't make more sense here

26
00:01:17,000 --> 00:01:19,000
than it does on the homepage.

27
00:01:19,000 --> 00:01:22,000
It's still unlikely that it changes a lot.

28
00:01:22,000 --> 00:01:27,000
And this page for an individual event is even more important

29
00:01:28,000 --> 00:01:31,000
when it comes to search engines than the starting page.

30
00:01:31,000 --> 00:01:33,000
After all it's the single event page

31
00:01:33,000 --> 00:01:37,000
that has all the details for an event.

32
00:01:37,000 --> 00:01:39,000
So this should absolutely be crawlable.

33
00:01:39,000 --> 00:01:42,000
We definitely wanna have some data on this page

34
00:01:42,000 --> 00:01:45,000
right from the start.

35
00:01:45,000 --> 00:01:46,000
So therefore here,

36
00:01:46,000 --> 00:01:51,000
I definitely also want to pre-render this page with data.

37
00:01:51,000 --> 00:01:54,000
Again, the question is static generation

38
00:01:54,000 --> 00:01:56,000
with get static props

39
00:01:56,000 --> 00:01:59,000
or server-side rendering with get service props.

40
00:01:59,000 --> 00:02:04,000
And as often the answer probably is get static props.

41
00:02:05,000 --> 00:02:08,000
Because this again is not really a page

42
00:02:08,000 --> 00:02:11,000
where we need users specific data

43
00:02:11,000 --> 00:02:15,000
which changes all the time or anything like that.

44
00:02:15,000 --> 00:02:18,000
So, pre-generating, it sounds good to me.

45
00:02:18,000 --> 00:02:22,000
So in this event, ID page here in this page file

46
00:02:22,000 --> 00:02:26,000
we therefore also wanna export the async

47
00:02:26,000 --> 00:02:29,000
getStaticProps function again.

48
00:02:30,000 --> 00:02:33,000
Here however, we'll need the context

49
00:02:33,000 --> 00:02:34,000
because we'll need to know

50
00:02:34,000 --> 00:02:39,000
for which specific event Id we wanna load the event data.

51
00:02:40,000 --> 00:02:44,000
So we can get the event ID from context

52
00:02:44,000 --> 00:02:49,000
and they are the params and then their event Id

53
00:02:49,000 --> 00:02:53,000
because this here is the identifier

54
00:02:53,000 --> 00:02:56,000
I encoded in the file name.

55
00:02:56,000 --> 00:02:58,000
This gives us access to the event Id.

56
00:02:58,000 --> 00:03:00,000
Once we have the event Id,

57
00:03:00,000 --> 00:03:02,000
we wanna fetch these single event

58
00:03:02,000 --> 00:03:06,000
and therefore I remove the import of getEventById

59
00:03:06,000 --> 00:03:08,000
from dummy-data

60
00:03:08,000 --> 00:03:13,000
and instead import getEventsById from going up one level

61
00:03:15,000 --> 00:03:19,000
and another level helpers/api-util.

62
00:03:19,000 --> 00:03:21,000
So from this api-util file,

63
00:03:21,000 --> 00:03:24,000
which sends requests to Firebase.

64
00:03:25,000 --> 00:03:27,000
And now we wanna use this in getStaticProps

65
00:03:27,000 --> 00:03:30,000
to get that single event.

66
00:03:30,000 --> 00:03:33,000
For this we await getEventById

67
00:03:33,000 --> 00:03:36,000
because that's an async function returning a promise

68
00:03:36,000 --> 00:03:40,000
and we still pass the event Id to that function.

69
00:03:40,000 --> 00:03:44,000
And then here in the end we'll get that event

70
00:03:44,000 --> 00:03:45,000
for which we're looking.

71
00:03:46,000 --> 00:03:47,000
Now, once we get to that,

72
00:03:47,000 --> 00:03:52,000
we can return our object as we always do with the props key

73
00:03:52,000 --> 00:03:56,000
and then there, my props object will have an event

74
00:03:56,000 --> 00:04:00,000
or selected event key totally up to you

75
00:04:00,000 --> 00:04:03,000
which holds that single event, which was identified here.

76
00:04:05,000 --> 00:04:08,000
So now inside of my component function

77
00:04:08,000 --> 00:04:13,000
we can now work with that selected event prop.

78
00:04:13,000 --> 00:04:16,000
So we should accept props here,

79
00:04:16,000 --> 00:04:18,000
and then my event here,

80
00:04:18,000 --> 00:04:20,000
which I use throughout this component

81
00:04:20,000 --> 00:04:23,000
is actually props.selected event.

82
00:04:25,000 --> 00:04:27,000
Now, in this component function

83
00:04:27,000 --> 00:04:30,000
we now no longer need to use the router,

84
00:04:30,000 --> 00:04:34,000
they useRouter hook because we no longer need access

85
00:04:34,000 --> 00:04:36,000
to the event Id in there

86
00:04:36,000 --> 00:04:39,000
because data fetching doesn't happen

87
00:04:39,000 --> 00:04:41,000
inside of this component function anymore.

88
00:04:41,000 --> 00:04:46,000
So the concrete event Id doesn't matter to us here,

89
00:04:46,000 --> 00:04:47,000
and if it would,

90
00:04:47,000 --> 00:04:49,000
we could get it from this selected event prop

91
00:04:49,000 --> 00:04:54,000
because that holds the entire event, which we identified.

92
00:04:54,000 --> 00:04:56,000
So we no longer need useRouter here

93
00:04:56,000 --> 00:04:59,000
and we can therefore get rid of the import of course.

94
00:05:00,000 --> 00:05:03,000
Now with that, it wouldn't work though.

95
00:05:03,000 --> 00:05:05,000
And do you remember why?

96
00:05:06,000 --> 00:05:09,000
Because this is a dynamic page

97
00:05:09,000 --> 00:05:13,000
and there is an infinite amount of possible pages

98
00:05:13,000 --> 00:05:14,000
that could be generated.

99
00:05:14,000 --> 00:05:19,000
Next.js doesn't know which event Ids it should pre generate.

100
00:05:20,000 --> 00:05:21,000
And as a developer,

101
00:05:21,000 --> 00:05:24,000
we typically also don't know that in advance.

102
00:05:24,000 --> 00:05:26,000
If we have a dynamic page

103
00:05:26,000 --> 00:05:29,000
maybe with user generated content,

104
00:05:29,000 --> 00:05:32,000
then as a developer, we also can't anticipate

105
00:05:32,000 --> 00:05:35,000
which Ids we'll eventually have.

106
00:05:35,000 --> 00:05:39,000
That's why we need another function here.

107
00:05:39,000 --> 00:05:43,000
We need to also export another async function,

108
00:05:43,000 --> 00:05:46,000
the getStaticPaths function.

109
00:05:47,000 --> 00:05:52,000
This function will tell Next.js for which parameter values.

110
00:05:53,000 --> 00:05:57,000
So for which event Ids, it should pre-render this page

111
00:05:57,000 --> 00:06:00,000
and for which Ids, it shoould therefore call

112
00:06:00,000 --> 00:06:03,000
getStaticProps and this component function.

113
00:06:04,000 --> 00:06:09,000
For this in getStaticPaths, we have to return an object,

114
00:06:09,000 --> 00:06:13,000
an object with a paths key

115
00:06:14,000 --> 00:06:16,000
which holds an array full of objects

116
00:06:16,000 --> 00:06:20,000
where we specify our param values.

117
00:06:20,000 --> 00:06:24,000
So the first page which we wanna generate for example,

118
00:06:24,000 --> 00:06:29,000
should have a value for the event Id param of e1

119
00:06:29,000 --> 00:06:31,000
that's something we could add here.

120
00:06:31,000 --> 00:06:35,000
And now this single page for the event with e1 as an Id,

121
00:06:35,000 --> 00:06:37,000
would be pre-generated.

122
00:06:37,000 --> 00:06:38,000
But as I just said,

123
00:06:38,000 --> 00:06:41,000
we typically don't know all Ids in advance.

124
00:06:41,000 --> 00:06:44,000
So that's typically not what we wanna do.

125
00:06:44,000 --> 00:06:48,000
Instead, we wanna fetch the event Ids here

126
00:06:48,000 --> 00:06:53,000
dynamically as well, and derive this pops array dynamically.

127
00:06:54,000 --> 00:06:55,000
So for this, what we can do

128
00:06:55,000 --> 00:07:00,000
is we can go to api-util and use, getAllEvents,

129
00:07:00,000 --> 00:07:01,000
to get all events,

130
00:07:01,000 --> 00:07:04,000
then extract their Ids

131
00:07:04,000 --> 00:07:07,000
and derive the to be generated paths from that.

132
00:07:09,000 --> 00:07:13,000
So for this, I'll go back here to event Id

133
00:07:13,000 --> 00:07:16,000
and from the helpers/api-util file,

134
00:07:16,000 --> 00:07:19,000
I will also import getAllEvents.

135
00:07:20,000 --> 00:07:22,000
And now here in getStaticPaths,

136
00:07:22,000 --> 00:07:27,000
I will have all my events here by a waiting, getAllEvents

137
00:07:28,000 --> 00:07:32,000
and then all construct my paths array

138
00:07:32,000 --> 00:07:37,000
by taking my events and mapping this array of events

139
00:07:37,000 --> 00:07:42,000
into an array of objects

140
00:07:42,000 --> 00:07:45,000
where every object has a params key

141
00:07:45,000 --> 00:07:47,000
which holds another object

142
00:07:47,000 --> 00:07:52,000
where I then set the event Id to events.Id event.

143
00:07:52,000 --> 00:07:54,000
Event is the single event

144
00:07:54,000 --> 00:07:57,000
for which we're going through that events array here.

145
00:07:58,000 --> 00:08:03,000
So now paths is exactly the kind of array we need

146
00:08:03,000 --> 00:08:06,000
and hence I'll set paths: paths here.

147
00:08:08,000 --> 00:08:11,000
With that if we save this all,

148
00:08:11,000 --> 00:08:16,000
if we reload this events page for event e2,

149
00:08:17,000 --> 00:08:20,000
we get an error regarding the fallback key.

150
00:08:20,000 --> 00:08:25,000
And you might remember that we need to add this fallback key

151
00:08:25,000 --> 00:08:27,000
to let Next.js know

152
00:08:27,000 --> 00:08:31,000
if there are more possible event Id values

153
00:08:31,000 --> 00:08:34,000
which we did not pre generate here.

154
00:08:34,000 --> 00:08:36,000
So which it should then maybe generate dynamically

155
00:08:36,000 --> 00:08:41,000
on the fly, or if we did specify all possible paths here.

156
00:08:42,000 --> 00:08:45,000
Now here, I did specify all paths

157
00:08:45,000 --> 00:08:48,000
so we can set fall back to false

158
00:08:48,000 --> 00:08:49,000
letting Next.js know

159
00:08:49,000 --> 00:08:53,000
that if we try to load this page for an unknown Id,

160
00:08:53,000 --> 00:08:55,000
it should show the 404 page.

161
00:08:56,000 --> 00:09:00,000
And with that, if we set this and reload again,

162
00:09:00,000 --> 00:09:03,000
now it correctly loads the page for e2

163
00:09:03,000 --> 00:09:07,000
and that works for the April event as well.

164
00:09:07,000 --> 00:09:11,000
Now, if I try e5, which is an invalid Id,

165
00:09:11,000 --> 00:09:15,000
I get the 404 page instead, which also makes sense.

166
00:09:16,000 --> 00:09:20,000
So with that we're also handling this dynamic page

167
00:09:20,000 --> 00:09:22,000
successfully here.

168
00:09:22,000 --> 00:09:25,000
Before we now also dive into the slug page

169
00:09:25,000 --> 00:09:28,000
and this index page here for all events,

170
00:09:28,000 --> 00:09:32,000
before we do that, let's pause for a second

171
00:09:32,000 --> 00:09:35,000
and think about the two pages we worked on.

172
00:09:35,000 --> 00:09:38,000
Index.js here on the root level of the pages folder

173
00:09:38,000 --> 00:09:41,000
and dynamic event Id page.

174
00:09:41,000 --> 00:09:44,000
Maybe there's something we can optimize

175
00:09:44,000 --> 00:09:48,000
or where we could at least consider optimizations.