1
00:00:02,000 --> 00:00:04,000
So to navigate to dynamic pages,

2
00:00:04,000 --> 00:00:07,000
we can still use this link component,

3
00:00:07,000 --> 00:00:10,000
which we import from next/link.

4
00:00:11,000 --> 00:00:13,000
We use it just as before, so here,

5
00:00:13,000 --> 00:00:15,000
again, we can add an unordered list,

6
00:00:15,000 --> 00:00:18,000
and add the link component, and then say

7
00:00:18,000 --> 00:00:22,000
our first client is Maximilian.

8
00:00:22,000 --> 00:00:26,000
And here, the ID of that client could max.

9
00:00:26,000 --> 00:00:28,000
So, therefore we can simply set this

10
00:00:28,000 --> 00:00:33,000
to /clients/max, for example.

11
00:00:33,000 --> 00:00:37,000
And then, this simply is taken as a concrete value

12
00:00:37,000 --> 00:00:40,000
for this ID here in the square brackets.

13
00:00:41,000 --> 00:00:43,000
And, of course, we can have a second client here,

14
00:00:43,000 --> 00:00:47,000
let's say Manuel, where the ID then could be manu.

15
00:00:49,000 --> 00:00:53,000
And if we save that and have a look at our clients page,

16
00:00:53,000 --> 00:00:56,000
now we can click on Maximilian to be taken

17
00:00:56,000 --> 00:00:59,000
to the overview page with all the projects

18
00:00:59,000 --> 00:01:03,000
for this client, for max as you can see here on the right.

19
00:01:03,000 --> 00:01:06,000
Or if I click on Manuel, I go to the same page,

20
00:01:06,000 --> 00:01:10,000
but with a value of manu for that ID.

21
00:01:10,000 --> 00:01:12,000
So, that's how this works and how we can,

22
00:01:12,000 --> 00:01:16,000
of course, also navigate to pages with dynamic parameters.

23
00:01:17,000 --> 00:01:20,000
Now, in reality, you often need to generate

24
00:01:20,000 --> 00:01:22,000
a list like this dynamically.

25
00:01:22,000 --> 00:01:24,000
So, you might have some piece of data,

26
00:01:24,000 --> 00:01:27,000
let's say, a clients array here.

27
00:01:27,000 --> 00:01:29,000
And every client is an object here

28
00:01:29,000 --> 00:01:34,000
with an ID of max and a name of Maximilian.

29
00:01:37,000 --> 00:01:40,000
And then, we have another client here

30
00:01:41,000 --> 00:01:44,000
with a name of Manuel and an ID of manu.

31
00:01:45,000 --> 00:01:47,000
So, what I already have down there.

32
00:01:47,000 --> 00:01:48,000
But, in reality, you would, of course,

33
00:01:48,000 --> 00:01:51,000
often get such data from a database, for example,

34
00:01:51,000 --> 00:01:54,000
and you want to generate that dynamically.

35
00:01:54,000 --> 00:01:57,000
You can do this as well just as you know it

36
00:01:57,000 --> 00:02:01,000
from standard React because this is standard React.

37
00:02:01,000 --> 00:02:04,000
Inside of this component, it is a standard React component,

38
00:02:04,000 --> 00:02:07,000
nothing special about that.

39
00:02:07,000 --> 00:02:10,000
So, therefore, we can map our clients

40
00:02:10,000 --> 00:02:12,000
to list items just as we know it.

41
00:02:12,000 --> 00:02:15,000
Set a key, as we should to ensure that React

42
00:02:15,000 --> 00:02:18,000
is able to fully understand this list

43
00:02:18,000 --> 00:02:21,000
and update this list efficiently.

44
00:02:21,000 --> 00:02:24,000
And set this to client.id, for example,

45
00:02:24,000 --> 00:02:26,000
since that is a unique identifier.

46
00:02:26,000 --> 00:02:30,000
And then, in the list item, we can use our link

47
00:02:30,000 --> 00:02:33,000
and between the link tags, output client.name

48
00:02:33,000 --> 00:02:37,000
and for the link set a ref, which we also set

49
00:02:37,000 --> 00:02:40,000
to a dynamic value where we, for example,

50
00:02:40,000 --> 00:02:45,000
use back ticks to create a template literal

51
00:02:45,000 --> 00:02:49,000
to set this POV to /clients/

52
00:02:49,000 --> 00:02:53,000
and then inject a dynamic value here, which is client ID.

53
00:02:55,000 --> 00:02:57,000
So, with that, we render a bunch of list items

54
00:02:57,000 --> 00:03:01,000
with a bunch of links where, inside of the link,

55
00:03:01,000 --> 00:03:03,000
is a text, which is visible to the user

56
00:03:03,000 --> 00:03:06,000
we output the client name and as a value

57
00:03:06,000 --> 00:03:09,000
for the target for the destination of that link

58
00:03:09,000 --> 00:03:13,000
we create a string with a template literal

59
00:03:13,000 --> 00:03:15,000
by having the hard coded /clients part.

60
00:03:15,000 --> 00:03:18,000
And then, the dynamically injected client ID,

61
00:03:18,000 --> 00:03:21,000
which is different for every client we're looping through.

62
00:03:23,000 --> 00:03:25,000
Hence, with that, if we save this

63
00:03:25,000 --> 00:03:28,000
and we go back to our clients page

64
00:03:28,000 --> 00:03:32,000
it looks like before, and it works like before.

65
00:03:32,000 --> 00:03:35,000
But now that list is generated dynamically.

66
00:03:35,000 --> 00:03:39,000
And that works just as you know it from standard React.