1
00:00:02,000 --> 00:00:04,000
To extract the concrete value

2
00:00:04,000 --> 00:00:07,000
entered in the URL when this page is loaded

3
00:00:07,000 --> 00:00:10,000
Next.js gives us a special hook which we can use.

4
00:00:10,000 --> 00:00:12,000
A special react hook

5
00:00:12,000 --> 00:00:14,000
which we can use in functional components.

6
00:00:14,000 --> 00:00:18,000
It also has an alternative for a class-based components

7
00:00:18,000 --> 00:00:21,000
a higher order component you can wrap around your component

8
00:00:21,000 --> 00:00:24,000
and I do discuss this in my full Next.js course

9
00:00:24,000 --> 00:00:27,000
but we can ignore that here.

10
00:00:27,000 --> 00:00:30,000
Here, instead we import from next to be precise

11
00:00:30,000 --> 00:00:32,000
from next/router

12
00:00:32,000 --> 00:00:35,000
which is a sub package of the next package

13
00:00:35,000 --> 00:00:39,000
which exposes routing specific functionality.

14
00:00:39,000 --> 00:00:41,000
And here we got the youth router hook.

15
00:00:41,000 --> 00:00:45,000
It's a regular react hook, just not one built into react

16
00:00:45,000 --> 00:00:48,000
but accustomed hook built by the next team.

17
00:00:50,000 --> 00:00:51,000
And we can now call this hook

18
00:00:51,000 --> 00:00:56,000
instead of the detailed page, simply like this.

19
00:00:56,000 --> 00:00:59,000
If we do that, we get access to a router object

20
00:00:59,000 --> 00:01:01,000
and on that router object

21
00:01:01,000 --> 00:01:03,000
we then got certain pieces of data

22
00:01:03,000 --> 00:01:06,000
and certain methods which we can call.

23
00:01:06,000 --> 00:01:10,000
Now, for example, we get methods for programmatic navigation

24
00:01:10,000 --> 00:01:13,000
but we don't need this here so we can ignore this for now

25
00:01:13,000 --> 00:01:18,000
but we also get access to devalues encoded in the URL

26
00:01:18,000 --> 00:01:22,000
so, to deconcrete values of these dynamic path segments.

27
00:01:23,000 --> 00:01:26,000
And getting access is easy on this router object

28
00:01:26,000 --> 00:01:29,000
we've got this query property

29
00:01:29,000 --> 00:01:31,000
which gives us access to a nested object

30
00:01:31,000 --> 00:01:36,000
and on that query object we then have the identifier

31
00:01:36,000 --> 00:01:39,000
which we chose between the square brackets

32
00:01:39,000 --> 00:01:40,000
as a property name.

33
00:01:40,000 --> 00:01:44,000
So, in my case newsId because that's what I entered here

34
00:01:44,000 --> 00:01:47,000
as a file name between the square brackets.

35
00:01:47,000 --> 00:01:51,000
And that will then hold the concrete value in the URL

36
00:01:51,000 --> 00:01:55,000
for this dynamic segment for which this page was visited.

37
00:01:55,000 --> 00:01:58,000
So, if we now just console log this

38
00:01:58,000 --> 00:02:00,000
for the moment to see what's in there.

39
00:02:01,000 --> 00:02:05,000
If I save that and go back and open the developer tools

40
00:02:05,000 --> 00:02:09,000
if we reload we see undefined first and then something else.

41
00:02:09,000 --> 00:02:11,000
Now, we see tool logs here

42
00:02:11,000 --> 00:02:13,000
because that's how use router works.

43
00:02:13,000 --> 00:02:16,000
It runs immediately when the pages first rendered

44
00:02:16,000 --> 00:02:20,000
and at this point it doesn't yet know what's in the URL

45
00:02:20,000 --> 00:02:22,000
but then once we have that information

46
00:02:22,000 --> 00:02:26,000
the component renders again and we got that concrete value

47
00:02:26,000 --> 00:02:29,000
that is just how that hook works.

48
00:02:29,000 --> 00:02:32,000
So, the second time it executes the second time

49
00:02:32,000 --> 00:02:35,000
this component is evaluated we got something else

50
00:02:35,000 --> 00:02:40,000
which is to concrete URL value I entered here.

51
00:02:40,000 --> 00:02:44,000
And if I have this-course-is-great

52
00:02:44,000 --> 00:02:47,000
then we would see this here being locked.

53
00:02:47,000 --> 00:02:48,000
And that's how we can get access

54
00:02:48,000 --> 00:02:52,000
to the concrete data encoded in the URL.

55
00:02:53,000 --> 00:02:55,000
Now, why is this helpful?

56
00:02:55,000 --> 00:02:58,000
Well, we could, for example use this now

57
00:02:58,000 --> 00:03:02,000
to get our newsId like this

58
00:03:02,000 --> 00:03:06,000
and then if we had a database, if we had some backend API

59
00:03:06,000 --> 00:03:09,000
from which we can fetch our news

60
00:03:09,000 --> 00:03:14,000
we could send a request to the backend API here

61
00:03:16,000 --> 00:03:21,000
to fetch the news item with newsId.

62
00:03:21,000 --> 00:03:23,000
That's what we could do here.

63
00:03:23,000 --> 00:03:24,000
I will not do it here

64
00:03:24,000 --> 00:03:28,000
because we'll soon dive into data fetching and data storage

65
00:03:28,000 --> 00:03:31,000
and we'll see different approaches we can use there

66
00:03:31,000 --> 00:03:34,000
with Next.js so we are going to take a look at that

67
00:03:34,000 --> 00:03:36,000
in detail in a couple of minutes

68
00:03:36,000 --> 00:03:41,000
but we could do this here if we had such a backend API

69
00:03:41,000 --> 00:03:42,000
but we don't have it here

70
00:03:42,000 --> 00:03:44,000
because that's just a simple dummy app

71
00:03:44,000 --> 00:03:47,000
to get started with the file based routing system

72
00:03:47,000 --> 00:03:49,000
but that is how it would work.

73
00:03:49,000 --> 00:03:51,000
And that's how we can build dynamic pages

74
00:03:51,000 --> 00:03:53,000
which work for different pieces of data

75
00:03:53,000 --> 00:03:56,000
and then can do different things based

76
00:03:56,000 --> 00:03:58,000
on different pieces of data.

77
00:03:58,000 --> 00:04:02,000
Here, we could fetch different news items from a database

78
00:04:02,000 --> 00:04:05,000
based on the different Ids for which we visit this page.