1
00:00:00,000 --> 00:00:03,000
So now that we have a solid understanding

2
00:00:03,000 --> 00:00:05,000
of how we can generally set up routes

3
00:00:05,000 --> 00:00:08,000
and also work with regular components,

4
00:00:08,000 --> 00:00:10,000
before we dive into that Meals app,

5
00:00:10,000 --> 00:00:13,000
there's just one other route type I also wanna

6
00:00:13,000 --> 00:00:15,000
explore together with you.

7
00:00:15,000 --> 00:00:19,000
Because let's say we also wanna have a blog route in here.

8
00:00:19,000 --> 00:00:22,000
So of course we could add a blog folder in the app directory

9
00:00:22,000 --> 00:00:25,000
and add a page.js file in there.

10
00:00:25,000 --> 00:00:29,000
But let's then say, we also wanna have different blog posts.

11
00:00:29,000 --> 00:00:31,000
So that nested in that blog folder,

12
00:00:31,000 --> 00:00:36,000
we have a post-1 folder, a post-2 folder, and so on.

13
00:00:36,000 --> 00:00:40,000
And of course, this then doesn't lead anywhere

14
00:00:40,000 --> 00:00:44,000
because this would mean that we need to add a new folder

15
00:00:44,000 --> 00:00:48,000
whenever a new blog post is added to the database

16
00:00:48,000 --> 00:00:53,000
or wherever we're storing them, and that is not scalable

17
00:00:53,000 --> 00:00:54,000
and not maintainable.

18
00:00:54,000 --> 00:00:56,000
So what we need here

19
00:00:56,000 --> 00:00:59,000
for these posts is a so-called dynamic route,

20
00:00:59,000 --> 00:01:02,000
a route which we only define once,

21
00:01:02,000 --> 00:01:06,000
but which is then capable of rendering different pages

22
00:01:06,000 --> 00:01:08,000
for different blog posts.

23
00:01:09,000 --> 00:01:13,000
And in NextJS, we can create such a dynamic route

24
00:01:13,000 --> 00:01:17,000
by adding a nested folder where we use square brackets.

25
00:01:17,000 --> 00:01:21,000
This is a special syntax supported by NextJS,

26
00:01:21,000 --> 00:01:25,000
where you then put any placeholder, any identifier

27
00:01:25,000 --> 00:01:29,000
of your choice between those square brackets, for example,

28
00:01:29,000 --> 00:01:32,000
slug, or whatever you want.

29
00:01:32,000 --> 00:01:35,000
And this placeholder will become important later.

30
00:01:36,000 --> 00:01:38,000
Then we again, need a page.js file

31
00:01:38,000 --> 00:01:42,000
because of course we want to render some content.

32
00:01:42,000 --> 00:01:43,000
And if you want to build a new page,

33
00:01:43,000 --> 00:01:47,000
that should be visitable, you need a page.js file.

34
00:01:48,000 --> 00:01:51,000
Now let's start with the page.js file directly

35
00:01:51,000 --> 00:01:53,000
in the blog folder though.

36
00:01:53,000 --> 00:01:57,000
There we could of course export a component called BlogPage

37
00:01:58,000 --> 00:02:01,000
where we then return this main element maybe

38
00:02:01,000 --> 00:02:03,000
and say, "The Blog".

39
00:02:04,000 --> 00:02:08,000
And then here I want to have, let's say, two paragraphs

40
00:02:08,000 --> 00:02:10,000
with links to different blog posts.

41
00:02:11,000 --> 00:02:13,000
So I'll use that link component

42
00:02:13,000 --> 00:02:16,000
and import that from next/link.

43
00:02:17,000 --> 00:02:21,000
And then here, let's say we wanna have one blog post

44
00:02:21,000 --> 00:02:22,000
under "/blog/post-1" like this,

45
00:02:29,000 --> 00:02:31,000
but then we also wanna have a second one

46
00:02:31,000 --> 00:02:36,000
that leads to Post 2 here in that path.

47
00:02:37,000 --> 00:02:39,000
So almost the same path,

48
00:02:39,000 --> 00:02:41,000
but different segments here at the end.

49
00:02:44,000 --> 00:02:48,000
Now we need to go to that page.js file in that slug folder,

50
00:02:48,000 --> 00:02:50,000
in that square brackets slug folder.

51
00:02:50,000 --> 00:02:51,000
And here of course,

52
00:02:51,000 --> 00:02:54,000
we also should export a component function,

53
00:02:54,000 --> 00:02:57,000
the blog post page, for example.

54
00:03:00,000 --> 00:03:02,000
And there we can again, return the main element

55
00:03:02,000 --> 00:03:07,000
and say "Blog Post", and we'll make this more dynamic later.

56
00:03:09,000 --> 00:03:11,000
With that, if we save everything

57
00:03:11,000 --> 00:03:16,000
and you go back, you will see that if you visit /blog,

58
00:03:19,000 --> 00:03:20,000
you have these two links,

59
00:03:20,000 --> 00:03:23,000
and if you click them, indeed you're taken

60
00:03:23,000 --> 00:03:24,000
to that blog post page.

61
00:03:24,000 --> 00:03:27,000
And that works for both links.

62
00:03:27,000 --> 00:03:30,000
And as you can tell, if you take a look

63
00:03:30,000 --> 00:03:33,000
at this URL, it changes.

64
00:03:33,000 --> 00:03:38,000
We have post-2 here as a segment after /blog

65
00:03:38,000 --> 00:03:42,000
and post-1 for that other link.

66
00:03:42,000 --> 00:03:45,000
But it's the same page.js file becoming active

67
00:03:45,000 --> 00:03:48,000
for different segment values, so

68
00:03:48,000 --> 00:03:51,000
for different path segment values.

69
00:03:51,000 --> 00:03:53,000
And that is what is achieved with

70
00:03:53,000 --> 00:03:56,000
that dynamic route syntax here.

71
00:03:56,000 --> 00:04:00,000
This square bracket thing here simply tells NextJS

72
00:04:00,000 --> 00:04:04,000
that we want to have some path segment

73
00:04:04,000 --> 00:04:06,000
after blog in this case,

74
00:04:06,000 --> 00:04:10,000
but that we don't know the exact value of the segment yet.

75
00:04:11,000 --> 00:04:15,000
And it's then this placeholder, this identifier slug

76
00:04:15,000 --> 00:04:18,000
that will give us access to the concrete value

77
00:04:18,000 --> 00:04:22,000
that we do get when that route is loaded.

78
00:04:22,000 --> 00:04:26,000
Because NextJS actually passes a props object

79
00:04:26,000 --> 00:04:29,000
to all those page components.

80
00:04:29,000 --> 00:04:33,000
And all these page components get one special prop,

81
00:04:33,000 --> 00:04:36,000
which you can pull out with help of destructuring,

82
00:04:36,000 --> 00:04:40,000
and that's a params prop, which again,

83
00:04:40,000 --> 00:04:42,000
is set by NextJS.

84
00:04:42,000 --> 00:04:44,000
You don't have to pass it manually

85
00:04:44,000 --> 00:04:47,000
because you're not rendering these components manually.

86
00:04:47,000 --> 00:04:50,000
Instead, NextJS is doing that for you,

87
00:04:50,000 --> 00:04:53,000
and it is setting this prop for you.

88
00:04:54,000 --> 00:04:56,000
And what's inside of this params prop?

89
00:04:56,000 --> 00:04:58,000
Well, this will be an object

90
00:04:58,000 --> 00:05:03,000
where every placeholder you had in such a dynamic route here

91
00:05:03,000 --> 00:05:04,000
will be a key.

92
00:05:04,000 --> 00:05:06,000
And the value stored under

93
00:05:06,000 --> 00:05:10,000
that key will be the concrete value encoded in the URL.

94
00:05:10,000 --> 00:05:13,000
So post-1, for example.

95
00:05:15,000 --> 00:05:18,000
And you can see that if you output it

96
00:05:18,000 --> 00:05:22,000
by accessing params.slug here in this case,

97
00:05:22,000 --> 00:05:23,000
in this page here.

98
00:05:25,000 --> 00:05:29,000
If you do that, you see post-1 here.

99
00:05:29,000 --> 00:05:34,000
If I enter anything-else here, you see anything-else here.

100
00:05:36,000 --> 00:05:38,000
And this is a great feature

101
00:05:38,000 --> 00:05:42,000
because this would now allow you to, for example, reach out

102
00:05:42,000 --> 00:05:46,000
to a database where your blog posts might be stored

103
00:05:46,000 --> 00:05:49,000
and fetch the blog post with that slug so

104
00:05:49,000 --> 00:05:52,000
that you can then show its content on this page instead.

105
00:05:53,000 --> 00:05:57,000
And that's how you can set up such dynamic routes.

106
00:05:57,000 --> 00:06:00,000
Now, NextJS has way more to offer.

107
00:06:00,000 --> 00:06:04,000
You can also set up custom not found pages, deal

108
00:06:04,000 --> 00:06:08,000
with errors, add more pages, fetch data, change data,

109
00:06:08,000 --> 00:06:11,000
and we'll do all that, but not in this demo project.

110
00:06:11,000 --> 00:06:15,000
Instead by working on that Meals app I showed you before.