All language subtitles for 013 A Different Way Of Setting Link Hrefs_Downloadly.ir_en

So now we know how to use the link.

Now for longer POS,

constructing a link destination like this.

so by building a string like this

can be cumbersome or annoying.

That's why Next.js also gives you an alternative way

an alternative value you can provide

for the REFPROP on the link.

Instead of providing a string

which is the path you want to go to,

you can provide an object.

So now this is not a special double curly brace syntax,

this is still single curly braces

to evaluate a JavaScript expression,

and the expression here then just is a new object

which I'm creating.

And here that's a special kind of object

Next.js expects, as an alternative to a string

as a value for the ref.

And here we can set various properties Next.js is expecting.

For example, the path name, property

which here would be /clients/ and then important [Id]

So we describe the path

as it would lead to our file in the pages folder.

So here we want to go into client's folder

and then into the Id folder with square brackets around Id

and then to the index.js file as you learned,

that is then the default file Next.js we'll be looking for,

hence, the path name here is /client/[Id].

And then we need to let Next.js know,

what the concrete value should be

that should be plucked in for this ID here for this link,

which we're building.

And we do this through the query property

which we can set into this ref object.

And that then is an object

just as it is when we retrieve it with use router.

There query is also an object we can retrieve

to have key value pairs where the keys

are our dynamic segment identifiers

and the values are the concrete values entered

and it's the same here when we define a link.

We then have a key which is our dynamic segment identifier.

So Id in this case, and then the concrete value

for this concrete link, which we're building here.

So in this case, client.id

and that that is then an alternative way

of building that link.

Now it's totally up to you,

If you prefer this over creating a string or not,

this is totally up to you, but you can build it like this.

And if you then save this and reload

you still have the client's page with those working links.

And I'm just showing these alternatives so that you know

all these different ways of using Next,

and in this case of using the link component