1
00:00:00,000 --> 00:00:03,000
So let's now start working on this page,

2
00:00:03,000 --> 00:00:05,000
and let's start making it look better

3
00:00:05,000 --> 00:00:07,000
and make it more useful.

4
00:00:07,000 --> 00:00:10,000
And for that, I actually want to start

5
00:00:10,000 --> 00:00:13,000
by adding a proper header and navigation

6
00:00:13,000 --> 00:00:15,000
and logo to this website.

7
00:00:15,000 --> 00:00:20,000
And for that, I'll actually work on that layout.js file.

8
00:00:20,000 --> 00:00:24,000
Because the idea behind layouts in NextJS

9
00:00:24,000 --> 00:00:28,000
is that they act as wrappers around pages.

10
00:00:28,000 --> 00:00:31,000
And you can theoretically also have nested layouts

11
00:00:31,000 --> 00:00:34,000
where a subset of pages

12
00:00:34,000 --> 00:00:37,000
could also use another more specialized layout.

13
00:00:37,000 --> 00:00:40,000
So you are not limited to this one root layout,

14
00:00:40,000 --> 00:00:42,000
which we have here in this project.

15
00:00:43,000 --> 00:00:47,000
It's worth noting, though, that if you had a nested layout,

16
00:00:47,000 --> 00:00:50,000
so if we had a layout in this meals folder here,

17
00:00:50,000 --> 00:00:54,000
then this layout here would indeed only become active

18
00:00:54,000 --> 00:00:57,000
for those meals-related pages,

19
00:00:57,000 --> 00:01:01,000
but it would itself be nested into the root layout.

20
00:01:01,000 --> 00:01:04,000
So the root layout will always be active.

21
00:01:04,000 --> 00:01:06,000
And I can quickly show this to you

22
00:01:06,000 --> 00:01:10,000
by adding a component function to this layout.js file.

23
00:01:10,000 --> 00:01:12,000
Because layouts, like pages,

24
00:01:12,000 --> 00:01:15,000
are, in the end, React components.

25
00:01:15,000 --> 00:01:17,000
And I'll name this meals layout.

26
00:01:17,000 --> 00:01:21,000
And then here, I'll return, let's say, a fragment.

27
00:01:21,000 --> 00:01:24,000
Where I'll simply at a paragraph,

28
00:01:24,000 --> 00:01:26,000
which says Meals layout.

29
00:01:27,000 --> 00:01:30,000
And which below that paragraph should then output

30
00:01:30,000 --> 00:01:32,000
the actual page content.

31
00:01:32,000 --> 00:01:34,000
And for that, those layout components

32
00:01:34,000 --> 00:01:38,000
can use the special children prop that exists in React.

33
00:01:39,000 --> 00:01:41,000
Now, you learn that every component

34
00:01:41,000 --> 00:01:44,000
can accept and use this prop,

35
00:01:44,000 --> 00:01:47,000
and that normally the content that's made available

36
00:01:47,000 --> 00:01:50,000
through that prop here will be the content

37
00:01:50,000 --> 00:01:53,000
wrapped by those component tags.

38
00:01:53,000 --> 00:01:56,000
So if I were using MealsLayout like this,

39
00:01:56,000 --> 00:01:59,000
then this content here between those tags

40
00:01:59,000 --> 00:02:03,000
is what would be made available through that children prop.

41
00:02:04,000 --> 00:02:07,000
However, in case of layouts and pages,

42
00:02:07,000 --> 00:02:11,000
we aren't rendering those components ourselves.

43
00:02:11,000 --> 00:02:14,000
We're not using them in JSX code ourselves,

44
00:02:14,000 --> 00:02:17,000
instead, NextJS is using them for us.

45
00:02:17,000 --> 00:02:21,000
But NextJS will essentially wrap that layout

46
00:02:21,000 --> 00:02:24,000
around all pages or nested layouts

47
00:02:24,000 --> 00:02:26,000
that are covered by this layout.

48
00:02:26,000 --> 00:02:29,000
And therefore, children will give you access

49
00:02:29,000 --> 00:02:32,000
to any nested layouts or pages.

50
00:02:32,000 --> 00:02:34,000
And hence, we can output the page content here

51
00:02:34,000 --> 00:02:36,000
with children.

52
00:02:36,000 --> 00:02:40,000
And that's also what happens in that root layout,

53
00:02:40,000 --> 00:02:43,000
which, as mentioned, will still be active,

54
00:02:43,000 --> 00:02:44,000
even if you have a nested layout.

55
00:02:45,000 --> 00:02:50,000
Now, this root layout also accepts this children prop

56
00:02:50,000 --> 00:02:53,000
and uses it to output the wrapped content,

57
00:02:53,000 --> 00:02:57,000
which, again, are pages or other layouts,

58
00:02:57,000 --> 00:02:59,000
nested layouts like this meals layout.

59
00:03:00,000 --> 00:03:02,000
That's how that works.

60
00:03:02,000 --> 00:03:04,000
And with that nested layout added,

61
00:03:04,000 --> 00:03:06,000
you'll see that on the starting page,

62
00:03:06,000 --> 00:03:08,000
we don't see it.

63
00:03:08,000 --> 00:03:10,000
We don't see that text meals layout

64
00:03:10,000 --> 00:03:13,000
anywhere on the screen on the starting page.

65
00:03:13,000 --> 00:03:17,000
But if I go to a meals page, we see it here.

66
00:03:17,000 --> 00:03:21,000
And yet the root layout is still active,

67
00:03:21,000 --> 00:03:24,000
as you can, for example, tell by this SVG,

68
00:03:24,000 --> 00:03:27,000
this brownish SVG, which is still visible here.

69
00:03:29,000 --> 00:03:30,000
So that's how layouts work.

70
00:03:30,000 --> 00:03:33,000
But here, we actually don't need that nested layout,

71
00:03:33,000 --> 00:03:35,000
hence I'll delete it.

72
00:03:37,000 --> 00:03:39,000
But we will now work on the root layout

73
00:03:39,000 --> 00:03:44,000
to add some header that's visible on all pages,

74
00:03:44,000 --> 00:03:48,000
some header that allows us to navigate between those pages.