Now to add that header,
I'll add a brand new component.
We could of course also just add it in
here in this layout file.
But in order to keep this a bit leaner,
I'll add a separate component
and I'll actually also outsource this div here
into a separate component thereafter.
And therefore I'll add a new file
which should store that component.
And we could name it main-header.js.
Now, as I also mentioned before, it is up to you
where you store those component files.
If they don't have any reserved name like page
or a layout, NextJS doesn't care.
You can add them like this
or inside of a components folder, in the app folder,
wherever you want.
But I personally prefer to keep them out of the app folder
so that the app folder is really only dealing with routing
and not with those other components.
But that's just a personal preference.
There is this entire article in the NextJS documentation
that discusses different ways of structuring Next projects.
Now here, I'll keep it out of the app folder though,
and therefore it's now in this main-header.js file
where I wanna set up this header
that should be shared across all pages.
And for that in here, I'll export another React component,
which I'll name MainHeader, a regular React component
as you know and love it.
And then there I'll return a header element like this.
And in that header, I then wanna have a logo
and the main navigation of this page.
Now that logo should be clickable and
therefore I'll start by adding a link here,
using the link component provided by NextJS
so that we can wrap that around the logo
to make it clickable.
And the idea is that clicking the logo simply takes us back
to the starting page, so to this path here,
but then the logo should actually be the combination
of an image and some text.
And therefore we can use that image element,
that default image element,
and then set the source to a certain image.
And I wanna set it to an image
which I provided as part of the starting project.
There, I provided this assets folder to you.
And that assets folder then has a logo PNG file,
which is that logo I want to use.
Now the great thing in NextJS projects,
like in most React projects,
is that you can simply import such an image
into your JavaScript files
and you'll then automatically get a path to those images.
So here I'll import my logo image from,
and then I'll use this alias here to refer
to the root directory of my project,
this at symbol, and I'll therefore import
that logo from at assets.
And then there the logo.png file.
And that's then the source of this image, though,
What's important in Next projects,
unlike in many other React projects,
is that you can't just assign it like this.
It's that you have to access the SRC property
because this imported logo in Next projects
will be an object where the path to the image is then stored
under that SRC property.
With that, I'll also assign an alt text, a plate
with food on it, sounds fitting for this logo.
And that's my image.
Now, I also wanna have some text next to that image.
And here the name
of this demo app is simply next level food.
So that's now my logo.
And we could outsource this into a separate component
as well if we wanted to.
But here I'll keep it in this main header component.
Now, that's not everything though.
Instead I also want to have my navigation here,
hence I'll add a nav element and in there an unordered list
and in there a list item.
And that list item should then contain another link leading
to a certain page.
To be precise, a link that allows us to browse the meals
that have been shared by community members.
So here, it should lead to slash meals.
Now, that's not the only link though.
Instead I'll also add another link, which should allow us
to go to the community, to the Foodies Community.
And hence here, it should lead to slash community like that.
That's my navigation.
With that all added,
and with this main header component finished, we can go back
to that root layout
and then there output this main header
above that children slot here, so above the page content.
Simply like this though, very important,
you of course must import it.
So here I added this import from
that components folder in the root project directory.
If you do that
and you save everything, you should see something like this
if you revisit the page, a total mess,
but at least the header is there, it's there
and it's working, and it's there on every page,
which is amazing.
And we can also go back to the starting page,
but of course it's totally unstyled and doesn't look good.
And that's therefore what we'll change next.