So let's solve this challenge, this exercise together now.
And for that here in the project,
I'll start by adding these two new pages.
And as you learned, you add a new page
by adding a new folder to that app directory.
Now here, since we want to have a slash news
path in the URL, the folder name should be news
because as you learned earlier in the course,
you add routes like this, such standard routes,
which should lead to a certain path by adding a folder
that in the end concludes
that route path name in the app folder.
So if you wanna navigate to a slash about page,
you would add an about folder in the app folder.
Therefore, that's what I did here.
Though, as you also learned, that's not enough.
Instead, you also must add a file named page.js
in that news folder,
and it could also end with jsx if you prefer that,
or if you're using TypeScript with .ts or tsx.
Now here I'll go for .Js.
So that is the first page, though of course,
at the moment I'm not displaying anything.
Now before I'll worry about outputting something,
I want to add that second page,
and that should be a nested page slash news
slash something else.
And that something else should be dynamic.
It should be a value that can be different
for every navigation request.
And you learned that such dynamic routes can be added
by defining a folder
that wraps the placeholder for the actual value
that will be encoded in the URL between square brackets.
Therefore here I'll add a sub folder in the news folder
and add those square brackets.
And then here I will use ID as a placeholder.
And the exact placeholder here is up to you.
You can use any identifier of your choice.
And then in there I also add a page.js file
so that we now added these two pages.
Now in order to output something there,
we then must export function components in those
page js files.
So here I have the news page
and I'll simply return a age one element
where I say news page for now.
And then here in the nested news detail page,
I'll name it news detail page
and have news detail page in my title here.
And if we now save both files
and we go back to the application, we can navigate to
slash news and we see that news page text here,
and we can also go to slash news slash abc
and we're on the news detail page,
so that works the way it should.
Now of course, this wasn't everything though.
Instead the goal was to output a list
of links on the news page.
Links that lead us to the news detail page.
Therefore, in that news page here, I will actually
wrap a fragment around my content
and then here output a list of links.
And for that I'll use an on or a list with list items.
And those links should lead to the detail page.
Now, we could add those links
by using the standard anchor element, right?
We could add a link that leads
to slash news slash ABC like this.
However, as you learned in the essentials section,
this is not the recommended way
of creating internal links in your website
when using NextJS.
Instead, you should replace the anchor element
with the link component, which is provided by NextJS,
and you import that from next link.
And you should use that
because this will then ensure
that you stay in this single page application
flow and world.
So here I'll simply add three links.
Let's say it's up to you how many you want.
And I'll name the first one first news
and first dash news could be my ID of that news item.
And maybe let's say first news item here.
Then I have the second news item here.
And the ID is second dash news.
And then here the ID is third dash news.
And as you might guess, I'll have a text
of third news item.
So now we have these three links, and if we now save that
and we go back to the news page, we see them here.
Obviously not styled yet, we'll take care of that later.
But we see these items.
And if I click the second news item,
you see that in the URL
I have that second dash news ID now,
and we're on the news detail page.
Now as a bonus task, I asked you to extract
that value of that id
that is encoded in the URL.
So second dash news for this news item, for example.
And this can be achieved by going to
that news detail page component.
And then there you can extract some props
which are passed into this
component automatically by NextJS.
To be precise, NextJS will pass a params prop
into every page component.
So whenever you register something as a page component
by making it the default export in a page JS file,
it will receive this params prop.
And this params prop here will be an object which holds
one key for every dynamic path segment.
So here we have that ID dynamic path segment,
and therefore this params object will have an ID key
and that will then be our news id.
And therefore, now here I'll actually also output some
content that's wrapped by a fragment
because I also want to have a paragraph where I say news ID
and where I output that news ID.
Like this.
With that saved, if you reload and go back,
you see that now we have
that second news Id being output here
and hopefully, unsurprisingly,
if I would visit the third news item,
we would see third news here.