1
00:00:00,000 --> 00:00:02,000
So, let's now build up

2
00:00:02,000 --> 00:00:04,000
on this parallel routing feature

3
00:00:04,000 --> 00:00:06,000
and make it a bit more useful.

4
00:00:06,000 --> 00:00:09,000
Because of course, if all we wanted to do

5
00:00:09,000 --> 00:00:14,000
is show two pieces of content on one at the same page,

6
00:00:14,000 --> 00:00:16,000
we could have also solved that

7
00:00:16,000 --> 00:00:20,000
by simply including all that content into one single page.

8
00:00:20,000 --> 00:00:24,000
We don't need two independent routes for that.

9
00:00:24,000 --> 00:00:29,000
But we will need that feature for what we're about to add

10
00:00:29,000 --> 00:00:30,000
to this application.

11
00:00:31,000 --> 00:00:33,000
Because now I wanna make sure

12
00:00:33,000 --> 00:00:34,000
that here in this archive area,

13
00:00:34,000 --> 00:00:39,000
we can dive deeper into our news archive by, for example,

14
00:00:39,000 --> 00:00:43,000
picking different years and by then only showing the news

15
00:00:43,000 --> 00:00:45,000
that belonged to a certain year.

16
00:00:46,000 --> 00:00:49,000
To implement this, we can go to this archive

17
00:00:49,000 --> 00:00:54,000
page.js file here, and then by adding another route folder

18
00:00:55,000 --> 00:00:58,000
next to it, because now, as I just explained,

19
00:00:58,000 --> 00:01:02,000
I wanna allow users to pick different years.

20
00:01:03,000 --> 00:01:06,000
So therefore, I wanna add a dynamic route segment here

21
00:01:06,000 --> 00:01:11,000
where we have the year that was picked as a placeholder

22
00:01:11,000 --> 00:01:15,000
and as a value that will be encoded in the URL

23
00:01:16,000 --> 00:01:19,000
so that we can show those details

24
00:01:19,000 --> 00:01:24,000
or show a list of the use items that belong to this year.

25
00:01:26,000 --> 00:01:30,000
In the page.js file one level above that,

26
00:01:30,000 --> 00:01:33,000
so the page.js file in the archive folder.

27
00:01:33,000 --> 00:01:38,000
In that file, I now want to replace this h1 element

28
00:01:38,000 --> 00:01:43,000
with a header, which has an ID of "archive-header"

29
00:01:44,000 --> 00:01:48,000
for styling purposes, where I wanna have a nav element,

30
00:01:48,000 --> 00:01:51,000
which contains an unordered list,

31
00:01:51,000 --> 00:01:55,000
which now outputs all the different years

32
00:01:55,000 --> 00:01:57,000
of the different news items we have,

33
00:01:57,000 --> 00:01:59,000
so that we can click those years

34
00:01:59,000 --> 00:02:02,000
to go to the filtered list of news.

35
00:02:02,000 --> 00:02:07,000
Now therefore, we need to find out which years exist

36
00:02:07,000 --> 00:02:08,000
in our dummy-news.

37
00:02:08,000 --> 00:02:11,000
And to simplify that process,

38
00:02:11,000 --> 00:02:15,000
I prepared a little helper file, which you find attached,

39
00:02:15,000 --> 00:02:20,000
a news.js file, which I'll add into a brand new lib folder,

40
00:02:22,000 --> 00:02:25,000
which I'll add next to the components folder,

41
00:02:25,000 --> 00:02:27,000
and it's up to you where you wanna add it

42
00:02:27,000 --> 00:02:29,000
or how you want to name it.

43
00:02:29,000 --> 00:02:32,000
But my idea is to have a folder that contains some helper,

44
00:02:32,000 --> 00:02:36,000
some utility code that's not components.

45
00:02:36,000 --> 00:02:41,000
And in that lib folder, I stored that attached news.js file.

46
00:02:42,000 --> 00:02:44,000
And in there, I simply got some functions

47
00:02:44,000 --> 00:02:47,000
that operate on the dummy-news and that, for example,

48
00:02:47,000 --> 00:02:52,000
give me all the available years in a sorted order

49
00:02:52,000 --> 00:02:56,000
that can be identified from those dummy years.

50
00:02:56,000 --> 00:02:59,000
So simply some helper code that helps us

51
00:02:59,000 --> 00:03:01,000
deal with those news.

52
00:03:02,000 --> 00:03:05,000
Back at the archive page.js file,

53
00:03:05,000 --> 00:03:10,000
we can now use that helper file to get the links

54
00:03:11,000 --> 00:03:16,000
that should be rendered by calling getAvailableNewsYears();

55
00:03:16,000 --> 00:03:18,000
which is one of those utility functions

56
00:03:18,000 --> 00:03:22,000
provided by that news file you find attached.

57
00:03:22,000 --> 00:03:27,000
So that will simply give me an array of year identifiers,

58
00:03:27,000 --> 00:03:32,000
so to say, and I'll use those to render my links here.

59
00:03:32,000 --> 00:03:33,000
Therefore, in this unordered list,

60
00:03:33,000 --> 00:03:37,000
I'll then use my links and convert these years

61
00:03:37,000 --> 00:03:40,000
to actual links with the map function

62
00:03:42,000 --> 00:03:47,000
so that for every year I output a list item here,

63
00:03:47,000 --> 00:03:51,000
which has a key of link and which inside of it

64
00:03:51,000 --> 00:03:56,000
then outputs a next link imported from next/link,

65
00:03:57,000 --> 00:03:59,000
where the link path

66
00:03:59,000 --> 00:04:03,000
is actually a dynamically constructed path

67
00:04:03,000 --> 00:04:06,000
that starts with /archive,

68
00:04:06,000 --> 00:04:10,000
but where we then have slash, and then the link value,

69
00:04:10,000 --> 00:04:12,000
so the year identifier.

70
00:04:14,000 --> 00:04:16,000
And it's also that year identifier

71
00:04:16,000 --> 00:04:20,000
that we can output here as text between the link text.

72
00:04:21,000 --> 00:04:23,000
So, that will now output such a header

73
00:04:23,000 --> 00:04:28,000
inside of the page.js file in the @archive folder.

74
00:04:28,000 --> 00:04:30,000
And therefore now if you save everything,

75
00:04:30,000 --> 00:04:33,000
you should see these years here.

76
00:04:34,000 --> 00:04:37,000
Now, if we click one of those years,

77
00:04:38,000 --> 00:04:40,000
we see that we actually get an error.

78
00:04:41,000 --> 00:04:42,000
And I'm getting that error

79
00:04:42,000 --> 00:04:47,000
because the default export in my year page.js file.

80
00:04:47,000 --> 00:04:51,000
So, in that dynamic year folder is not a React component.

81
00:04:52,000 --> 00:04:54,000
And that is true.

82
00:04:54,000 --> 00:04:57,000
In that square bracket year folder, the page.js file

83
00:04:57,000 --> 00:04:59,000
does not export anything.

84
00:04:59,000 --> 00:05:01,000
And of course, it should export something

85
00:05:01,000 --> 00:05:03,000
so that we have a page that can be displayed

86
00:05:03,000 --> 00:05:06,000
if a specific year was chosen.

87
00:05:07,000 --> 00:05:10,000
So here, I'll have my FilteredNewsPage,

88
00:05:10,000 --> 00:05:12,000
that sounds like a fitting name.

89
00:05:12,000 --> 00:05:16,000
And in there, I essentially want to output a list of news

90
00:05:16,000 --> 00:05:20,000
just as I'm doing it in my main news page.

91
00:05:20,000 --> 00:05:23,000
So, I want to have such an unordered list here,

92
00:05:23,000 --> 00:05:26,000
and hence we can actually copy that, or better,

93
00:05:26,000 --> 00:05:29,000
we can outsource it into a separate component.

94
00:05:30,000 --> 00:05:35,000
So, in a components folder, I'll add a news-list.js file,

95
00:05:35,000 --> 00:05:40,000
and export my NewsList component here.

96
00:05:42,000 --> 00:05:45,000
And I expect to get a prop named "news" here.

97
00:05:46,000 --> 00:05:49,000
And then I'll return that unordered list

98
00:05:49,000 --> 00:05:53,000
with a class of news list where I will map through my news

99
00:05:53,000 --> 00:05:55,000
to output these news items.

100
00:05:56,000 --> 00:05:59,000
And now in the main news page,

101
00:05:59,000 --> 00:06:04,000
we can replace this unordered list here with my NewsList.

102
00:06:04,000 --> 00:06:06,000
So, with this newly added component,

103
00:06:06,000 --> 00:06:08,000
which therefore also must be imported.

104
00:06:09,000 --> 00:06:12,000
And of course, there, we have to set the news prop,

105
00:06:12,000 --> 00:06:15,000
and set it to the dummy-news in this case.

106
00:06:15,000 --> 00:06:17,000
And we can get rid of that link import,

107
00:06:17,000 --> 00:06:19,000
since I'm not using that component

108
00:06:19,000 --> 00:06:21,000
in this component anymore.

109
00:06:22,000 --> 00:06:25,000
We can now also use this NewsList component

110
00:06:25,000 --> 00:06:29,000
here in this archive year page.js file.

111
00:06:30,000 --> 00:06:33,000
There, I want to output this NewsList.

112
00:06:33,000 --> 00:06:38,000
And now the news must be set to the news that are filtered

113
00:06:38,000 --> 00:06:41,000
for that year that was chosen.

114
00:06:42,000 --> 00:06:44,000
So, of course we can get access to that year

115
00:06:44,000 --> 00:06:46,000
by using the params prop,

116
00:06:46,000 --> 00:06:49,000
which we receive automatically by NextJS.

117
00:06:49,000 --> 00:06:54,000
And then here, I got my newsYear by accessing params.year.

118
00:06:56,000 --> 00:06:58,000
And of course, it's .year here

119
00:06:58,000 --> 00:07:00,000
because I chose year as an identifier

120
00:07:00,000 --> 00:07:02,000
between the square brackets.

121
00:07:03,000 --> 00:07:06,000
Now, I need to get all the news that belong to that year,

122
00:07:06,000 --> 00:07:11,000
and I added a utility function to that news.js file,

123
00:07:11,000 --> 00:07:13,000
which we stored in that lib folder

124
00:07:13,000 --> 00:07:18,000
because there you'll find the getNewsForYear function,

125
00:07:18,000 --> 00:07:21,000
which simply filters the DUMMY_NEWS

126
00:07:21,000 --> 00:07:23,000
for news that belong to the chosen year.

127
00:07:24,000 --> 00:07:27,000
And hence here, I got my news by calling getNewsForYear

128
00:07:29,000 --> 00:07:33,000
and by passing the newsYear to that function.

129
00:07:33,000 --> 00:07:36,000
And then, it's the news here that will be passed

130
00:07:36,000 --> 00:07:38,000
to the news list.

131
00:07:39,000 --> 00:07:41,000
Now in the NewsList component,

132
00:07:41,000 --> 00:07:44,000
we just also should make sure

133
00:07:44,000 --> 00:07:48,000
that we import this link component from next link again

134
00:07:48,000 --> 00:07:50,000
since we're using that component here.

135
00:07:50,000 --> 00:07:52,000
Otherwise, you'll get this error

136
00:07:52,000 --> 00:07:54,000
if you try to reload the app.

137
00:07:55,000 --> 00:07:59,000
But with this import added, if you save everything,

138
00:07:59,000 --> 00:08:01,000
you should see that if you reload,

139
00:08:01,000 --> 00:08:04,000
we now get the Not Found! page.

140
00:08:04,000 --> 00:08:08,000
And why do we get that instead of seeing the page

141
00:08:08,000 --> 00:08:10,000
with our filtered news?

142
00:08:12,000 --> 00:08:14,000
Well, we get the Not Found! page here

143
00:08:14,000 --> 00:08:19,000
when trying to view the news for the year 2024,

144
00:08:19,000 --> 00:08:24,000
because we're in a parallel route set up here,

145
00:08:24,000 --> 00:08:28,000
and that means that we're still within a layout

146
00:08:28,000 --> 00:08:32,000
that tries to render the content of two different routes

147
00:08:32,000 --> 00:08:33,000
on the same page.

148
00:08:34,000 --> 00:08:36,000
Now, I mentioned that these routes

149
00:08:36,000 --> 00:08:38,000
work independent from each other,

150
00:08:38,000 --> 00:08:43,000
and it's now in this archive route where we dove deeper,

151
00:08:44,000 --> 00:08:48,000
and where we tried to add /year

152
00:08:48,000 --> 00:08:53,000
or a concrete year after /archive.

153
00:08:53,000 --> 00:08:58,000
But since this route, this year route here in the archive

154
00:08:58,000 --> 00:09:03,000
is still rendered on the same page as this latest route,

155
00:09:03,000 --> 00:09:06,000
we now have a problem because in this latest route

156
00:09:06,000 --> 00:09:09,000
we don't support such a nested year route.

157
00:09:10,000 --> 00:09:12,000
And that's why we're getting a Not Found! error here

158
00:09:12,000 --> 00:09:16,000
because one of our two parallel routes

159
00:09:16,000 --> 00:09:18,000
did not find a fitting page

160
00:09:18,000 --> 00:09:21,000
for the path we're trying to visit.

161
00:09:22,000 --> 00:09:24,000
And that's something you must keep in mind

162
00:09:24,000 --> 00:09:26,000
when working with parallel routes.

163
00:09:26,000 --> 00:09:30,000
You must make sure that all the parallel routes

164
00:09:30,000 --> 00:09:32,000
that are shown on the same page,

165
00:09:32,000 --> 00:09:37,000
do support all the different paths you wanna support there.

166
00:09:38,000 --> 00:09:42,000
Now, of course, we could now support such a nested year

167
00:09:42,000 --> 00:09:45,000
by also adding it here like that to the latest route.

168
00:09:45,000 --> 00:09:48,000
But actually for the latest route,

169
00:09:48,000 --> 00:09:51,000
it doesn't make sense to show pages for a certain year.

170
00:09:51,000 --> 00:09:56,000
I always want to show the same latest news there instead.

171
00:09:56,000 --> 00:09:59,000
And that's why NextJS allows you

172
00:09:59,000 --> 00:10:02,000
to add a default.js file there,

173
00:10:02,000 --> 00:10:05,000
and it must be named "default."

174
00:10:07,000 --> 00:10:09,000
You can add that default.js file

175
00:10:09,000 --> 00:10:12,000
whenever you are dealing with parallel routes

176
00:10:12,000 --> 00:10:15,000
because it's that file that allows you

177
00:10:15,000 --> 00:10:19,000
to define the default fallback content

178
00:10:19,000 --> 00:10:20,000
that should be displayed

179
00:10:20,000 --> 00:10:24,000
if that route doesn't have a more specific content

180
00:10:24,000 --> 00:10:27,000
for the path that's currently loaded.

181
00:10:27,000 --> 00:10:29,000
And here in that default.js file,

182
00:10:29,000 --> 00:10:31,000
I actually wanna show the same content

183
00:10:31,000 --> 00:10:33,000
as in the page.js file.

184
00:10:33,000 --> 00:10:37,000
So, I'll copy and paste that here, and if that's the case,

185
00:10:37,000 --> 00:10:42,000
that you have the same fallback content as standard content,

186
00:10:42,000 --> 00:10:45,000
you can actually also get rid of the page.js file here

187
00:10:45,000 --> 00:10:48,000
and just have a default.js file.

188
00:10:49,000 --> 00:10:54,000
Now actually here, I don't wanna say Latest News page,

189
00:10:54,000 --> 00:10:56,000
instead I want to have a h2 element,

190
00:10:56,000 --> 00:10:58,000
which just says Latest News.

191
00:10:58,000 --> 00:11:02,000
And I'll wrap that into a fragment because below that,

192
00:11:02,000 --> 00:11:04,000
I want to show my latest news.

193
00:11:04,000 --> 00:11:07,000
And for that, I'll get those latestNews

194
00:11:08,000 --> 00:11:12,000
by calling the getLatestNews function,

195
00:11:12,000 --> 00:11:14,000
which is another utility function

196
00:11:14,000 --> 00:11:16,000
provided by that news.js file

197
00:11:16,000 --> 00:11:19,000
which we stored in the lib folder.

198
00:11:20,000 --> 00:11:24,000
And I'll then output the NewsList here,

199
00:11:24,000 --> 00:11:27,000
and set the news prop to those latestNews.

200
00:11:29,000 --> 00:11:32,000
And with that, that latestNews page

201
00:11:32,000 --> 00:11:36,000
will always be shown no matter how the path changes

202
00:11:36,000 --> 00:11:40,000
inside of that parallel routing archive folder,

203
00:11:40,000 --> 00:11:43,000
and will always show those latestNews here

204
00:11:43,000 --> 00:11:46,000
in that part of that parallel route.

205
00:11:46,000 --> 00:11:49,000
And with that, if we saved that all,

206
00:11:49,000 --> 00:11:52,000
and you might need to restart the development server

207
00:11:52,000 --> 00:11:55,000
because at least for me, it sometimes crashes

208
00:11:55,000 --> 00:11:57,000
after the error I showed you before.

209
00:11:57,000 --> 00:12:01,000
But after restarting that and visiting /archive,

210
00:12:01,000 --> 00:12:04,000
you should see the Latest News down there,

211
00:12:04,000 --> 00:12:05,000
and you have these links up here.

212
00:12:05,000 --> 00:12:07,000
And if you now click a link,

213
00:12:07,000 --> 00:12:10,000
you see that Now we don't get the Not Found! error,

214
00:12:10,000 --> 00:12:13,000
but instead we still have the Latest News down there,

215
00:12:13,000 --> 00:12:15,000
those didn't change.

216
00:12:15,000 --> 00:12:17,000
But the content up here changed,

217
00:12:17,000 --> 00:12:20,000
and we now have the news for the selected year.

218
00:12:21,000 --> 00:12:23,000
And therefore, now we have the content

219
00:12:23,000 --> 00:12:27,000
of two separate routes on the same page.

220
00:12:27,000 --> 00:12:31,000
And that's in the end, the idea behind parallel routing.

221
00:12:31,000 --> 00:12:35,000
It's still not a feature which you'll necessarily need

222
00:12:35,000 --> 00:12:38,000
all the time, but it's a feature worth knowing about

223
00:12:38,000 --> 00:12:43,000
because here, it allows us to build this kind of logic.

224
00:12:44,000 --> 00:12:48,000
And I'm not even done with this part of the website yet.