Now, if you take a look
at that starting project I prepared for you,
you'll not just see that page JS file.
Instead, there also is a layout JS file,
and that's actually another reserved file name,
another special type of file,
where the page JS file defines the content of a page,
the layout JS file defines the shell
around one or more pages.
It's the, as the name implies, layout,
into which a page will be rendered.
And every next project
needs at least one root layout JS file.
So, one layout JS file at the top of the app folder.
You can also have nested layout JS files.
So, we could add one here in the about folder,
and then this layout defined here would only apply
to the pages in the about folder
and any nested folders there.
But you need at least one root layout JS file.
And as you can tell in that file,
we're also exporting a React component
just as we did it in that page file.
This component then uses the standard children prop,
which in React can be used by every component,
to inject some content between the body tags.
And that's also interesting.
This component actually renders an HTML and a body tag.
So, some elements which you don't normally use
in your React components,
but you actually need to do that in your next project
in the root layout
to set up the general HTML skeleton of the website.
Now, you might wonder where the head element is,
which is also typically needed
to set a title and some metadata,
and that's actually not rendered here
because that can be populated in a different way in NextJS
by exporting a special variable called metadata.
Constant or variable.
So, this is also a reserved name.
The component name was not reserved,
but this here is a reserved name,
and if you export a variable or constant with that name,
it should contain an object
where you can then set the title of the page
and the description of the page,
and also some other metadata fields,
which will then applied to all pages
that are covered by that layout.
So, that's why we don't have the head section here,
simply because all the content that goes into head
is set with that metadata,
or automatically behind the scenes by NextJS.
But what's now this children thing here,
which is being output here?
Well, that will simply be the content of the page
that's currently active.
Because again, the layout is a wrapper
around one or more pages,
and depending on which path you are,
children will then simply be the content
of the page JS file that's currently active.
So, layout JS and page JS work together.
Layout is the wrapper, page is the actual content,
the content that will be injected here.