So to navigate to dynamic pages,
we can still use this link component,
which we import from next/link.
We use it just as before, so here,
again, we can add an unordered list,
and add the link component, and then say
our first client is Maximilian.
And here, the ID of that client could max.
So, therefore we can simply set this
to /clients/max, for example.
And then, this simply is taken as a concrete value
for this ID here in the square brackets.
And, of course, we can have a second client here,
let's say Manuel, where the ID then could be manu.
And if we save that and have a look at our clients page,
now we can click on Maximilian to be taken
to the overview page with all the projects
for this client, for max as you can see here on the right.
Or if I click on Manuel, I go to the same page,
but with a value of manu for that ID.
So, that's how this works and how we can,
of course, also navigate to pages with dynamic parameters.
Now, in reality, you often need to generate
a list like this dynamically.
So, you might have some piece of data,
let's say, a clients array here.
And every client is an object here
with an ID of max and a name of Maximilian.
And then, we have another client here
with a name of Manuel and an ID of manu.
So, what I already have down there.
But, in reality, you would, of course,
often get such data from a database, for example,
and you want to generate that dynamically.
You can do this as well just as you know it
from standard React because this is standard React.
Inside of this component, it is a standard React component,
nothing special about that.
So, therefore, we can map our clients
to list items just as we know it.
Set a key, as we should to ensure that React
is able to fully understand this list
and update this list efficiently.
And set this to client.id, for example,
since that is a unique identifier.
And then, in the list item, we can use our link
and between the link tags, output client.name
and for the link set a ref, which we also set
to a dynamic value where we, for example,
use back ticks to create a template literal
to set this POV to /clients/
and then inject a dynamic value here, which is client ID.
So, with that, we render a bunch of list items
with a bunch of links where, inside of the link,
is a text, which is visible to the user
we output the client name and as a value
for the target for the destination of that link
we create a string with a template literal
by having the hard coded /clients part.
And then, the dynamically injected client ID,
which is different for every client we're looping through.
Hence, with that, if we save this
and we go back to our clients page
it looks like before, and it works like before.
But now that list is generated dynamically.
And that works just as you know it from standard React.