All language subtitles for 009 Building Nested Dynamic Routes & Paths_Downloadly.ir_en

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.