Now, when working with such dynamic routes,
such dynamic paths, there are two interesting variations
or extensions of that concept you should be aware of.
One variation or extension is that you can,
of course also have nested dynamic paths.
So let's say besides portfolio slash projectid,
we also have another folder,
the clients folder let's say
and we wanna construct a nested path here,
where we have dynamic client id,
which can be different for the different clients.
And then for every client id, we have some static pages
like a list of all projects we did with that client
but then also dynamic nested paths
for the individual projects we did with a client.
Not clear what I mean?
Let me show it to you.
So for clients, I might want an index.js file
where I list all my clients.
So here we could have a function
with a name ClientsPage
and then I return a div here with a h1 tag
of The Clients Page
and close the div of course.
And I export that,
and of course that's nothing new here at this point.
But then I wanna have a dynamic path,
but a dynamic path with nested paths.
So not a file named square bracket something js
but instead we can have a sub folder,
which also has this square bracket name.
So here we could then have the id of a client
but now that's not a file,
that's a folder with this special name.
And then here again, we could have a index.js file
and that could, for example, list all the Projects
or all the Client Projects.
So all the Projects for a given selected client
and hence here, I have a div,
where I say The Projects of a Given Client
and maybe export this as well.
And we could have more aesthetic files here
like an overview.js file or whatever
but we can now also have another dynamic folder
or file nested inside of this already dynamic folder.
For example, let's say for a selected client,
we then have different projects,
so here we have the clientprojectid identifier.
And of course, as always what you write
between the square brackets is up to you.
So this could then be a page for an individual project
for a selected client.
So the SelectedClientProjectPage whatever,
that could be a name here.
And I'm just coming up with some examples here
because of course these are use cases you could encounter
in a real app you're building.
So The Project Page
for a Specific
Project
for a Selected
Client.
And we can also export that.
Okay, so with that,
I added a bunch of new folders and files
and the interesting thing of course is
that we have this dynamic folder name.
How could we now reach those different files and pages?
Well we can enter slash clients to reach this index.js file
and there's nothing special about this.
If I enter slash clients, I see The Clients Page,
which is the output of this functional component.
But now we have this dynamic id segment folder
and in there we have an index.js file as well,
where we, for example,
wanna list all the projects of a given client.
So therefore, we could enter a clients slash max,
if that would be the identifier of a given client.
And we see The Projects of a Given Client,
which is the output of this page here.
And then we can also drill even deeper
with yet another dynamic segment
with clients, max, project1, if that would then be the id
of a specific project for this specific client.
And therefore, we now see this output.
And then all these pages we can of course get access
to the concrete values entered in the URL.
So here in the SelectedClientProjectPage,
we can, again import
useRouter
from 'next/router'.
And then in here simply
get access to the router by calling useRouter
and then console logging router.query.
And if we do that,
we see that we did do get an object
with two properties now
because I am logging this inner component
that is loaded for a file name with a dynamic segment,
which is inside of a folder with a dynamic segment.
And you always get access to all the concrete values
for the different placeholders that might've been
part of the overall path
for which this component was loaded.
So therefore, we get access to the concrete id value,
since we're in that dynamic id folder.
And then since we're in this dynamic clientprojectid file,
we also access to that concrete value.
So that we can use all these values
in our project or in our component file here
to then fetch the specific project
for this specific client, for example.
Now, if I would use
useRouter
in the index.js file instead of the id folder here
and therefore of course, we also need to
import useRouter here as well.
So if we import useRouter from next slash router,
if I do that, then you will see
that if I visit just slash max
and therefore this index.js file,
we of course only get access to the id property here
because that is well just in the id folder
and not inside of this clientprojectid JavaScript file now.
So that's how we can load pages dynamically
for various dynamic parameters
and how we can get access to these parameter values.
And as mentioned before, in the upcoming sections
about data fetching and so on,
we are of course also going to leverage
those dynamic values.