So how do we then get access
to the concrete value that was entered by the user
in the URL?
For this, Next.js gives us a special hook we can use.
For this, we need to import something from
Next slash router.
So from the Next library
and there from the router sub package.
And we need to import the use router hook.
So that's a React hook defined by the Next.js team
which we can use an any functional component.
Alternatively, if you're working with class-based components
there also is a width router, higher order component
which you can wrap around your class based component
to get a special router prop injected into your component.
But we're using the more modern
functional component only approach here
and therefore, we will use this use router hook.
Now inside of the functional component
we can then call use router like this
and this will return a router object to us.
Again, if you would be using width router
you would be getting that router key here
on your props object.
Now, what does this router
object give us which we're getting here?
This router object exposes various pieces of data
and various methods we can use.
Now we'll have a look at the methods later when we dive into
navigating between pages, but when it comes
to the data properties, we, for example, get the path name
and let's see what's inside of that
by simply console logging it here.
So that we can see what we get there as a value.
And that's also console log something else.
Let's console log, router dot query.
That's another interesting property we can access
on that router object.
With that, if we saved as updated project ID page here.
If we go to slash portfolio slash something
or anything like that,
and we then open up the developer tools,
we see the path here.
And the interesting thing here is that we don't
see the path we entered into URL slash portfolio
slash something, but the path inferred by Next.js.
So the path to component file,
that had to be loaded to bring this to the screen,
the portfolio folder and then to square bracket
project ID JS file if you want to read it like this.
And that of course is the path Next.js had to take
to reach this component,
which is responsible for what we see here.
So that is the encoded, the inferred path Next.js took.
Then here, we have an empty object
but we can ignore this double output we're getting here
for the moment.
Instead, if we have a look at the last log here,
we see that it's actually not an empty object
but it is an object with a project ID property
and then a value of something.
And that's the interesting part now.
This query property on the router
gives us access to the concrete data
that is encoded in the URL.
So it gives us access to the concrete value
we get for this dynamic path segment.
So we entered portfolio slash something
and therefore something is the concrete value
for this project ID placeholder.
And that's why on this query object,
we get project ideas a key name
because I picked project ID here
as a value between the square brackets
and then something so what we entered into URL as a value.
And that means that we can use this router query property
to get access to the concrete value encoded in the URL.
And if this would be the ID of some database object,
we could then send a request to some backend server
to fetch the
piece of data with an ID of
router dot query dot project ID in this case.
That's how we could use this encoded value.
And that of course, is how we will use it later
once we also dive into data fetching.
Here I just want you to understand
how that routing works and how we can get access
to the different pieces of data we might need.
And that is how we can get access
to this dynamic segment value.