1
00:00:02,000 --> 00:00:05,000
Now, I did mention two extensions

2
00:00:05,000 --> 00:00:09,000
or variations of this concept here.

3
00:00:09,000 --> 00:00:12,000
And the nested dynamic segments

4
00:00:12,000 --> 00:00:15,000
that was one important aspect of routing

5
00:00:15,000 --> 00:00:18,000
in Next.js when it comes to dynamic routes.

6
00:00:18,000 --> 00:00:21,000
The other important variation or extension

7
00:00:21,000 --> 00:00:26,000
is that you can also define collect all routes

8
00:00:26,000 --> 00:00:30,000
or catch all routes, and what does this mean?

9
00:00:30,000 --> 00:00:34,000
Let's say, we also have a blog sub folder

10
00:00:34,000 --> 00:00:38,000
and now we might have different ways of loading blog posts.

11
00:00:38,000 --> 00:00:41,000
For example, we could get just the slug,

12
00:00:41,000 --> 00:00:44,000
just the idea of a blog post.

13
00:00:44,000 --> 00:00:45,000
So therefore, of course, in there

14
00:00:45,000 --> 00:00:48,000
we could add a file named [id].js.

15
00:00:48,000 --> 00:00:52,000
But maybe we also want to support other URLs

16
00:00:52,000 --> 00:00:55,000
for loading a single blog post.

17
00:00:55,000 --> 00:01:00,000
For example, we want a support /blog/the-id-of-a-post

18
00:01:02,000 --> 00:01:05,000
but maybe we also want to support

19
00:01:05,000 --> 00:01:10,000
/blog/2020/12/the-idea-of-a-post.

20
00:01:12,000 --> 00:01:14,000
To only search for this post

21
00:01:14,000 --> 00:01:18,000
if it was released in December 2020.

22
00:01:18,000 --> 00:01:23,000
Or we just want to load blog/2020/12

23
00:01:23,000 --> 00:01:28,000
to load all blog posts for that specific month in that year.

24
00:01:28,000 --> 00:01:32,000
So, we have different URL formats which we want to support,

25
00:01:32,000 --> 00:01:34,000
and maybe we want to support them all

26
00:01:34,000 --> 00:01:38,000
with the same component, so no matter what the path is

27
00:01:38,000 --> 00:01:40,000
and how many segments it has

28
00:01:40,000 --> 00:01:44,000
we always want to load the same component.

29
00:01:44,000 --> 00:01:48,000
And that's what we can do with such a catch all route.

30
00:01:48,000 --> 00:01:51,000
Instead of just using square brackets,

31
00:01:51,000 --> 00:01:54,000
and then any identifier of our choice

32
00:01:54,000 --> 00:01:58,000
we can add a syntax here or a special notation here,

33
00:01:58,000 --> 00:02:00,000
which you might know from JavaScript.

34
00:02:00,000 --> 00:02:02,000
We can add three dots here,

35
00:02:02,000 --> 00:02:05,000
like the spread operator in JavaScript.

36
00:02:05,000 --> 00:02:08,000
And then, again, any name of your choice.

37
00:02:08,000 --> 00:02:11,000
So, that could be ID, that could be slug.

38
00:02:11,000 --> 00:02:15,000
I'll go for slug here but, again, that name is up to you.

39
00:02:15,000 --> 00:02:18,000
The three dots are not though.

40
00:02:18,000 --> 00:02:21,000
This, of course, is no special file name

41
00:02:21,000 --> 00:02:24,000
from the operating system's perspective.

42
00:02:24,000 --> 00:02:27,000
But Next.js will treat it in a special way,

43
00:02:27,000 --> 00:02:30,000
just as it treats all files with square brackets

44
00:02:30,000 --> 00:02:33,000
in the file name in a special way.

45
00:02:33,000 --> 00:02:36,000
So, how does it treat that file?

46
00:02:36,000 --> 00:02:39,000
Well, we still define a React component in there,

47
00:02:39,000 --> 00:02:43,000
so we could have the blog posts page here, for example,

48
00:02:43,000 --> 00:02:45,000
to load all the blog posts.

49
00:02:45,000 --> 00:02:47,000
But then we don't know if we get, for example,

50
00:02:47,000 --> 00:02:50,000
a path with the year and the month,

51
00:02:50,000 --> 00:02:55,000
or just with the year, or with a specific blog post already,

52
00:02:55,000 --> 00:02:57,000
or some other filter criteria,

53
00:02:57,000 --> 00:03:01,000
depending on what want to support in our page.

54
00:03:02,000 --> 00:03:04,000
So, here, I'll return my good old div

55
00:03:04,000 --> 00:03:08,000
with the h1 tag of the blog posts,

56
00:03:08,000 --> 00:03:11,000
and then export this as a default.

57
00:03:11,000 --> 00:03:14,000
And I will already import useRouter here,

58
00:03:16,000 --> 00:03:21,000
useRouter from next/router, so that we can look

59
00:03:21,000 --> 00:03:25,000
into what the next/router gives us here.

60
00:03:25,000 --> 00:03:27,000
So, therefore, I'll get access

61
00:03:27,000 --> 00:03:28,000
to my router by calling useRouter

62
00:03:30,000 --> 00:03:35,000
and then console.log the good old router.query value again,

63
00:03:35,000 --> 00:03:40,000
like this, and if we now do that and save this,

64
00:03:41,000 --> 00:03:46,000
and we go to /blog/2020/12, for example,

65
00:03:47,000 --> 00:03:51,000
you see I do load the blog posts page.

66
00:03:51,000 --> 00:03:53,000
And, here, we get our query object

67
00:03:53,000 --> 00:03:58,000
with that slug property because I chose slug as a name here

68
00:03:58,000 --> 00:04:02,000
after the three dots, but the three dots are not part

69
00:04:02,000 --> 00:04:04,000
of that property name, as you can tell.

70
00:04:04,000 --> 00:04:08,000
And then, here, we get an array now and that's different.

71
00:04:08,000 --> 00:04:12,000
Before we always got a single value, a single string.

72
00:04:12,000 --> 00:04:13,000
Now, it's an array of strings

73
00:04:13,000 --> 00:04:17,000
for the different segments that were caught.

74
00:04:17,000 --> 00:04:20,000
So, here we caught the 2020,

75
00:04:20,000 --> 00:04:24,000
and the 12 segment separated by slashes in the URL.

76
00:04:25,000 --> 00:04:29,000
But because we defined this as a catch all path

77
00:04:29,000 --> 00:04:34,000
with the three dots here, next.js does catch anything

78
00:04:34,000 --> 00:04:38,000
after blog because we're defining this in the blog folder.

79
00:04:38,000 --> 00:04:42,000
Anything after blog is caught by this page component

80
00:04:42,000 --> 00:04:45,000
and is made available as an array

81
00:04:45,000 --> 00:04:47,000
through that slug property

82
00:04:47,000 --> 00:04:50,000
on that query object in the router object.

83
00:04:51,000 --> 00:04:53,000
And now we could be using these values

84
00:04:53,000 --> 00:04:56,000
to send a request to our database, to filter

85
00:04:56,000 --> 00:05:01,000
for blog posts where the year is 2020 and the month is 12.

86
00:05:01,000 --> 00:05:03,000
And, of course, you could encode

87
00:05:03,000 --> 00:05:08,000
whatever you want here, and you get those values.

88
00:05:09,000 --> 00:05:13,000
So, that's how this works and how you can utilize that.

89
00:05:13,000 --> 00:05:15,000
And that's another important feature,

90
00:05:15,000 --> 00:05:18,000
which sometimes can become important,

91
00:05:18,000 --> 00:05:20,000
and which sometimes can be helpful,

92
00:05:20,000 --> 00:05:24,000
since it allows you to write very dynamic paths,

93
00:05:24,000 --> 00:05:29,000
where not just the individual segment values are dynamic

94
00:05:29,000 --> 00:05:33,000
but even the number of segments are dynamic.

95
00:05:33,000 --> 00:05:37,000
And that's not always what you need, but sometimes it is.

96
00:05:37,000 --> 00:05:38,000
And therefore it is important to know

97
00:05:38,000 --> 00:05:42,000
that Next.js supports this syntax as well.