So, let's now build up
on this parallel routing feature
and make it a bit more useful.
Because of course, if all we wanted to do
is show two pieces of content on one at the same page,
we could have also solved that
by simply including all that content into one single page.
We don't need two independent routes for that.
But we will need that feature for what we're about to add
to this application.
Because now I wanna make sure
that here in this archive area,
we can dive deeper into our news archive by, for example,
picking different years and by then only showing the news
that belonged to a certain year.
To implement this, we can go to this archive
page.js file here, and then by adding another route folder
next to it, because now, as I just explained,
I wanna allow users to pick different years.
So therefore, I wanna add a dynamic route segment here
where we have the year that was picked as a placeholder
and as a value that will be encoded in the URL
so that we can show those details
or show a list of the use items that belong to this year.
In the page.js file one level above that,
so the page.js file in the archive folder.
In that file, I now want to replace this h1 element
with a header, which has an ID of "archive-header"
for styling purposes, where I wanna have a nav element,
which contains an unordered list,
which now outputs all the different years
of the different news items we have,
so that we can click those years
to go to the filtered list of news.
Now therefore, we need to find out which years exist
in our dummy-news.
And to simplify that process,
I prepared a little helper file, which you find attached,
a news.js file, which I'll add into a brand new lib folder,
which I'll add next to the components folder,
and it's up to you where you wanna add it
or how you want to name it.
But my idea is to have a folder that contains some helper,
some utility code that's not components.
And in that lib folder, I stored that attached news.js file.
And in there, I simply got some functions
that operate on the dummy-news and that, for example,
give me all the available years in a sorted order
that can be identified from those dummy years.
So simply some helper code that helps us
deal with those news.
Back at the archive page.js file,
we can now use that helper file to get the links
that should be rendered by calling getAvailableNewsYears();
which is one of those utility functions
provided by that news file you find attached.
So that will simply give me an array of year identifiers,
so to say, and I'll use those to render my links here.
Therefore, in this unordered list,
I'll then use my links and convert these years
to actual links with the map function
so that for every year I output a list item here,
which has a key of link and which inside of it
then outputs a next link imported from next/link,
where the link path
is actually a dynamically constructed path
that starts with /archive,
but where we then have slash, and then the link value,
so the year identifier.
And it's also that year identifier
that we can output here as text between the link text.
So, that will now output such a header
inside of the page.js file in the @archive folder.
And therefore now if you save everything,
you should see these years here.
Now, if we click one of those years,
we see that we actually get an error.
And I'm getting that error
because the default export in my year page.js file.
So, in that dynamic year folder is not a React component.
And that is true.
In that square bracket year folder, the page.js file
does not export anything.
And of course, it should export something
so that we have a page that can be displayed
if a specific year was chosen.
So here, I'll have my FilteredNewsPage,
that sounds like a fitting name.
And in there, I essentially want to output a list of news
just as I'm doing it in my main news page.
So, I want to have such an unordered list here,
and hence we can actually copy that, or better,
we can outsource it into a separate component.
So, in a components folder, I'll add a news-list.js file,
and export my NewsList component here.
And I expect to get a prop named "news" here.
And then I'll return that unordered list
with a class of news list where I will map through my news
to output these news items.
And now in the main news page,
we can replace this unordered list here with my NewsList.
So, with this newly added component,
which therefore also must be imported.
And of course, there, we have to set the news prop,
and set it to the dummy-news in this case.
And we can get rid of that link import,
since I'm not using that component
in this component anymore.
We can now also use this NewsList component
here in this archive year page.js file.
There, I want to output this NewsList.
And now the news must be set to the news that are filtered
for that year that was chosen.
So, of course we can get access to that year
by using the params prop,
which we receive automatically by NextJS.
And then here, I got my newsYear by accessing params.year.
And of course, it's .year here
because I chose year as an identifier
between the square brackets.
Now, I need to get all the news that belong to that year,
and I added a utility function to that news.js file,
which we stored in that lib folder
because there you'll find the getNewsForYear function,
which simply filters the DUMMY_NEWS
for news that belong to the chosen year.
And hence here, I got my news by calling getNewsForYear
and by passing the newsYear to that function.
And then, it's the news here that will be passed
to the news list.
Now in the NewsList component,
we just also should make sure
that we import this link component from next link again
since we're using that component here.
Otherwise, you'll get this error
if you try to reload the app.
But with this import added, if you save everything,
you should see that if you reload,
we now get the Not Found! page.
And why do we get that instead of seeing the page
with our filtered news?
Well, we get the Not Found! page here
when trying to view the news for the year 2024,
because we're in a parallel route set up here,
and that means that we're still within a layout
that tries to render the content of two different routes
on the same page.
Now, I mentioned that these routes
work independent from each other,
and it's now in this archive route where we dove deeper,
and where we tried to add /year
or a concrete year after /archive.
But since this route, this year route here in the archive
is still rendered on the same page as this latest route,
we now have a problem because in this latest route
we don't support such a nested year route.
And that's why we're getting a Not Found! error here
because one of our two parallel routes
did not find a fitting page
for the path we're trying to visit.
And that's something you must keep in mind
when working with parallel routes.
You must make sure that all the parallel routes
that are shown on the same page,
do support all the different paths you wanna support there.
Now, of course, we could now support such a nested year
by also adding it here like that to the latest route.
But actually for the latest route,
it doesn't make sense to show pages for a certain year.
I always want to show the same latest news there instead.
And that's why NextJS allows you
to add a default.js file there,
and it must be named "default."
You can add that default.js file
whenever you are dealing with parallel routes
because it's that file that allows you
to define the default fallback content
that should be displayed
if that route doesn't have a more specific content
for the path that's currently loaded.
And here in that default.js file,
I actually wanna show the same content
as in the page.js file.
So, I'll copy and paste that here, and if that's the case,
that you have the same fallback content as standard content,
you can actually also get rid of the page.js file here
and just have a default.js file.
Now actually here, I don't wanna say Latest News page,
instead I want to have a h2 element,
which just says Latest News.
And I'll wrap that into a fragment because below that,
I want to show my latest news.
And for that, I'll get those latestNews
by calling the getLatestNews function,
which is another utility function
provided by that news.js file
which we stored in the lib folder.
And I'll then output the NewsList here,
and set the news prop to those latestNews.
And with that, that latestNews page
will always be shown no matter how the path changes
inside of that parallel routing archive folder,
and will always show those latestNews here
in that part of that parallel route.
And with that, if we saved that all,
and you might need to restart the development server
because at least for me, it sometimes crashes
after the error I showed you before.
But after restarting that and visiting /archive,
you should see the Latest News down there,
and you have these links up here.
And if you now click a link,
you see that Now we don't get the Not Found! error,
but instead we still have the Latest News down there,
those didn't change.
But the content up here changed,
and we now have the news for the selected year.
And therefore, now we have the content
of two separate routes on the same page.
And that's in the end, the idea behind parallel routing.
It's still not a feature which you'll necessarily need
all the time, but it's a feature worth knowing about
because here, it allows us to build this kind of logic.
And I'm not even done with this part of the website yet.