1
00:00:02,000 --> 00:00:04,000
So we got our hero component here.

2
00:00:04,000 --> 00:00:06,000
It's looking good, hopefully,

3
00:00:06,000 --> 00:00:11,000
and now we also need featured posts for this starting page.

4
00:00:11,000 --> 00:00:14,000
Now, what we'll also need besides featured posts, though,

5
00:00:14,000 --> 00:00:17,000
is a navigation bar at the top

6
00:00:17,000 --> 00:00:20,000
because at the moment we only have one working page

7
00:00:20,000 --> 00:00:23,000
with not too much content on it, arguably,

8
00:00:23,000 --> 00:00:26,000
but later we will have other pages as well,

9
00:00:26,000 --> 00:00:30,000
the All Posts page and the Contact page.

10
00:00:30,000 --> 00:00:32,000
So therefore to be able to reach that,

11
00:00:32,000 --> 00:00:34,000
we wanna add some navigation,

12
00:00:34,000 --> 00:00:36,000
and hence that is something I'll do first

13
00:00:36,000 --> 00:00:39,000
before we then come back to the featured posts.

14
00:00:39,000 --> 00:00:43,000
I wanna add a navigation bar, or to be precise,

15
00:00:43,000 --> 00:00:48,000
I wanna add a general layout because the navigation bar,

16
00:00:48,000 --> 00:00:50,000
which should be shown at the top,

17
00:00:50,000 --> 00:00:53,000
will not only be needed on the homepage.

18
00:00:53,000 --> 00:00:56,000
Instead, we will need it on all pages,

19
00:00:56,000 --> 00:00:58,000
and that can be solved with a layout,

20
00:00:58,000 --> 00:01:00,000
as you'll learn throughout the course.

21
00:01:00,000 --> 00:01:04,000
We can utilize this _app JS file here

22
00:01:04,000 --> 00:01:09,000
to wrap the component which is rendered there

23
00:01:09,000 --> 00:01:11,000
which is actually just the page content

24
00:01:11,000 --> 00:01:15,000
that was loaded for the different URLs

25
00:01:15,000 --> 00:01:17,000
with a general layout.

26
00:01:17,000 --> 00:01:18,000
That is what we can do,

27
00:01:18,000 --> 00:01:23,000
and what we typically wanna do in Next.js applications,

28
00:01:23,000 --> 00:01:26,000
and therefore let's build such a layout component.

29
00:01:26,000 --> 00:01:28,000
For that, in the components folder,

30
00:01:28,000 --> 00:01:31,000
we can create a new subfolder called layout,

31
00:01:31,000 --> 00:01:34,000
and in there, I wanna add a couple

32
00:01:34,000 --> 00:01:38,000
of components that help us create layouts.

33
00:01:38,000 --> 00:01:41,000
The first one will be the layout component itself,

34
00:01:41,000 --> 00:01:46,000
a layout JS file, but then I'll add two other files as well,

35
00:01:46,000 --> 00:01:48,000
since I wanna split my layout

36
00:01:48,000 --> 00:01:51,000
into multiple sub-components.

37
00:01:51,000 --> 00:01:53,000
For example, I want it to have a separate component

38
00:01:53,000 --> 00:01:56,000
that holds the actual navigation bar,

39
00:01:56,000 --> 00:01:59,000
so I'll name this main-navigation.

40
00:01:59,000 --> 00:02:02,000
This will be my navigation component,

41
00:02:02,000 --> 00:02:06,000
and that navigation component should also render

42
00:02:06,000 --> 00:02:08,000
some logo for my blog,

43
00:02:08,000 --> 00:02:12,000
and therefore I'll create a separate logo component,

44
00:02:12,000 --> 00:02:15,000
and of course you can split, and mix, and match,

45
00:02:15,000 --> 00:02:18,000
and compose your components just as you need to.

46
00:02:18,000 --> 00:02:20,000
This is just some example split

47
00:02:20,000 --> 00:02:22,000
which I came up with which works for me.

48
00:02:22,000 --> 00:02:24,000
If it doesn't work for you,

49
00:02:24,000 --> 00:02:27,000
if you wanna split it in a more granular way

50
00:02:27,000 --> 00:02:29,000
or have bigger components,

51
00:02:29,000 --> 00:02:33,000
so less splits, that's of course also fine.

52
00:02:33,000 --> 00:02:35,000
You just need to adjust the styles then.

53
00:02:36,000 --> 00:02:39,000
Now with that, let's start with the layout component.

54
00:02:39,000 --> 00:02:43,000
In there, we can, again, create a function

55
00:02:43,000 --> 00:02:46,000
and export that function, Layout,

56
00:02:48,000 --> 00:02:52,000
and in that function, we then return a fragment

57
00:02:53,000 --> 00:02:57,000
because I wanna have two adjacent JSX elements,

58
00:02:57,000 --> 00:03:00,000
and the first one will be the MainNavigation,

59
00:03:00,000 --> 00:03:02,000
so this separate component

60
00:03:02,000 --> 00:03:06,000
which we'll store in the main-navigation file.

61
00:03:06,000 --> 00:03:11,000
The second JSX element will be the regular main HTML element

62
00:03:11,000 --> 00:03:14,000
in which I wanna output properties,

63
00:03:14,000 --> 00:03:17,000
whoops, props.children,

64
00:03:17,000 --> 00:03:18,000
and for this, of course, we need to make sure

65
00:03:18,000 --> 00:03:21,000
that we accept props here,

66
00:03:23,000 --> 00:03:25,000
props.children, because we will wrap

67
00:03:25,000 --> 00:03:30,000
this Layout component around this component here

68
00:03:30,000 --> 00:03:32,000
in the _app JS file.

69
00:03:32,000 --> 00:03:34,000
We can actually already do that here.

70
00:03:34,000 --> 00:03:39,000
In this file, we can already import Layout from,

71
00:03:42,000 --> 00:03:44,000
and then go up one level,

72
00:03:44,000 --> 00:03:46,000
dive into the components folder,

73
00:03:46,000 --> 00:03:49,000
into the layout folder and the layout file,

74
00:03:49,000 --> 00:03:53,000
and then just wrap component with Layout,

75
00:03:53,000 --> 00:03:57,000
so create Layout here and wrap it around this component.

76
00:03:58,000 --> 00:04:03,000
Now it's this component which will be used as children,

77
00:04:03,000 --> 00:04:07,000
or as a child, inside of the Layout component, so here.

78
00:04:08,000 --> 00:04:10,000
So that's step number one.

79
00:04:10,000 --> 00:04:11,000
Now I'm using the main navigation here,

80
00:04:11,000 --> 00:04:15,000
and hence I also already wanna import MainNavigation

81
00:04:15,000 --> 00:04:19,000
from that main-navigation JavaScript file.

82
00:04:19,000 --> 00:04:23,000
That file, however, is completely empty right now,

83
00:04:23,000 --> 00:04:25,000
and that needs to change therefore.

84
00:04:25,000 --> 00:04:29,000
So if we go to the main-navigation file here,

85
00:04:29,000 --> 00:04:30,000
we, of course, again,

86
00:04:30,000 --> 00:04:33,000
wanna create a MainNavigation function,

87
00:04:33,000 --> 00:04:37,000
and then export that as a default,

88
00:04:37,000 --> 00:04:39,000
as we always do it.

89
00:04:40,000 --> 00:04:43,000
And now inside that MainNavigation component,

90
00:04:43,000 --> 00:04:46,000
I wanna return a header element,

91
00:04:46,000 --> 00:04:50,000
and then there as a first element, my logo,

92
00:04:50,000 --> 00:04:54,000
and side by side to that, a nav bar

93
00:04:54,000 --> 00:04:57,000
with a list of nav items.

94
00:04:57,000 --> 00:05:01,000
So here I'll add a unordered list with my list items

95
00:05:01,000 --> 00:05:04,000
where in the list items, I have my links.

96
00:05:04,000 --> 00:05:09,000
Now, for the links we will not use the standard anchor tag

97
00:05:09,000 --> 00:05:12,000
because that would be handled by the browser only,

98
00:05:12,000 --> 00:05:16,000
and when we click it, we would load a brand-new page

99
00:05:16,000 --> 00:05:18,000
and send a brand-new request.

100
00:05:18,000 --> 00:05:21,000
Instead, we want to use Next's Link component

101
00:05:21,000 --> 00:05:25,000
to take advantage of automatic data prefetching

102
00:05:25,000 --> 00:05:27,000
which it does for us,

103
00:05:27,000 --> 00:05:29,000
and to take advantage of the fact

104
00:05:29,000 --> 00:05:32,000
that we stay in a single-page application

105
00:05:32,000 --> 00:05:34,000
once the page was loaded initially.

106
00:05:35,000 --> 00:05:39,000
So therefore we wanna import Link from next/link,

107
00:05:40,000 --> 00:05:44,000
like this, like we did it many times before in this course,

108
00:05:44,000 --> 00:05:48,000
and to then just output Link here,

109
00:05:48,000 --> 00:05:50,000
so create a link here.

110
00:05:50,000 --> 00:05:52,000
Now the link needs a ref attribute

111
00:05:52,000 --> 00:05:55,000
where we point at /posts, for example,

112
00:05:55,000 --> 00:05:58,000
and load the Posts page,

113
00:06:00,000 --> 00:06:04,000
and it has to be /posts because of our page structure.

114
00:06:04,000 --> 00:06:08,000
We have the posts folder with the index JS file

115
00:06:08,000 --> 00:06:11,000
which should be loaded when we wanna load all posts,

116
00:06:11,000 --> 00:06:15,000
and you learned before in this course that this structure

117
00:06:15,000 --> 00:06:18,000
in the pages folder leads to a /posts route

118
00:06:18,000 --> 00:06:21,000
which is inferred by Next.js,

119
00:06:21,000 --> 00:06:23,000
so we wanna link to that route here.

120
00:06:24,000 --> 00:06:26,000
Now, that's not the only link though.

121
00:06:26,000 --> 00:06:31,000
I also wanna have a link to my Contact page

122
00:06:31,000 --> 00:06:34,000
because we also have this contact JS file,

123
00:06:35,000 --> 00:06:37,000
and that file will be translated

124
00:06:37,000 --> 00:06:40,000
to a /contact route, as you learned,

125
00:06:40,000 --> 00:06:43,000
so we also wanna have a /contact route here.

126
00:06:44,000 --> 00:06:45,000
So now we've got that.

127
00:06:45,000 --> 00:06:49,000
I actually also wanna make the logo clickable

128
00:06:49,000 --> 00:06:51,000
so that when we click the logo

129
00:06:51,000 --> 00:06:54,000
we're taken back to the starting page.

130
00:06:54,000 --> 00:06:57,000
That's a quite common pattern on websites,

131
00:06:57,000 --> 00:07:02,000
and therefore we also wrap the logo with a link, like this,

132
00:07:02,000 --> 00:07:06,000
and give this a ref of just slash

133
00:07:06,000 --> 00:07:08,000
to go back to the starting page.

134
00:07:08,000 --> 00:07:10,000
Now you might remember

135
00:07:10,000 --> 00:07:15,000
that there was this special behavior of Link

136
00:07:15,000 --> 00:07:20,000
when the child you passed to it was not plain text.

137
00:07:20,000 --> 00:07:22,000
If you pass your own component,

138
00:07:22,000 --> 00:07:26,000
or any other HTML content to a link,

139
00:07:26,000 --> 00:07:30,000
Link will not render an anchor tag by default.

140
00:07:30,000 --> 00:07:35,000
It only does that if you just pass plain text to it.

141
00:07:35,000 --> 00:07:37,000
If you pass anything else than plain text,

142
00:07:37,000 --> 00:07:40,000
the link will not render an anchor tag for you,

143
00:07:40,000 --> 00:07:42,000
so in order to get that,

144
00:07:42,000 --> 00:07:46,000
you should then bring your own anchor tag, like this.

145
00:07:46,000 --> 00:07:49,000
You don't need to add ref on that anchor tag.

146
00:07:49,000 --> 00:07:50,000
Link will do that for you.

147
00:07:50,000 --> 00:07:53,000
It will pass the ref set on Link

148
00:07:53,000 --> 00:07:57,000
to the direct child of Link, which is an anchor tag now.

149
00:07:57,000 --> 00:07:59,000
So it will do that for you,

150
00:07:59,000 --> 00:08:02,000
but you have to add the anchor tag element

151
00:08:02,000 --> 00:08:05,000
to tell Link that it should render an anchor tag.

152
00:08:06,000 --> 00:08:11,000
This is not a bug or some inconsistency, but this exists.

153
00:08:11,000 --> 00:08:14,000
This feature exists to make sure

154
00:08:14,000 --> 00:08:17,000
that you can turn any element into a link,

155
00:08:17,000 --> 00:08:20,000
a div, a button, whatever you want,

156
00:08:20,000 --> 00:08:22,000
but here we want an anchor tag still,

157
00:08:22,000 --> 00:08:27,000
so I will add my own anchor tag wrapped around my logo,

158
00:08:27,000 --> 00:08:28,000
and speaking of the logo,

159
00:08:28,000 --> 00:08:31,000
that's, of course, still missing.

160
00:08:31,000 --> 00:08:34,000
I just added this dummy JSX code here,

161
00:08:34,000 --> 00:08:35,000
but we are not importing it,

162
00:08:35,000 --> 00:08:38,000
and the logo JS file is also empty,

163
00:08:38,000 --> 00:08:41,000
and therefore as a next step, we'll work on that,

164
00:08:41,000 --> 00:08:43,000
and we're then also going to add some styling.