1
00:00:02,000 --> 00:00:05,000
So now we know how to use the link.

2
00:00:05,000 --> 00:00:07,000
Now for longer POS,

3
00:00:07,000 --> 00:00:10,000
constructing a link destination like this.

4
00:00:10,000 --> 00:00:13,000
so by building a string like this

5
00:00:13,000 --> 00:00:16,000
can be cumbersome or annoying.

6
00:00:16,000 --> 00:00:21,000
That's why Next.js also gives you an alternative way

7
00:00:21,000 --> 00:00:24,000
an alternative value you can provide

8
00:00:24,000 --> 00:00:26,000
for the REFPROP on the link.

9
00:00:26,000 --> 00:00:28,000
Instead of providing a string

10
00:00:28,000 --> 00:00:30,000
which is the path you want to go to,

11
00:00:30,000 --> 00:00:32,000
you can provide an object.

12
00:00:32,000 --> 00:00:36,000
So now this is not a special double curly brace syntax,

13
00:00:36,000 --> 00:00:38,000
this is still single curly braces

14
00:00:38,000 --> 00:00:41,000
to evaluate a JavaScript expression,

15
00:00:41,000 --> 00:00:45,000
and the expression here then just is a new object

16
00:00:45,000 --> 00:00:46,000
which I'm creating.

17
00:00:46,000 --> 00:00:48,000
And here that's a special kind of object

18
00:00:48,000 --> 00:00:52,000
Next.js expects, as an alternative to a string

19
00:00:52,000 --> 00:00:54,000
as a value for the ref.

20
00:00:54,000 --> 00:00:59,000
And here we can set various properties Next.js is expecting.

21
00:00:59,000 --> 00:01:02,000
For example, the path name, property

22
00:01:02,000 --> 00:01:07,000
which here would be /clients/ and then important [Id]

23
00:01:09,000 --> 00:01:11,000
So we describe the path

24
00:01:11,000 --> 00:01:14,000
as it would lead to our file in the pages folder.

25
00:01:14,000 --> 00:01:17,000
So here we want to go into client's folder

26
00:01:17,000 --> 00:01:21,000
and then into the Id folder with square brackets around Id

27
00:01:21,000 --> 00:01:24,000
and then to the index.js file as you learned,

28
00:01:24,000 --> 00:01:27,000
that is then the default file Next.js we'll be looking for,

29
00:01:27,000 --> 00:01:32,000
hence, the path name here is /client/[Id].

30
00:01:32,000 --> 00:01:35,000
And then we need to let Next.js know,

31
00:01:35,000 --> 00:01:37,000
what the concrete value should be

32
00:01:37,000 --> 00:01:40,000
that should be plucked in for this ID here for this link,

33
00:01:40,000 --> 00:01:42,000
which we're building.

34
00:01:42,000 --> 00:01:44,000
And we do this through the query property

35
00:01:44,000 --> 00:01:48,000
which we can set into this ref object.

36
00:01:48,000 --> 00:01:50,000
And that then is an object

37
00:01:50,000 --> 00:01:54,000
just as it is when we retrieve it with use router.

38
00:01:54,000 --> 00:01:57,000
There query is also an object we can retrieve

39
00:01:57,000 --> 00:02:00,000
to have key value pairs where the keys

40
00:02:00,000 --> 00:02:03,000
are our dynamic segment identifiers

41
00:02:03,000 --> 00:02:06,000
and the values are the concrete values entered

42
00:02:06,000 --> 00:02:10,000
and it's the same here when we define a link.

43
00:02:10,000 --> 00:02:14,000
We then have a key which is our dynamic segment identifier.

44
00:02:14,000 --> 00:02:17,000
So Id in this case, and then the concrete value

45
00:02:17,000 --> 00:02:20,000
for this concrete link, which we're building here.

46
00:02:20,000 --> 00:02:22,000
So in this case, client.id

47
00:02:23,000 --> 00:02:26,000
and that that is then an alternative way

48
00:02:26,000 --> 00:02:27,000
of building that link.

49
00:02:27,000 --> 00:02:29,000
Now it's totally up to you,

50
00:02:29,000 --> 00:02:33,000
If you prefer this over creating a string or not,

51
00:02:33,000 --> 00:02:36,000
this is totally up to you, but you can build it like this.

52
00:02:36,000 --> 00:02:39,000
And if you then save this and reload

53
00:02:39,000 --> 00:02:44,000
you still have the client's page with those working links.

54
00:02:44,000 --> 00:02:48,000
And I'm just showing these alternatives so that you know

55
00:02:48,000 --> 00:02:50,000
all these different ways of using Next,

56
00:02:50,000 --> 00:02:53,000
and in this case of using the link component