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