1
00:00:01,000 --> 00:00:02,000
Now, if you take a look

2
00:00:02,000 --> 00:00:06,000
at that starting project I prepared for you,

3
00:00:06,000 --> 00:00:09,000
you'll not just see that page JS file.

4
00:00:09,000 --> 00:00:12,000
Instead, there also is a layout JS file,

5
00:00:12,000 --> 00:00:15,000
and that's actually another reserved file name,

6
00:00:15,000 --> 00:00:18,000
another special type of file,

7
00:00:18,000 --> 00:00:22,000
where the page JS file defines the content of a page,

8
00:00:22,000 --> 00:00:26,000
the layout JS file defines the shell

9
00:00:26,000 --> 00:00:29,000
around one or more pages.

10
00:00:29,000 --> 00:00:32,000
It's the, as the name implies, layout,

11
00:00:32,000 --> 00:00:34,000
into which a page will be rendered.

12
00:00:35,000 --> 00:00:37,000
And every next project

13
00:00:37,000 --> 00:00:41,000
needs at least one root layout JS file.

14
00:00:41,000 --> 00:00:45,000
So, one layout JS file at the top of the app folder.

15
00:00:45,000 --> 00:00:48,000
You can also have nested layout JS files.

16
00:00:48,000 --> 00:00:51,000
So, we could add one here in the about folder,

17
00:00:51,000 --> 00:00:55,000
and then this layout defined here would only apply

18
00:00:55,000 --> 00:00:57,000
to the pages in the about folder

19
00:00:57,000 --> 00:01:00,000
and any nested folders there.

20
00:01:00,000 --> 00:01:03,000
But you need at least one root layout JS file.

21
00:01:05,000 --> 00:01:06,000
And as you can tell in that file,

22
00:01:06,000 --> 00:01:10,000
we're also exporting a React component

23
00:01:10,000 --> 00:01:12,000
just as we did it in that page file.

24
00:01:13,000 --> 00:01:17,000
This component then uses the standard children prop,

25
00:01:17,000 --> 00:01:21,000
which in React can be used by every component,

26
00:01:21,000 --> 00:01:24,000
to inject some content between the body tags.

27
00:01:24,000 --> 00:01:27,000
And that's also interesting.

28
00:01:27,000 --> 00:01:32,000
This component actually renders an HTML and a body tag.

29
00:01:32,000 --> 00:01:35,000
So, some elements which you don't normally use

30
00:01:35,000 --> 00:01:37,000
in your React components,

31
00:01:37,000 --> 00:01:41,000
but you actually need to do that in your next project

32
00:01:41,000 --> 00:01:43,000
in the root layout

33
00:01:43,000 --> 00:01:47,000
to set up the general HTML skeleton of the website.

34
00:01:48,000 --> 00:01:52,000
Now, you might wonder where the head element is,

35
00:01:52,000 --> 00:01:53,000
which is also typically needed

36
00:01:53,000 --> 00:01:56,000
to set a title and some metadata,

37
00:01:56,000 --> 00:01:58,000
and that's actually not rendered here

38
00:01:58,000 --> 00:02:03,000
because that can be populated in a different way in NextJS

39
00:02:03,000 --> 00:02:07,000
by exporting a special variable called metadata.

40
00:02:07,000 --> 00:02:09,000
Constant or variable.

41
00:02:09,000 --> 00:02:12,000
So, this is also a reserved name.

42
00:02:12,000 --> 00:02:14,000
The component name was not reserved,

43
00:02:14,000 --> 00:02:17,000
but this here is a reserved name,

44
00:02:17,000 --> 00:02:21,000
and if you export a variable or constant with that name,

45
00:02:21,000 --> 00:02:23,000
it should contain an object

46
00:02:23,000 --> 00:02:26,000
where you can then set the title of the page

47
00:02:26,000 --> 00:02:28,000
and the description of the page,

48
00:02:28,000 --> 00:02:30,000
and also some other metadata fields,

49
00:02:30,000 --> 00:02:33,000
which will then applied to all pages

50
00:02:33,000 --> 00:02:35,000
that are covered by that layout.

51
00:02:36,000 --> 00:02:38,000
So, that's why we don't have the head section here,

52
00:02:38,000 --> 00:02:41,000
simply because all the content that goes into head

53
00:02:41,000 --> 00:02:43,000
is set with that metadata,

54
00:02:43,000 --> 00:02:46,000
or automatically behind the scenes by NextJS.

55
00:02:48,000 --> 00:02:51,000
But what's now this children thing here,

56
00:02:51,000 --> 00:02:52,000
which is being output here?

57
00:02:53,000 --> 00:02:56,000
Well, that will simply be the content of the page

58
00:02:56,000 --> 00:02:58,000
that's currently active.

59
00:02:58,000 --> 00:03:00,000
Because again, the layout is a wrapper

60
00:03:00,000 --> 00:03:02,000
around one or more pages,

61
00:03:02,000 --> 00:03:04,000
and depending on which path you are,

62
00:03:04,000 --> 00:03:07,000
children will then simply be the content

63
00:03:07,000 --> 00:03:10,000
of the page JS file that's currently active.

64
00:03:11,000 --> 00:03:14,000
So, layout JS and page JS work together.

65
00:03:14,000 --> 00:03:17,000
Layout is the wrapper, page is the actual content,

66
00:03:17,000 --> 00:03:19,000
the content that will be injected here.