1
00:00:01,000 --> 00:00:02,000
Now to add that header,

2
00:00:02,000 --> 00:00:05,000
I'll add a brand new component.

3
00:00:05,000 --> 00:00:07,000
We could of course also just add it in

4
00:00:07,000 --> 00:00:09,000
here in this layout file.

5
00:00:09,000 --> 00:00:11,000
But in order to keep this a bit leaner,

6
00:00:11,000 --> 00:00:13,000
I'll add a separate component

7
00:00:13,000 --> 00:00:16,000
and I'll actually also outsource this div here

8
00:00:16,000 --> 00:00:19,000
into a separate component thereafter.

9
00:00:19,000 --> 00:00:21,000
And therefore I'll add a new file

10
00:00:21,000 --> 00:00:24,000
which should store that component.

11
00:00:24,000 --> 00:00:27,000
And we could name it main-header.js.

12
00:00:28,000 --> 00:00:31,000
Now, as I also mentioned before, it is up to you

13
00:00:31,000 --> 00:00:34,000
where you store those component files.

14
00:00:34,000 --> 00:00:37,000
If they don't have any reserved name like page

15
00:00:37,000 --> 00:00:40,000
or a layout, NextJS doesn't care.

16
00:00:40,000 --> 00:00:42,000
You can add them like this

17
00:00:42,000 --> 00:00:45,000
or inside of a components folder, in the app folder,

18
00:00:45,000 --> 00:00:47,000
wherever you want.

19
00:00:47,000 --> 00:00:50,000
But I personally prefer to keep them out of the app folder

20
00:00:50,000 --> 00:00:55,000
so that the app folder is really only dealing with routing

21
00:00:55,000 --> 00:00:57,000
and not with those other components.

22
00:00:57,000 --> 00:01:00,000
But that's just a personal preference.

23
00:01:00,000 --> 00:01:04,000
There is this entire article in the NextJS documentation

24
00:01:04,000 --> 00:01:08,000
that discusses different ways of structuring Next projects.

25
00:01:09,000 --> 00:01:12,000
Now here, I'll keep it out of the app folder though,

26
00:01:12,000 --> 00:01:15,000
and therefore it's now in this main-header.js file

27
00:01:15,000 --> 00:01:17,000
where I wanna set up this header

28
00:01:17,000 --> 00:01:19,000
that should be shared across all pages.

29
00:01:20,000 --> 00:01:24,000
And for that in here, I'll export another React component,

30
00:01:24,000 --> 00:01:29,000
which I'll name MainHeader, a regular React component

31
00:01:29,000 --> 00:01:31,000
as you know and love it.

32
00:01:31,000 --> 00:01:36,000
And then there I'll return a header element like this.

33
00:01:37,000 --> 00:01:40,000
And in that header, I then wanna have a logo

34
00:01:40,000 --> 00:01:43,000
and the main navigation of this page.

35
00:01:43,000 --> 00:01:46,000
Now that logo should be clickable and

36
00:01:46,000 --> 00:01:49,000
therefore I'll start by adding a link here,

37
00:01:49,000 --> 00:01:52,000
using the link component provided by NextJS

38
00:01:52,000 --> 00:01:55,000
so that we can wrap that around the logo

39
00:01:55,000 --> 00:01:57,000
to make it clickable.

40
00:01:57,000 --> 00:02:00,000
And the idea is that clicking the logo simply takes us back

41
00:02:00,000 --> 00:02:03,000
to the starting page, so to this path here,

42
00:02:06,000 --> 00:02:10,000
but then the logo should actually be the combination

43
00:02:10,000 --> 00:02:13,000
of an image and some text.

44
00:02:13,000 --> 00:02:16,000
And therefore we can use that image element,

45
00:02:16,000 --> 00:02:18,000
that default image element,

46
00:02:18,000 --> 00:02:22,000
and then set the source to a certain image.

47
00:02:22,000 --> 00:02:24,000
And I wanna set it to an image

48
00:02:24,000 --> 00:02:27,000
which I provided as part of the starting project.

49
00:02:27,000 --> 00:02:30,000
There, I provided this assets folder to you.

50
00:02:30,000 --> 00:02:35,000
And that assets folder then has a logo PNG file,

51
00:02:35,000 --> 00:02:38,000
which is that logo I want to use.

52
00:02:39,000 --> 00:02:42,000
Now the great thing in NextJS projects,

53
00:02:42,000 --> 00:02:45,000
like in most React projects,

54
00:02:45,000 --> 00:02:48,000
is that you can simply import such an image

55
00:02:48,000 --> 00:02:49,000
into your JavaScript files

56
00:02:49,000 --> 00:02:54,000
and you'll then automatically get a path to those images.

57
00:02:54,000 --> 00:02:57,000
So here I'll import my logo image from,

58
00:02:57,000 --> 00:03:00,000
and then I'll use this alias here to refer

59
00:03:00,000 --> 00:03:02,000
to the root directory of my project,

60
00:03:02,000 --> 00:03:06,000
this at symbol, and I'll therefore import

61
00:03:06,000 --> 00:03:09,000
that logo from at assets.

62
00:03:09,000 --> 00:03:13,000
And then there the logo.png file.

63
00:03:15,000 --> 00:03:18,000
And that's then the source of this image, though,

64
00:03:18,000 --> 00:03:20,000
What's important in Next projects,

65
00:03:20,000 --> 00:03:23,000
unlike in many other React projects,

66
00:03:23,000 --> 00:03:25,000
is that you can't just assign it like this.

67
00:03:25,000 --> 00:03:30,000
It's that you have to access the SRC property

68
00:03:30,000 --> 00:03:33,000
because this imported logo in Next projects

69
00:03:33,000 --> 00:03:38,000
will be an object where the path to the image is then stored

70
00:03:38,000 --> 00:03:40,000
under that SRC property.

71
00:03:42,000 --> 00:03:45,000
With that, I'll also assign an alt text, a plate

72
00:03:45,000 --> 00:03:48,000
with food on it, sounds fitting for this logo.

73
00:03:50,000 --> 00:03:52,000
And that's my image.

74
00:03:54,000 --> 00:03:57,000
Now, I also wanna have some text next to that image.

75
00:03:57,000 --> 00:03:58,000
And here the name

76
00:03:58,000 --> 00:04:01,000
of this demo app is simply next level food.

77
00:04:03,000 --> 00:04:06,000
So that's now my logo.

78
00:04:06,000 --> 00:04:09,000
And we could outsource this into a separate component

79
00:04:09,000 --> 00:04:11,000
as well if we wanted to.

80
00:04:11,000 --> 00:04:14,000
But here I'll keep it in this main header component.

81
00:04:15,000 --> 00:04:17,000
Now, that's not everything though.

82
00:04:17,000 --> 00:04:22,000
Instead I also want to have my navigation here,

83
00:04:22,000 --> 00:04:25,000
hence I'll add a nav element and in there an unordered list

84
00:04:25,000 --> 00:04:27,000
and in there a list item.

85
00:04:29,000 --> 00:04:33,000
And that list item should then contain another link leading

86
00:04:33,000 --> 00:04:35,000
to a certain page.

87
00:04:35,000 --> 00:04:39,000
To be precise, a link that allows us to browse the meals

88
00:04:39,000 --> 00:04:41,000
that have been shared by community members.

89
00:04:42,000 --> 00:04:45,000
So here, it should lead to slash meals.

90
00:04:46,000 --> 00:04:48,000
Now, that's not the only link though.

91
00:04:48,000 --> 00:04:52,000
Instead I'll also add another link, which should allow us

92
00:04:52,000 --> 00:04:55,000
to go to the community, to the Foodies Community.

93
00:04:55,000 --> 00:05:00,000
And hence here, it should lead to slash community like that.

94
00:05:00,000 --> 00:05:03,000
That's my navigation.

95
00:05:03,000 --> 00:05:04,000
With that all added,

96
00:05:04,000 --> 00:05:07,000
and with this main header component finished, we can go back

97
00:05:07,000 --> 00:05:09,000
to that root layout

98
00:05:09,000 --> 00:05:12,000
and then there output this main header

99
00:05:12,000 --> 00:05:17,000
above that children slot here, so above the page content.

100
00:05:18,000 --> 00:05:21,000
Simply like this though, very important,

101
00:05:21,000 --> 00:05:23,000
you of course must import it.

102
00:05:23,000 --> 00:05:25,000
So here I added this import from

103
00:05:25,000 --> 00:05:28,000
that components folder in the root project directory.

104
00:05:31,000 --> 00:05:32,000
If you do that

105
00:05:32,000 --> 00:05:35,000
and you save everything, you should see something like this

106
00:05:35,000 --> 00:05:39,000
if you revisit the page, a total mess,

107
00:05:39,000 --> 00:05:43,000
but at least the header is there, it's there

108
00:05:43,000 --> 00:05:46,000
and it's working, and it's there on every page,

109
00:05:46,000 --> 00:05:47,000
which is amazing.

110
00:05:47,000 --> 00:05:50,000
And we can also go back to the starting page,

111
00:05:50,000 --> 00:05:53,000
but of course it's totally unstyled and doesn't look good.

112
00:05:53,000 --> 00:05:56,000
And that's therefore what we'll change next.