To extract the concrete value
entered in the URL when this page is loaded
Next.js gives us a special hook which we can use.
A special react hook
which we can use in functional components.
It also has an alternative for a class-based components
a higher order component you can wrap around your component
and I do discuss this in my full Next.js course
but we can ignore that here.
Here, instead we import from next to be precise
from next/router
which is a sub package of the next package
which exposes routing specific functionality.
And here we got the youth router hook.
It's a regular react hook, just not one built into react
but accustomed hook built by the next team.
And we can now call this hook
instead of the detailed page, simply like this.
If we do that, we get access to a router object
and on that router object
we then got certain pieces of data
and certain methods which we can call.
Now, for example, we get methods for programmatic navigation
but we don't need this here so we can ignore this for now
but we also get access to devalues encoded in the URL
so, to deconcrete values of these dynamic path segments.
And getting access is easy on this router object
we've got this query property
which gives us access to a nested object
and on that query object we then have the identifier
which we chose between the square brackets
as a property name.
So, in my case newsId because that's what I entered here
as a file name between the square brackets.
And that will then hold the concrete value in the URL
for this dynamic segment for which this page was visited.
So, if we now just console log this
for the moment to see what's in there.
If I save that and go back and open the developer tools
if we reload we see undefined first and then something else.
Now, we see tool logs here
because that's how use router works.
It runs immediately when the pages first rendered
and at this point it doesn't yet know what's in the URL
but then once we have that information
the component renders again and we got that concrete value
that is just how that hook works.
So, the second time it executes the second time
this component is evaluated we got something else
which is to concrete URL value I entered here.
And if I have this-course-is-great
then we would see this here being locked.
And that's how we can get access
to the concrete data encoded in the URL.
Now, why is this helpful?
Well, we could, for example use this now
to get our newsId like this
and then if we had a database, if we had some backend API
from which we can fetch our news
we could send a request to the backend API here
to fetch the news item with newsId.
That's what we could do here.
I will not do it here
because we'll soon dive into data fetching and data storage
and we'll see different approaches we can use there
with Next.js so we are going to take a look at that
in detail in a couple of minutes
but we could do this here if we had such a backend API
but we don't have it here
because that's just a simple dummy app
to get started with the file based routing system
but that is how it would work.
And that's how we can build dynamic pages
which work for different pieces of data
and then can do different things based
on different pieces of data.
Here, we could fetch different news items from a database
based on the different Ids for which we visit this page.