Up to this point, we mostly used
what we already knew from the essentials section.
Now we're going to add a new kind of route,
a new routing pattern to this application.
We're going to add a parallel route or parallel routes
to this application.
And for that, I'll start by adding a new standard page
to this application, which should act as a sibling
to the news page.
So I want to add a new path to this application,
and that path should be /archive.
So here, I'll add an archive folder.
Now, this archive page that I wanna display
when we navigate to /archive should however be a page
that actually consists of two parallel pages,
two parallel routes,
because parallel routes are something you can set up
and configure with NextJS.
And it's a feature that allows you to render the content
of two separate routes with separate paths
on one and the same page.
Now, to set up parallel routing,
we must add a layout file to that path
where we want to have the parallel routes.
And then we need to add one sub folder per parallel route.
And I actually set two parallel routes here.
You can actually add as many parallel routes as you want.
Here in this app, I just wanna have two parallel routes.
Now you do add a parallel route
by adding a folder that starts with an @ symbol.
And that's important because that's part
of the parallel route naming convention NextJS looks for.
After this @ symbol, you can have any name of your choice.
For example, here, I'll add archive again,
because on this archive page
I actually want to have two areas,
one area where I have an archive of news
that can be navigated
by diving into different years and months
and then next to it, I want to have a list
of the latest news independent from the news
that were chosen on that archive.
Now as a second parallel route here,
I'll therefore add another folder next to @archive,
which I'll name @latest,
and that will then hold the content that will be responsible
for showing the latest news.
Now in @archive, I'll add a page.js file
and in @latest I'll add a page.js file.
And since we'll set these pages up as parallel routes,
and since we're using this naming convention
for these folders, both pages can be shown at the same time
as you'll see.
Now I'll start with the archive page JS file.
Here I'll export a default function called archive page.
And in there I'll simply return an H1 element
where I'll say archive page for now.
And then I'll copy that into the latest page test file
and rename that to latest news page
and say latest news page here in the H1 element.
Now, in order to make sure that both pages are shown
at the same time, we then have to go to the layout JS file,
which needed to be added,
and then export a layout component function.
I'll name it, archive layout.
And now there is something special happening
with that layout component function.
In general, layout component functions do receive
this children prop,
well, I guess every React component receives that,
but in those layout components,
the content made accessible through that children prop
will be the content of the page
that's currently shown on the screen.
NextJS will take care of that automatically.
Now, when you are working in a layout JS file
that has such parallel route folders next to it,
so folders that start with an @ symbol,
then you'll actually not just have
the children prop available,
but instead you'll actually have one prop per parallel route
with that name you chose after the @ as a prop name.
So the content of the archive route will be available
through a prop named archive,
and the content of the latest route is available
through a prop named latest.
NextJS will add those props automatically
for that layout component
if it is next to such parallel route folders.
And therefore here we can then return a div, let's say
with an H1 of news archive, for example.
And then below that I'll add a section with an ID,
archive filter where I want to output the content
of my archive page.
And below that a section with an ID of archive latest,
which outputs the content made available
through the latest prop.
And with that, if you save that and you go to /archive,
so local host 3000 /archive,
you will see the content of these two pages
next to each other or actually on top of each other here
due to the styling I chose,
even though we're on one single route.
But since we use parallel routing,
we see the content of two pages here.
And we can now use this feature to build up on it
and to make sure that this archive page content
is actually a navigatable list of news
so that we have an archive where we can dive deeper
by picking different years and months
whilst this latest news area will stay the same.
That's what we'll build next.