1
00:00:00,000 --> 00:00:02,000
So did you succeed?

2
00:00:02,000 --> 00:00:06,000
Let's now create those routes together.

3
00:00:06,000 --> 00:00:09,000
And I will start with the meals route.

4
00:00:09,000 --> 00:00:12,000
Now, for that, we should go to that app folder

5
00:00:12,000 --> 00:00:14,000
because that folder has a special role

6
00:00:14,000 --> 00:00:17,000
in NextJS projects as you learned.

7
00:00:17,000 --> 00:00:20,000
And in there we can set up a new route

8
00:00:20,000 --> 00:00:25,000
and a new path segment that can be entered in the URL

9
00:00:25,000 --> 00:00:27,000
by simply adding a folder

10
00:00:27,000 --> 00:00:30,000
with that intended path segment as a name.

11
00:00:30,000 --> 00:00:33,000
So for example, meals if we want to be able to go

12
00:00:33,000 --> 00:00:37,000
to our domain slash meals.

13
00:00:38,000 --> 00:00:40,000
Now, as I also mentioned

14
00:00:40,000 --> 00:00:43,000
before, adding just a folder like this

15
00:00:43,000 --> 00:00:45,000
won't do anything though.

16
00:00:45,000 --> 00:00:48,000
Instead you must add a page.js file here

17
00:00:48,000 --> 00:00:51,000
to show something on the screen.

18
00:00:51,000 --> 00:00:53,000
And then in this page.js file,

19
00:00:53,000 --> 00:00:57,000
you should export a component, a React component,

20
00:00:57,000 --> 00:01:00,000
a functional component to be precise.

21
00:01:00,000 --> 00:01:03,000
In this case, you could name it MealsPage,

22
00:01:03,000 --> 00:01:06,000
though this name here, as I mentioned, doesn't matter,

23
00:01:06,000 --> 00:01:08,000
it's totally up to you,

24
00:01:08,000 --> 00:01:12,000
but you must export a component, that's important.

25
00:01:13,000 --> 00:01:16,000
And then here I'll simply return an H1 element

26
00:01:16,000 --> 00:01:18,000
where I say meals page,

27
00:01:19,000 --> 00:01:21,000
that's of course just some dummy content

28
00:01:21,000 --> 00:01:22,000
and we're going to replace it

29
00:01:22,000 --> 00:01:24,000
with more meaningful content later.

30
00:01:25,000 --> 00:01:28,000
But with that added, we got the first route.

31
00:01:28,000 --> 00:01:32,000
Now the goal also was to add a nested route

32
00:01:32,000 --> 00:01:33,000
in that meals folder

33
00:01:33,000 --> 00:01:38,000
so that we can also visit slash meals slash share.

34
00:01:38,000 --> 00:01:41,000
And for that we can simply create a nested folder

35
00:01:41,000 --> 00:01:45,000
with again, that path segment that we want to have

36
00:01:45,000 --> 00:01:46,000
as a folder name.

37
00:01:47,000 --> 00:01:50,000
And again, we need a page.js file in there in order

38
00:01:50,000 --> 00:01:53,000
to be able to visit that.

39
00:01:53,000 --> 00:01:56,000
And then of course, export a component function.

40
00:01:56,000 --> 00:02:00,000
So here are the share meal page,

41
00:02:00,000 --> 00:02:02,000
that sounds like a fitting name.

42
00:02:03,000 --> 00:02:07,000
And then I'll return an H1 element where I say share meal.

43
00:02:09,000 --> 00:02:10,000
Now with that, we got two

44
00:02:10,000 --> 00:02:13,000
of those three routes you should add.

45
00:02:13,000 --> 00:02:14,000
But there also is another route,

46
00:02:14,000 --> 00:02:16,000
not nested into the meals folder,

47
00:02:16,000 --> 00:02:19,000
but instead a sibling to the meals folder.

48
00:02:20,000 --> 00:02:22,000
And that is the community route.

49
00:02:24,000 --> 00:02:26,000
And again, in here we add a page.js file,

50
00:02:26,000 --> 00:02:31,000
and then export our community page component here,

51
00:02:32,000 --> 00:02:36,000
and then simply return H1 community.

52
00:02:38,000 --> 00:02:41,000
Now with that, we got those three routes set up,

53
00:02:41,000 --> 00:02:45,000
but I also told you to add some links that allow users

54
00:02:45,000 --> 00:02:47,000
to navigate between those routes.

55
00:02:47,000 --> 00:02:50,000
And therefore that's exactly what I'll do here.

56
00:02:50,000 --> 00:02:52,000
And I'll start on the homepage actually.

57
00:02:53,000 --> 00:02:56,000
There, below this H1 element, I'll add a paragraph

58
00:02:56,000 --> 00:02:59,000
that should display a link to the meals page.

59
00:02:59,000 --> 00:03:02,000
And for that, as you learned,

60
00:03:02,000 --> 00:03:06,000
you should use the link component provided by NextJS.

61
00:03:07,000 --> 00:03:12,000
This is a component that renders an anchor element,

62
00:03:12,000 --> 00:03:15,000
but that also allows NextJS to gain control

63
00:03:15,000 --> 00:03:17,000
of the ongoing navigation

64
00:03:17,000 --> 00:03:20,000
and keep you in that single page application.

65
00:03:21,000 --> 00:03:24,000
So here, if I want a link that takes me to the meals page,

66
00:03:24,000 --> 00:03:26,000
we can use the link component

67
00:03:26,000 --> 00:03:28,000
and then simply set the href attribute

68
00:03:28,000 --> 00:03:31,000
or the href prop to slash meals.

69
00:03:33,000 --> 00:03:36,000
And of course, now we can also add extra links now,

70
00:03:36,000 --> 00:03:38,000
for example, one that leads

71
00:03:38,000 --> 00:03:41,000
to slash meals slash share like this.

72
00:03:43,000 --> 00:03:45,000
And then I'll add one last link that takes me

73
00:03:45,000 --> 00:03:47,000
to the community page

74
00:03:48,000 --> 00:03:51,000
by pointing at slash community.

75
00:03:52,000 --> 00:03:56,000
And of course, these paths, which I'm setting up here,

76
00:03:56,000 --> 00:04:00,000
do map to the paths I set up in my folder structure.

77
00:04:00,000 --> 00:04:04,000
So slash meals goes to this page, meals share goes

78
00:04:04,000 --> 00:04:06,000
to this page or this folder

79
00:04:06,000 --> 00:04:08,000
and community goes to this folder.

80
00:04:09,000 --> 00:04:10,000
And then of course,

81
00:04:10,000 --> 00:04:13,000
the respective page JS files become active.

82
00:04:16,000 --> 00:04:17,000
So that's how that works.

83
00:04:17,000 --> 00:04:19,000
And if you now save that

84
00:04:19,000 --> 00:04:22,000
and you then make sure that the development server is up

85
00:04:22,000 --> 00:04:25,000
and running, which is the case on Code Sandbox,

86
00:04:25,000 --> 00:04:29,000
but which you have to start manually locally, by the way,

87
00:04:29,000 --> 00:04:31,000
locally in order to start it, you also have

88
00:04:31,000 --> 00:04:33,000
to run npm install first

89
00:04:35,000 --> 00:04:37,000
and then you should be able to start it.

90
00:04:37,000 --> 00:04:39,000
And if you make sure that that's the case,

91
00:04:39,000 --> 00:04:43,000
you can visit local host 3000

92
00:04:43,000 --> 00:04:45,000
or whichever address is showing up

93
00:04:45,000 --> 00:04:48,000
for you here when you start that development server.

94
00:04:48,000 --> 00:04:51,000
And you should be able to see that starting page.

95
00:04:51,000 --> 00:04:53,000
Now those links here are a bit hard to read.

96
00:04:53,000 --> 00:04:56,000
This is of course not the final styling,

97
00:04:56,000 --> 00:04:59,000
we'll make this app look better throughout this section.

98
00:04:59,000 --> 00:05:03,000
But we have these links at least, and we can click them.

99
00:05:03,000 --> 00:05:06,000
And if I click the meals link, I'm taken to the meals page.

100
00:05:06,000 --> 00:05:07,000
So that works.

101
00:05:07,000 --> 00:05:09,000
If I click the share meal link, I'm taken

102
00:05:09,000 --> 00:05:13,000
to slash meals slash share, and that also works.

103
00:05:13,000 --> 00:05:18,000
And if I click the community link, I'm unsurprisingly taken

104
00:05:18,000 --> 00:05:21,000
to slash community and that community page.

105
00:05:22,000 --> 00:05:25,000
And with that, we added these three routes.

106
00:05:25,000 --> 00:05:28,000
Now, there also was another task

107
00:05:28,000 --> 00:05:32,000
to also create a dynamic route that allows users to go

108
00:05:32,000 --> 00:05:36,000
to slash meals slash some dynamic segment,

109
00:05:36,000 --> 00:05:40,000
some identifier of the meal a user wants to view.

110
00:05:41,000 --> 00:05:44,000
And you also learned how that can be done.

111
00:05:44,000 --> 00:05:46,000
For that, back in that app folder,

112
00:05:46,000 --> 00:05:49,000
back in that meals folder,

113
00:05:49,000 --> 00:05:51,000
since that page that should be added is nested

114
00:05:51,000 --> 00:05:53,000
inside the meals path,

115
00:05:53,000 --> 00:05:58,000
it's slash meals slash some dynamic element.

116
00:05:58,000 --> 00:06:00,000
And therefore inside of that meals folder,

117
00:06:00,000 --> 00:06:01,000
we add another sub folder,

118
00:06:01,000 --> 00:06:04,000
which is a sibling to the share folder.

119
00:06:04,000 --> 00:06:07,000
And we turn that into a dynamic route here

120
00:06:07,000 --> 00:06:11,000
by adding square bracket to the folder name.

121
00:06:11,000 --> 00:06:14,000
And then between those square bracket, as you learned,

122
00:06:14,000 --> 00:06:18,000
you put any identifier of your choice, for example,

123
00:06:18,000 --> 00:06:21,000
meal slug, but again, this is up to you.

124
00:06:22,000 --> 00:06:24,000
With that added though,

125
00:06:24,000 --> 00:06:27,000
you can then add your page.js file.

126
00:06:27,000 --> 00:06:30,000
And now this page here will become active

127
00:06:30,000 --> 00:06:34,000
whenever the user enters the address slash meals slash

128
00:06:34,000 --> 00:06:37,000
something, which is not shared though

129
00:06:37,000 --> 00:06:41,000
because NextJS is smart enough to understand

130
00:06:41,000 --> 00:06:44,000
that if you are visiting slash meals slash share

131
00:06:44,000 --> 00:06:46,000
that it's this page that should become active

132
00:06:47,000 --> 00:06:50,000
and not this dynamic page,

133
00:06:50,000 --> 00:06:53,000
even though theoretically share could be treated as a value

134
00:06:53,000 --> 00:06:55,000
for this dynamic segment.

135
00:06:56,000 --> 00:06:59,000
But NextJS is smart enough to see

136
00:06:59,000 --> 00:07:01,000
and understand that there is a more

137
00:07:01,000 --> 00:07:04,000
specifically named folder, which therefore has precedence

138
00:07:04,000 --> 00:07:07,000
over this dynamic segment.

139
00:07:07,000 --> 00:07:11,000
But anything but share like something or ABC,

140
00:07:11,000 --> 00:07:15,000
or my dash meal will be treated as a value

141
00:07:15,000 --> 00:07:16,000
for this dynamic segment

142
00:07:16,000 --> 00:07:20,000
and will lead to the activation of this page.js file.

143
00:07:21,000 --> 00:07:24,000
And therefore with that here we can export

144
00:07:24,000 --> 00:07:26,000
another component function,

145
00:07:26,000 --> 00:07:28,000
which could be named meal details page

146
00:07:29,000 --> 00:07:33,000
where I want to output the title here

147
00:07:33,000 --> 00:07:36,000
where I say meal details like this.

148
00:07:38,000 --> 00:07:41,000
And with that done, if we now save this,

149
00:07:41,000 --> 00:07:44,000
we can also visit slash meals slash ABC

150
00:07:45,000 --> 00:07:47,000
or slash something.

151
00:07:48,000 --> 00:07:52,000
However, as mentioned, if we visit slash meals slash share,

152
00:07:52,000 --> 00:07:57,000
we go to the share meal page, so that works as intended.

153
00:07:57,000 --> 00:08:00,000
And that's then this exercise solved.

154
00:08:00,000 --> 00:08:03,000
With that, we repeated what we learned

155
00:08:03,000 --> 00:08:06,000
and you got more practice with this file-based router

156
00:08:06,000 --> 00:08:08,000
that's provided by NextJS.

157
00:08:08,000 --> 00:08:10,000
And we're therefore now ready

158
00:08:10,000 --> 00:08:14,000
to finally start working on the contents of those pages

159
00:08:14,000 --> 00:08:17,000
and on making this website more useful and beautiful.