1
00:00:00,000 --> 00:00:05,000
Up to this point, we mostly used

2
00:00:05,000 --> 00:00:08,000
what we already knew from the essentials section.

3
00:00:08,000 --> 00:00:12,000
Now we're going to add a new kind of route,

4
00:00:12,000 --> 00:00:16,000
a new routing pattern to this application.

5
00:00:16,000 --> 00:00:21,000
We're going to add a parallel route or parallel routes

6
00:00:21,000 --> 00:00:22,000
to this application.

7
00:00:22,000 --> 00:00:26,000
And for that, I'll start by adding a new standard page

8
00:00:26,000 --> 00:00:30,000
to this application, which should act as a sibling

9
00:00:30,000 --> 00:00:32,000
to the news page.

10
00:00:32,000 --> 00:00:35,000
So I want to add a new path to this application,

11
00:00:35,000 --> 00:00:38,000
and that path should be /archive.

12
00:00:38,000 --> 00:00:41,000
So here, I'll add an archive folder.

13
00:00:42,000 --> 00:00:46,000
Now, this archive page that I wanna display

14
00:00:46,000 --> 00:00:51,000
when we navigate to /archive should however be a page

15
00:00:51,000 --> 00:00:56,000
that actually consists of two parallel pages,

16
00:00:57,000 --> 00:00:59,000
two parallel routes,

17
00:00:59,000 --> 00:01:04,000
because parallel routes are something you can set up

18
00:01:04,000 --> 00:01:06,000
and configure with NextJS.

19
00:01:06,000 --> 00:01:09,000
And it's a feature that allows you to render the content

20
00:01:09,000 --> 00:01:14,000
of two separate routes with separate paths

21
00:01:14,000 --> 00:01:16,000
on one and the same page.

22
00:01:16,000 --> 00:01:19,000
Now, to set up parallel routing,

23
00:01:19,000 --> 00:01:24,000
we must add a layout file to that path

24
00:01:24,000 --> 00:01:27,000
where we want to have the parallel routes.

25
00:01:27,000 --> 00:01:32,000
And then we need to add one sub folder per parallel route.

26
00:01:32,000 --> 00:01:36,000
And I actually set two parallel routes here.

27
00:01:36,000 --> 00:01:40,000
You can actually add as many parallel routes as you want.

28
00:01:40,000 --> 00:01:44,000
Here in this app, I just wanna have two parallel routes.

29
00:01:44,000 --> 00:01:46,000
Now you do add a parallel route

30
00:01:46,000 --> 00:01:50,000
by adding a folder that starts with an @ symbol.

31
00:01:50,000 --> 00:01:52,000
And that's important because that's part

32
00:01:52,000 --> 00:01:57,000
of the parallel route naming convention NextJS looks for.

33
00:01:57,000 --> 00:02:01,000
After this @ symbol, you can have any name of your choice.

34
00:02:01,000 --> 00:02:05,000
For example, here, I'll add archive again,

35
00:02:06,000 --> 00:02:09,000
because on this archive page

36
00:02:09,000 --> 00:02:12,000
I actually want to have two areas,

37
00:02:12,000 --> 00:02:16,000
one area where I have an archive of news

38
00:02:16,000 --> 00:02:17,000
that can be navigated

39
00:02:17,000 --> 00:02:20,000
by diving into different years and months

40
00:02:20,000 --> 00:02:23,000
and then next to it, I want to have a list

41
00:02:23,000 --> 00:02:27,000
of the latest news independent from the news

42
00:02:27,000 --> 00:02:30,000
that were chosen on that archive.

43
00:02:30,000 --> 00:02:33,000
Now as a second parallel route here,

44
00:02:33,000 --> 00:02:38,000
I'll therefore add another folder next to @archive,

45
00:02:38,000 --> 00:02:40,000
which I'll name @latest,

46
00:02:40,000 --> 00:02:44,000
and that will then hold the content that will be responsible

47
00:02:44,000 --> 00:02:47,000
for showing the latest news.

48
00:02:47,000 --> 00:02:50,000
Now in @archive, I'll add a page.js file

49
00:02:50,000 --> 00:02:54,000
and in @latest I'll add a page.js file.

50
00:02:54,000 --> 00:02:58,000
And since we'll set these pages up as parallel routes,

51
00:02:58,000 --> 00:03:00,000
and since we're using this naming convention

52
00:03:00,000 --> 00:03:04,000
for these folders, both pages can be shown at the same time

53
00:03:04,000 --> 00:03:05,000
as you'll see.

54
00:03:06,000 --> 00:03:09,000
Now I'll start with the archive page JS file.

55
00:03:09,000 --> 00:03:13,000
Here I'll export a default function called archive page.

56
00:03:14,000 --> 00:03:19,000
And in there I'll simply return an H1 element

57
00:03:19,000 --> 00:03:22,000
where I'll say archive page for now.

58
00:03:23,000 --> 00:03:27,000
And then I'll copy that into the latest page test file

59
00:03:27,000 --> 00:03:30,000
and rename that to latest news page

60
00:03:30,000 --> 00:03:35,000
and say latest news page here in the H1 element.

61
00:03:36,000 --> 00:03:39,000
Now, in order to make sure that both pages are shown

62
00:03:39,000 --> 00:03:42,000
at the same time, we then have to go to the layout JS file,

63
00:03:42,000 --> 00:03:44,000
which needed to be added,

64
00:03:44,000 --> 00:03:48,000
and then export a layout component function.

65
00:03:48,000 --> 00:03:52,000
I'll name it, archive layout.

66
00:03:53,000 --> 00:03:56,000
And now there is something special happening

67
00:03:56,000 --> 00:03:59,000
with that layout component function.

68
00:03:59,000 --> 00:04:04,000
In general, layout component functions do receive

69
00:04:04,000 --> 00:04:06,000
this children prop,

70
00:04:06,000 --> 00:04:09,000
well, I guess every React component receives that,

71
00:04:09,000 --> 00:04:12,000
but in those layout components,

72
00:04:12,000 --> 00:04:16,000
the content made accessible through that children prop

73
00:04:16,000 --> 00:04:18,000
will be the content of the page

74
00:04:18,000 --> 00:04:20,000
that's currently shown on the screen.

75
00:04:20,000 --> 00:04:23,000
NextJS will take care of that automatically.

76
00:04:24,000 --> 00:04:28,000
Now, when you are working in a layout JS file

77
00:04:28,000 --> 00:04:32,000
that has such parallel route folders next to it,

78
00:04:32,000 --> 00:04:36,000
so folders that start with an @ symbol,

79
00:04:36,000 --> 00:04:39,000
then you'll actually not just have

80
00:04:39,000 --> 00:04:42,000
the children prop available,

81
00:04:42,000 --> 00:04:47,000
but instead you'll actually have one prop per parallel route

82
00:04:48,000 --> 00:04:53,000
with that name you chose after the @ as a prop name.

83
00:04:54,000 --> 00:04:57,000
So the content of the archive route will be available

84
00:04:57,000 --> 00:04:59,000
through a prop named archive,

85
00:04:59,000 --> 00:05:02,000
and the content of the latest route is available

86
00:05:02,000 --> 00:05:04,000
through a prop named latest.

87
00:05:04,000 --> 00:05:08,000
NextJS will add those props automatically

88
00:05:08,000 --> 00:05:10,000
for that layout component

89
00:05:10,000 --> 00:05:13,000
if it is next to such parallel route folders.

90
00:05:14,000 --> 00:05:18,000
And therefore here we can then return a div, let's say

91
00:05:18,000 --> 00:05:23,000
with an H1 of news archive, for example.

92
00:05:24,000 --> 00:05:28,000
And then below that I'll add a section with an ID,

93
00:05:28,000 --> 00:05:32,000
archive filter where I want to output the content

94
00:05:32,000 --> 00:05:34,000
of my archive page.

95
00:05:34,000 --> 00:05:39,000
And below that a section with an ID of archive latest,

96
00:05:40,000 --> 00:05:43,000
which outputs the content made available

97
00:05:43,000 --> 00:05:44,000
through the latest prop.

98
00:05:47,000 --> 00:05:52,000
And with that, if you save that and you go to /archive,

99
00:05:54,000 --> 00:05:58,000
so local host 3000 /archive,

100
00:05:58,000 --> 00:06:01,000
you will see the content of these two pages

101
00:06:01,000 --> 00:06:05,000
next to each other or actually on top of each other here

102
00:06:05,000 --> 00:06:07,000
due to the styling I chose,

103
00:06:07,000 --> 00:06:10,000
even though we're on one single route.

104
00:06:10,000 --> 00:06:13,000
But since we use parallel routing,

105
00:06:13,000 --> 00:06:16,000
we see the content of two pages here.

106
00:06:16,000 --> 00:06:19,000
And we can now use this feature to build up on it

107
00:06:19,000 --> 00:06:22,000
and to make sure that this archive page content

108
00:06:22,000 --> 00:06:27,000
is actually a navigatable list of news

109
00:06:27,000 --> 00:06:30,000
so that we have an archive where we can dive deeper

110
00:06:30,000 --> 00:06:32,000
by picking different years and months

111
00:06:32,000 --> 00:06:36,000
whilst this latest news area will stay the same.

112
00:06:36,000 --> 00:06:38,000
That's what we'll build next.