1
00:00:00,000 --> 00:00:04,000
So now that we finished this starting page,

2
00:00:04,000 --> 00:00:07,000
let's as a next step work on this community page.

3
00:00:07,000 --> 00:00:11,000
And for that page, it's actually quite straightforward.

4
00:00:11,000 --> 00:00:13,000
I just wanna populate it

5
00:00:13,000 --> 00:00:16,000
with some dummy content.

6
00:00:16,000 --> 00:00:17,000
And therefore attached,

7
00:00:17,000 --> 00:00:20,000
you'll find my finished page.js file

8
00:00:20,000 --> 00:00:23,000
and you can simply replace yours with it.

9
00:00:23,000 --> 00:00:26,000
So replace your community page.js file

10
00:00:26,000 --> 00:00:28,000
with the one you find attached.

11
00:00:28,000 --> 00:00:33,000
Attached you will also find a page.module.css file,

12
00:00:33,000 --> 00:00:35,000
which you should also add next

13
00:00:35,000 --> 00:00:36,000
to the community page.js file

14
00:00:36,000 --> 00:00:39,000
so that the required styles are available.

15
00:00:40,000 --> 00:00:43,000
Now in that page.js file, you then see

16
00:00:43,000 --> 00:00:46,000
that I got a community component function exported there.

17
00:00:46,000 --> 00:00:48,000
And in that component,

18
00:00:48,000 --> 00:00:50,000
I'm just outputting some dummy text

19
00:00:50,000 --> 00:00:52,000
and some images in the end.

20
00:00:53,000 --> 00:00:55,000
So that if you save everything,

21
00:00:55,000 --> 00:00:58,000
the community page should look something like this,

22
00:00:58,000 --> 00:01:02,000
simply outputting some dummy fallback text.

23
00:01:02,000 --> 00:01:04,000
Because of course the main logic

24
00:01:04,000 --> 00:01:08,000
of this overall demo project will be related to the meals.

25
00:01:08,000 --> 00:01:11,000
It's there where we'll fetch data

26
00:01:11,000 --> 00:01:13,000
and add new meals and so on.

27
00:01:13,000 --> 00:01:16,000
And we'll get back to that soon.

28
00:01:16,000 --> 00:01:20,000
That's why here I just provided some dummy content for you.

29
00:01:20,000 --> 00:01:23,000
Now with that community page populated,

30
00:01:23,000 --> 00:01:25,000
there's one thing about the header

31
00:01:25,000 --> 00:01:27,000
or about this navigation specifically

32
00:01:27,000 --> 00:01:29,000
that I'd like to improve.

33
00:01:30,000 --> 00:01:33,000
We currently don't see which page is active.

34
00:01:33,000 --> 00:01:35,000
I am on the community page,

35
00:01:35,000 --> 00:01:39,000
but this link here is not highlighted when I'm on it

36
00:01:39,000 --> 00:01:41,000
and it would be nice if it were highlighted.

37
00:01:43,000 --> 00:01:45,000
And to achieve this, we can go back

38
00:01:45,000 --> 00:01:48,000
to this main header component

39
00:01:48,000 --> 00:01:50,000
where we have this navigation

40
00:01:51,000 --> 00:01:54,000
and edit this link a little bit.

41
00:01:54,000 --> 00:01:55,000
To be precise,

42
00:01:55,000 --> 00:01:59,000
I wanna add a class conditionally to that link

43
00:01:59,000 --> 00:02:01,000
depending on whether the page

44
00:02:01,000 --> 00:02:04,000
to which this link leads is the active page or not.

45
00:02:05,000 --> 00:02:08,000
Now for that, in that main-header.module.css file,

46
00:02:08,000 --> 00:02:12,000
I did prepare a CSS class called active

47
00:02:12,000 --> 00:02:14,000
that can be added to a link

48
00:02:14,000 --> 00:02:17,000
to give it some active styling.

49
00:02:17,000 --> 00:02:20,000
Therefore all we have to do here is find out

50
00:02:20,000 --> 00:02:23,000
whether this should be marked as active or not.

51
00:02:23,000 --> 00:02:26,000
And we can find out whether that's the case or not

52
00:02:26,000 --> 00:02:29,000
by taking a look at the current path name.

53
00:02:29,000 --> 00:02:31,000
So the part after the domain.

54
00:02:32,000 --> 00:02:34,000
For example, for this community link,

55
00:02:34,000 --> 00:02:38,000
the path is /community.

56
00:02:38,000 --> 00:02:41,000
Hence we know that if the path is equal to this path,

57
00:02:41,000 --> 00:02:43,000
this link here should be marked as active.

58
00:02:44,000 --> 00:02:46,000
For the meals page

59
00:02:46,000 --> 00:02:47,000
and the meals related pages,

60
00:02:47,000 --> 00:02:51,000
we know that this link here should be marked as active

61
00:02:51,000 --> 00:02:55,000
if we are on /meals or /mealsshare

62
00:02:55,000 --> 00:02:58,000
or some other nested page.

63
00:02:58,000 --> 00:03:02,000
So if the currently active path starts with /meals.

64
00:03:03,000 --> 00:03:05,000
And therefore we just need

65
00:03:05,000 --> 00:03:08,000
to get hold of the currently active path.

66
00:03:08,000 --> 00:03:12,000
And that thankfully is also quite straightforward to do

67
00:03:12,000 --> 00:03:16,000
because NextJS gives you a use path name hook,

68
00:03:16,000 --> 00:03:19,000
which you can import from next navigation.

69
00:03:21,000 --> 00:03:24,000
And this hook gives you the currently active path.

70
00:03:24,000 --> 00:03:26,000
So the part after the domain.

71
00:03:28,000 --> 00:03:30,000
And with that path available,

72
00:03:30,000 --> 00:03:34,000
we can then set this meals link here to active

73
00:03:34,000 --> 00:03:39,000
if the path which I'm getting from usePathname,

74
00:03:39,000 --> 00:03:43,000
if that path starts with /meals

75
00:03:44,000 --> 00:03:47,000
so that this link here is marked as active,

76
00:03:47,000 --> 00:03:49,000
no matter if we're on the meals page

77
00:03:49,000 --> 00:03:50,000
or some nested page.

78
00:03:50,000 --> 00:03:52,000
That's why I'm using startsWith.

79
00:03:55,000 --> 00:03:57,000
Now if that yields true,

80
00:03:57,000 --> 00:03:59,000
I want to add the active CSS class.

81
00:03:59,000 --> 00:04:01,000
However, not like this,

82
00:04:01,000 --> 00:04:03,000
but since we're using CSS modules,

83
00:04:03,000 --> 00:04:05,000
instead like this.

84
00:04:05,000 --> 00:04:08,000
And otherwise I'll add undefined as a class

85
00:04:08,000 --> 00:04:10,000
so that no class is added.

86
00:04:12,000 --> 00:04:16,000
Well, and now we can repeat that process on the other link

87
00:04:16,000 --> 00:04:20,000
and simply copy that class name code over there.

88
00:04:20,000 --> 00:04:21,000
Here I just want to check

89
00:04:21,000 --> 00:04:24,000
whether the path starts with community

90
00:04:24,000 --> 00:04:27,000
or since we don't have any nested pages here,

91
00:04:27,000 --> 00:04:30,000
if the path is equal to /community.

92
00:04:32,000 --> 00:04:34,000
And then I still want to add the active class

93
00:04:34,000 --> 00:04:36,000
or no class at all.

94
00:04:38,000 --> 00:04:39,000
Now if we do that though,

95
00:04:39,000 --> 00:04:42,000
you'll be greeted by an error

96
00:04:42,000 --> 00:04:43,000
because it turns out

97
00:04:43,000 --> 00:04:47,000
that usePathname also only works in client components.

98
00:04:47,000 --> 00:04:51,000
And that's by the way, a convenient feature of NextJS.

99
00:04:51,000 --> 00:04:54,000
It will tell you if you're using a feature

100
00:04:54,000 --> 00:04:56,000
that doesn't work in server components

101
00:04:56,000 --> 00:04:58,000
in a server component

102
00:04:58,000 --> 00:05:01,000
so that you can then add that use client directive.

103
00:05:03,000 --> 00:05:06,000
So here the fix is to add use client

104
00:05:06,000 --> 00:05:07,000
at the top of this header.

105
00:05:09,000 --> 00:05:11,000
But here's something to keep in mind.

106
00:05:11,000 --> 00:05:13,000
Whilst you can do that

107
00:05:13,000 --> 00:05:15,000
and the error will then go away

108
00:05:15,000 --> 00:05:19,000
and you can now see that the active link is highlighted,

109
00:05:19,000 --> 00:05:21,000
whilst that all works,

110
00:05:21,000 --> 00:05:24,000
you typically wanna add use client

111
00:05:24,000 --> 00:05:28,000
as far down the component tree as possible

112
00:05:28,000 --> 00:05:31,000
so that you really only turn the components

113
00:05:31,000 --> 00:05:32,000
that need to be converted

114
00:05:32,000 --> 00:05:36,000
to client components into client components

115
00:05:36,000 --> 00:05:38,000
so that the majority of your components

116
00:05:38,000 --> 00:05:40,000
can stay server components

117
00:05:40,000 --> 00:05:42,000
and are rendered on the server

118
00:05:42,000 --> 00:05:47,000
so that you don't lose those server component advantages

119
00:05:47,000 --> 00:05:49,000
for most of your components.

120
00:05:49,000 --> 00:05:51,000
And therefore here,

121
00:05:51,000 --> 00:05:54,000
since this header component contains quite a lot of markup

122
00:05:54,000 --> 00:05:57,000
that does not need to be a client component,

123
00:05:57,000 --> 00:05:59,000
I'll take a different approach.

124
00:06:00,000 --> 00:06:01,000
I'll add a new component file,

125
00:06:01,000 --> 00:06:05,000
nav-link.js sounds like a fitting name.

126
00:06:05,000 --> 00:06:10,000
And I'll add a nav-link.module.css file next to it.

127
00:06:12,000 --> 00:06:14,000
And the idea in this JavaScript file

128
00:06:14,000 --> 00:06:17,000
now is to export a component function

129
00:06:17,000 --> 00:06:18,000
that can be called NavLink

130
00:06:20,000 --> 00:06:23,000
that should simply output that NavLink.

131
00:06:23,000 --> 00:06:25,000
So in the main-header.js file,

132
00:06:25,000 --> 00:06:29,000
I'll simply grab this link here and only that.

133
00:06:30,000 --> 00:06:32,000
I'll cut it

134
00:06:32,000 --> 00:06:34,000
and return it here.

135
00:06:35,000 --> 00:06:38,000
Now for that we must import the link component

136
00:06:38,000 --> 00:06:40,000
from next link

137
00:06:40,000 --> 00:06:43,000
and of course we should make NavLink configurable.

138
00:06:45,000 --> 00:06:48,000
So here I want to get the href prop

139
00:06:49,000 --> 00:06:53,000
and I'll use the children prop for the actual text

140
00:06:53,000 --> 00:06:54,000
that's output between the link.

141
00:06:56,000 --> 00:07:00,000
And then here, I'll use children,

142
00:07:00,000 --> 00:07:02,000
and here, I'll use href.

143
00:07:03,000 --> 00:07:06,000
And then here, I'll also use this href prop

144
00:07:06,000 --> 00:07:09,000
when I check whether this is the active link.

145
00:07:11,000 --> 00:07:14,000
Of course, in order for path to be available here,

146
00:07:14,000 --> 00:07:18,000
we now must use the usePathname hook

147
00:07:18,000 --> 00:07:19,000
I just showed you before

148
00:07:19,000 --> 00:07:21,000
so that we can get hold of the path

149
00:07:22,000 --> 00:07:24,000
and we therefore have to convert this

150
00:07:24,000 --> 00:07:26,000
into a client component

151
00:07:26,000 --> 00:07:28,000
by adding use client like this.

152
00:07:30,000 --> 00:07:32,000
But now it's only that component

153
00:07:32,000 --> 00:07:36,000
and therefore only this small piece of markup

154
00:07:36,000 --> 00:07:38,000
that will be rendered on the client side.

155
00:07:39,000 --> 00:07:42,000
We can go back to the main-header.js file now

156
00:07:42,000 --> 00:07:45,000
and get rid of use client here

157
00:07:45,000 --> 00:07:47,000
and get rid of that usePathname import

158
00:07:48,000 --> 00:07:51,000
and get rid of the usePathname usage

159
00:07:51,000 --> 00:07:54,000
because now there we can simply use

160
00:07:54,000 --> 00:07:56,000
that newly added NavLink component.

161
00:07:58,000 --> 00:07:59,000
So I'm importing that

162
00:07:59,000 --> 00:08:01,000
from the NavLink component file

163
00:08:01,000 --> 00:08:03,000
and I'm then outputting it like this.

164
00:08:04,000 --> 00:08:07,000
And you can use client components

165
00:08:07,000 --> 00:08:10,000
inside of server components like this.

166
00:08:10,000 --> 00:08:13,000
We did do that before with the image slideshow.

167
00:08:13,000 --> 00:08:15,000
We're now doing it again here with the NavLink.

168
00:08:16,000 --> 00:08:20,000
Now NavLink then takes the link text here

169
00:08:20,000 --> 00:08:22,000
between those tags.

170
00:08:22,000 --> 00:08:25,000
So in this case, browse meals.

171
00:08:26,000 --> 00:08:31,000
And we must set this href prop here to /meals.

172
00:08:32,000 --> 00:08:34,000
And of course now we can also use that here

173
00:08:34,000 --> 00:08:35,000
for the community.

174
00:08:38,000 --> 00:08:41,000
Here, we now have our foodies community

175
00:08:41,000 --> 00:08:43,000
also turned into a NavLink.

176
00:08:44,000 --> 00:08:45,000
We just have to make sure

177
00:08:45,000 --> 00:08:47,000
that we point to /community.

178
00:08:49,000 --> 00:08:51,000
And with that we made sure

179
00:08:51,000 --> 00:08:54,000
that this main header component is not converted

180
00:08:54,000 --> 00:08:56,000
to a client component

181
00:08:56,000 --> 00:08:58,000
and is therefore still rendered on the server.

182
00:08:58,000 --> 00:09:01,000
And instead only this small part of it

183
00:09:01,000 --> 00:09:03,000
is rendered on the client.

184
00:09:05,000 --> 00:09:06,000
Now of course here I'm now getting an error

185
00:09:06,000 --> 00:09:08,000
that classes is not defined

186
00:09:08,000 --> 00:09:11,000
because in NavLink, I'm referring to the active class,

187
00:09:11,000 --> 00:09:15,000
even though this classes object isn't available here.

188
00:09:15,000 --> 00:09:17,000
And to work around that,

189
00:09:17,000 --> 00:09:19,000
I'll simply add an import here

190
00:09:19,000 --> 00:09:24,000
where I import classes from nav-link.module.css.

191
00:09:26,000 --> 00:09:29,000
Of course at the moment, this is an empty CSS file though,

192
00:09:29,000 --> 00:09:30,000
and therefore we should go

193
00:09:30,000 --> 00:09:33,000
to the main-header.module.css file

194
00:09:33,000 --> 00:09:38,000
and grab the active class here

195
00:09:40,000 --> 00:09:43,000
and add that here in that nav-link.module.css file.

196
00:09:46,000 --> 00:09:50,000
We can actually also grab the link related styles here

197
00:09:51,000 --> 00:09:53,000
and cut those

198
00:09:54,000 --> 00:09:58,000
and also add them here in the nav-link.module file

199
00:09:58,000 --> 00:09:59,000
and change the selector

200
00:09:59,000 --> 00:10:01,000
from an anchor element,

201
00:10:01,000 --> 00:10:04,000
nest it in some element with a nav class

202
00:10:04,000 --> 00:10:06,000
to maybe link,

203
00:10:07,000 --> 00:10:10,000
so to elements that have the link class on them,

204
00:10:12,000 --> 00:10:17,000
like this, here and here.

205
00:10:17,000 --> 00:10:19,000
And with that back in nav-link.js,

206
00:10:19,000 --> 00:10:23,000
we can add that link class to these links

207
00:10:23,000 --> 00:10:25,000
so that we either have link

208
00:10:25,000 --> 00:10:29,000
and the active class added or just link.

209
00:10:29,000 --> 00:10:31,000
And to make that work, I'll convert this here

210
00:10:31,000 --> 00:10:33,000
into a template literal string

211
00:10:33,000 --> 00:10:36,000
into which we can easily inject dynamic values

212
00:10:36,000 --> 00:10:39,000
that will be converted to strings

213
00:10:39,000 --> 00:10:41,000
so that here I have classes.link

214
00:10:41,000 --> 00:10:45,000
and classes.active being set on the link.

215
00:10:45,000 --> 00:10:47,000
And otherwise if the link is not active,

216
00:10:47,000 --> 00:10:52,000
I just add classes.link, like this.

217
00:10:52,000 --> 00:10:54,000
And that's now my adjusted NavLink.

218
00:10:56,000 --> 00:10:58,000
And with that, everything works again,

219
00:10:58,000 --> 00:11:02,000
but now only the NavLinks are also rendered on the client.

220
00:11:02,000 --> 00:11:05,000
All the rest is still only rendered on the server.