1
00:00:02,000 --> 00:00:05,000
Now, when working with such dynamic routes,

2
00:00:05,000 --> 00:00:10,000
such dynamic paths, there are two interesting variations

3
00:00:10,000 --> 00:00:14,000
or extensions of that concept you should be aware of.

4
00:00:14,000 --> 00:00:18,000
One variation or extension is that you can,

5
00:00:18,000 --> 00:00:21,000
of course also have nested dynamic paths.

6
00:00:21,000 --> 00:00:25,000
So let's say besides portfolio slash projectid,

7
00:00:26,000 --> 00:00:29,000
we also have another folder,

8
00:00:29,000 --> 00:00:32,000
the clients folder let's say

9
00:00:32,000 --> 00:00:35,000
and we wanna construct a nested path here,

10
00:00:35,000 --> 00:00:39,000
where we have dynamic client id,

11
00:00:39,000 --> 00:00:41,000
which can be different for the different clients.

12
00:00:41,000 --> 00:00:46,000
And then for every client id, we have some static pages

13
00:00:47,000 --> 00:00:51,000
like a list of all projects we did with that client

14
00:00:51,000 --> 00:00:54,000
but then also dynamic nested paths

15
00:00:54,000 --> 00:00:58,000
for the individual projects we did with a client.

16
00:00:58,000 --> 00:00:59,000
Not clear what I mean?

17
00:00:59,000 --> 00:01:00,000
Let me show it to you.

18
00:01:00,000 --> 00:01:05,000
So for clients, I might want an index.js file

19
00:01:05,000 --> 00:01:08,000
where I list all my clients.

20
00:01:08,000 --> 00:01:10,000
So here we could have a function

21
00:01:10,000 --> 00:01:12,000
with a name ClientsPage

22
00:01:13,000 --> 00:01:17,000
and then I return a div here with a h1 tag

23
00:01:17,000 --> 00:01:20,000
of The Clients Page

24
00:01:22,000 --> 00:01:23,000
and close the div of course.

25
00:01:25,000 --> 00:01:26,000
And I export that,

26
00:01:26,000 --> 00:01:30,000
and of course that's nothing new here at this point.

27
00:01:30,000 --> 00:01:33,000
But then I wanna have a dynamic path,

28
00:01:33,000 --> 00:01:37,000
but a dynamic path with nested paths.

29
00:01:37,000 --> 00:01:41,000
So not a file named square bracket something js

30
00:01:41,000 --> 00:01:44,000
but instead we can have a sub folder,

31
00:01:44,000 --> 00:01:47,000
which also has this square bracket name.

32
00:01:47,000 --> 00:01:50,000
So here we could then have the id of a client

33
00:01:50,000 --> 00:01:51,000
but now that's not a file,

34
00:01:51,000 --> 00:01:55,000
that's a folder with this special name.

35
00:01:55,000 --> 00:01:58,000
And then here again, we could have a index.js file

36
00:01:58,000 --> 00:02:03,000
and that could, for example, list all the Projects

37
00:02:05,000 --> 00:02:07,000
or all the Client Projects.

38
00:02:07,000 --> 00:02:10,000
So all the Projects for a given selected client

39
00:02:10,000 --> 00:02:12,000
and hence here, I have a div,

40
00:02:12,000 --> 00:02:17,000
where I say The Projects of a Given Client

41
00:02:20,000 --> 00:02:22,000
and maybe export this as well.

42
00:02:24,000 --> 00:02:26,000
And we could have more aesthetic files here

43
00:02:26,000 --> 00:02:29,000
like an overview.js file or whatever

44
00:02:29,000 --> 00:02:32,000
but we can now also have another dynamic folder

45
00:02:32,000 --> 00:02:37,000
or file nested inside of this already dynamic folder.

46
00:02:37,000 --> 00:02:40,000
For example, let's say for a selected client,

47
00:02:40,000 --> 00:02:42,000
we then have different projects,

48
00:02:42,000 --> 00:02:46,000
so here we have the clientprojectid identifier.

49
00:02:46,000 --> 00:02:49,000
And of course, as always what you write

50
00:02:49,000 --> 00:02:51,000
between the square brackets is up to you.

51
00:02:52,000 --> 00:02:55,000
So this could then be a page for an individual project

52
00:02:55,000 --> 00:02:57,000
for a selected client.

53
00:02:57,000 --> 00:03:01,000
So the SelectedClientProjectPage whatever,

54
00:03:01,000 --> 00:03:03,000
that could be a name here.

55
00:03:03,000 --> 00:03:05,000
And I'm just coming up with some examples here

56
00:03:05,000 --> 00:03:09,000
because of course these are use cases you could encounter

57
00:03:09,000 --> 00:03:11,000
in a real app you're building.

58
00:03:11,000 --> 00:03:14,000
So The Project Page

59
00:03:14,000 --> 00:03:16,000
for a Specific

60
00:03:16,000 --> 00:03:17,000
Project

61
00:03:17,000 --> 00:03:19,000
for a Selected

62
00:03:19,000 --> 00:03:20,000
Client.

63
00:03:21,000 --> 00:03:24,000
And we can also export that.

64
00:03:26,000 --> 00:03:28,000
Okay, so with that,

65
00:03:28,000 --> 00:03:30,000
I added a bunch of new folders and files

66
00:03:30,000 --> 00:03:32,000
and the interesting thing of course is

67
00:03:32,000 --> 00:03:35,000
that we have this dynamic folder name.

68
00:03:35,000 --> 00:03:39,000
How could we now reach those different files and pages?

69
00:03:39,000 --> 00:03:44,000
Well we can enter slash clients to reach this index.js file

70
00:03:45,000 --> 00:03:47,000
and there's nothing special about this.

71
00:03:47,000 --> 00:03:52,000
If I enter slash clients, I see The Clients Page,

72
00:03:52,000 --> 00:03:55,000
which is the output of this functional component.

73
00:03:57,000 --> 00:04:01,000
But now we have this dynamic id segment folder

74
00:04:01,000 --> 00:04:05,000
and in there we have an index.js file as well,

75
00:04:05,000 --> 00:04:07,000
where we, for example,

76
00:04:07,000 --> 00:04:11,000
wanna list all the projects of a given client.

77
00:04:11,000 --> 00:04:14,000
So therefore, we could enter a clients slash max,

78
00:04:14,000 --> 00:04:18,000
if that would be the identifier of a given client.

79
00:04:18,000 --> 00:04:21,000
And we see The Projects of a Given Client,

80
00:04:21,000 --> 00:04:24,000
which is the output of this page here.

81
00:04:24,000 --> 00:04:27,000
And then we can also drill even deeper

82
00:04:27,000 --> 00:04:29,000
with yet another dynamic segment

83
00:04:29,000 --> 00:04:34,000
with clients, max, project1, if that would then be the id

84
00:04:34,000 --> 00:04:39,000
of a specific project for this specific client.

85
00:04:40,000 --> 00:04:44,000
And therefore, we now see this output.

86
00:04:44,000 --> 00:04:47,000
And then all these pages we can of course get access

87
00:04:47,000 --> 00:04:51,000
to the concrete values entered in the URL.

88
00:04:51,000 --> 00:04:54,000
So here in the SelectedClientProjectPage,

89
00:04:54,000 --> 00:04:55,000
we can, again import

90
00:04:57,000 --> 00:04:58,000
useRouter

91
00:04:58,000 --> 00:05:02,000
from 'next/router'.

92
00:05:04,000 --> 00:05:06,000
And then in here simply

93
00:05:07,000 --> 00:05:09,000
get access to the router by calling useRouter

94
00:05:10,000 --> 00:05:14,000
and then console logging router.query.

95
00:05:15,000 --> 00:05:17,000
And if we do that,

96
00:05:19,000 --> 00:05:22,000
we see that we did do get an object

97
00:05:22,000 --> 00:05:24,000
with two properties now

98
00:05:24,000 --> 00:05:27,000
because I am logging this inner component

99
00:05:27,000 --> 00:05:31,000
that is loaded for a file name with a dynamic segment,

100
00:05:31,000 --> 00:05:34,000
which is inside of a folder with a dynamic segment.

101
00:05:34,000 --> 00:05:38,000
And you always get access to all the concrete values

102
00:05:38,000 --> 00:05:41,000
for the different placeholders that might've been

103
00:05:41,000 --> 00:05:43,000
part of the overall path

104
00:05:43,000 --> 00:05:47,000
for which this component was loaded.

105
00:05:47,000 --> 00:05:50,000
So therefore, we get access to the concrete id value,

106
00:05:50,000 --> 00:05:52,000
since we're in that dynamic id folder.

107
00:05:52,000 --> 00:05:56,000
And then since we're in this dynamic clientprojectid file,

108
00:05:56,000 --> 00:05:59,000
we also access to that concrete value.

109
00:05:59,000 --> 00:06:02,000
So that we can use all these values

110
00:06:02,000 --> 00:06:06,000
in our project or in our component file here

111
00:06:06,000 --> 00:06:08,000
to then fetch the specific project

112
00:06:08,000 --> 00:06:11,000
for this specific client, for example.

113
00:06:13,000 --> 00:06:15,000
Now, if I would use

114
00:06:16,000 --> 00:06:17,000
useRouter

115
00:06:17,000 --> 00:06:22,000
in the index.js file instead of the id folder here

116
00:06:22,000 --> 00:06:24,000
and therefore of course, we also need to

117
00:06:24,000 --> 00:06:27,000
import useRouter here as well.

118
00:06:27,000 --> 00:06:31,000
So if we import useRouter from next slash router,

119
00:06:31,000 --> 00:06:34,000
if I do that, then you will see

120
00:06:34,000 --> 00:06:38,000
that if I visit just slash max

121
00:06:38,000 --> 00:06:40,000
and therefore this index.js file,

122
00:06:40,000 --> 00:06:44,000
we of course only get access to the id property here

123
00:06:44,000 --> 00:06:47,000
because that is well just in the id folder

124
00:06:47,000 --> 00:06:51,000
and not inside of this clientprojectid JavaScript file now.

125
00:06:52,000 --> 00:06:54,000
So that's how we can load pages dynamically

126
00:06:54,000 --> 00:06:57,000
for various dynamic parameters

127
00:06:57,000 --> 00:07:01,000
and how we can get access to these parameter values.

128
00:07:01,000 --> 00:07:04,000
And as mentioned before, in the upcoming sections

129
00:07:04,000 --> 00:07:06,000
about data fetching and so on,

130
00:07:06,000 --> 00:07:08,000
we are of course also going to leverage

131
00:07:08,000 --> 00:07:10,000
those dynamic values.