So let's now start working on this page,
and let's start making it look better
and make it more useful.
And for that, I actually want to start
by adding a proper header and navigation
and logo to this website.
And for that, I'll actually work on that layout.js file.
Because the idea behind layouts in NextJS
is that they act as wrappers around pages.
And you can theoretically also have nested layouts
where a subset of pages
could also use another more specialized layout.
So you are not limited to this one root layout,
which we have here in this project.
It's worth noting, though, that if you had a nested layout,
so if we had a layout in this meals folder here,
then this layout here would indeed only become active
for those meals-related pages,
but it would itself be nested into the root layout.
So the root layout will always be active.
And I can quickly show this to you
by adding a component function to this layout.js file.
Because layouts, like pages,
are, in the end, React components.
And I'll name this meals layout.
And then here, I'll return, let's say, a fragment.
Where I'll simply at a paragraph,
which says Meals layout.
And which below that paragraph should then output
the actual page content.
And for that, those layout components
can use the special children prop that exists in React.
Now, you learn that every component
can accept and use this prop,
and that normally the content that's made available
through that prop here will be the content
wrapped by those component tags.
So if I were using MealsLayout like this,
then this content here between those tags
is what would be made available through that children prop.
However, in case of layouts and pages,
we aren't rendering those components ourselves.
We're not using them in JSX code ourselves,
instead, NextJS is using them for us.
But NextJS will essentially wrap that layout
around all pages or nested layouts
that are covered by this layout.
And therefore, children will give you access
to any nested layouts or pages.
And hence, we can output the page content here
with children.
And that's also what happens in that root layout,
which, as mentioned, will still be active,
even if you have a nested layout.
Now, this root layout also accepts this children prop
and uses it to output the wrapped content,
which, again, are pages or other layouts,
nested layouts like this meals layout.
That's how that works.
And with that nested layout added,
you'll see that on the starting page,
we don't see it.
We don't see that text meals layout
anywhere on the screen on the starting page.
But if I go to a meals page, we see it here.
And yet the root layout is still active,
as you can, for example, tell by this SVG,
this brownish SVG, which is still visible here.
So that's how layouts work.
But here, we actually don't need that nested layout,
hence I'll delete it.
But we will now work on the root layout
to add some header that's visible on all pages,
some header that allows us to navigate between those pages.