All language subtitles for 011 Extracting Dynamic Parameter Values_en

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.