1
00:00:03,000 --> 00:00:05,311
We now have a few different pages

2
00:00:05,311 --> 00:00:06,921
in our web application.

3
00:00:06,991 --> 00:00:09,839
Now, you may have been wondering why we need

4
00:00:09,839 --> 00:00:12,621
to create a separate folder for each route,

5
00:00:12,686 --> 00:00:15,938
with a "page.jsx" file inside it.

6
00:00:15,938 --> 00:00:18,877
In fact, the previous approach used

7
00:00:18,877 --> 00:00:21,564
by Next.js was in a way simpler.

8
00:00:21,648 --> 00:00:23,808
With the old Pages Router,

9
00:00:23,808 --> 00:00:27,035
the "/about" page for example would be

10
00:00:27,035 --> 00:00:30,093
in a file called simply "about.jsx",

11
00:00:30,178 --> 00:00:33,873
directly under the top-level "pages" folder,

12
00:00:33,873 --> 00:00:36,551
without the need to create a separate

13
00:00:36,551 --> 00:00:39,157
folder like with the new App Router.

14
00:00:39,229 --> 00:00:42,328
So why did Next.js decide to adopt

15
00:00:42,328 --> 00:00:44,698
this new folder structure,

16
00:00:44,789 --> 00:00:46,985
that seems more complex?

17
00:00:46,985 --> 00:00:49,774
The reason is that this way we can put

18
00:00:49,774 --> 00:00:52,270
multiple files inside each folder,

19
00:00:52,343 --> 00:00:55,335
providing different bits of functionality

20
00:00:55,335 --> 00:00:56,722
for the same route.

21
00:00:56,795 --> 00:00:59,366
For example, this approach allows

22
00:00:59,366 --> 00:01:01,547
us to define nested layouts.

23
00:01:01,625 --> 00:01:03,557
I'll give you a quick demo of

24
00:01:03,557 --> 00:01:05,489
how that works in this video,

25
00:01:05,555 --> 00:01:08,456
but be aware that at the end I'll throw

26
00:01:08,456 --> 00:01:11,358
away all the changes I'm about to make,

27
00:01:11,432 --> 00:01:13,614
because we don't really need this

28
00:01:13,614 --> 00:01:15,531
feature in our app right now.

29
00:01:15,597 --> 00:01:17,689
I always recommend watching

30
00:01:17,689 --> 00:01:19,704
each video in full anyway,

31
00:01:19,781 --> 00:01:22,479
before you make changes to your own project,

32
00:01:22,479 --> 00:01:24,073
if you're following along.

33
00:01:24,134 --> 00:01:26,755
But that's especially true for this video.

34
00:01:26,755 --> 00:01:29,917
Now, we have a "layout.jsx" file

35
00:01:29,917 --> 00:01:33,078
directly under our "app" folder.

36
00:01:33,177 --> 00:01:36,522
We know that this is like a template that

37
00:01:36,522 --> 00:01:39,214
will be applied to all the pages.

38
00:01:39,296 --> 00:01:42,205
If we open the "/reviews" page for example,

39
00:01:42,276 --> 00:01:45,042
this one also shows the "header" and

40
00:01:45,042 --> 00:01:47,731
"footer" defined in the RootLayout.

41
00:01:47,808 --> 00:01:50,109
But we can also create a layout

42
00:01:50,109 --> 00:01:51,890
for each separate route.

43
00:01:51,964 --> 00:01:56,581
Under the "reviews" folder we could create a new file,

44
00:01:56,581 --> 00:01:58,291
called "layout.jsx".

45
00:01:58,376 --> 00:02:01,496
Note how we now have two files directly

46
00:02:01,496 --> 00:02:03,655
under the "reviews" folder:

47
00:02:03,735 --> 00:02:08,107
"layout.jsx" and "page.jsx".

48
00:02:08,107 --> 00:02:12,054
Both these files apply to the "reviews" route.

49
00:02:12,054 --> 00:02:13,928
That's why we need a separate

50
00:02:13,928 --> 00:02:15,350
folder for each route,

51
00:02:15,415 --> 00:02:18,291
so we can have multiple files inside it.

52
00:02:18,291 --> 00:02:22,469
In this new "layout.jsx" we can define elements

53
00:02:22,469 --> 00:02:25,936
that only apply to the "/reviews" path.

54
00:02:26,024 --> 00:02:28,467
The browser shows an error at the moment,

55
00:02:28,467 --> 00:02:31,000
because our layout file doesn't

56
00:02:31,000 --> 00:02:33,371
export a React component yet.

57
00:02:33,453 --> 00:02:36,308
We just need to create a component here,

58
00:02:36,493 --> 00:02:39,017
let's call it "ReviewsLayout".

59
00:02:39,413 --> 00:02:42,381
And, just like the RootLayout, this will

60
00:02:42,381 --> 00:02:44,830
receive the "children" as a prop.

61
00:02:44,905 --> 00:02:47,319
Here we can return some elements

62
00:02:47,319 --> 00:02:49,129
specific for this route.

63
00:02:49,205 --> 00:02:51,179
Let's start with a simple "div"

64
00:02:51,179 --> 00:02:52,898
with the "children" inside,

65
00:02:52,962 --> 00:02:55,413
just to make that error go away.

66
00:02:55,502 --> 00:02:58,079
You can see that the page is working again.

67
00:02:58,079 --> 00:03:00,780
There's no visible difference, because

68
00:03:00,780 --> 00:03:02,841
we just added an extra "div".

69
00:03:02,912 --> 00:03:06,233
But note how we still see the "header" and

70
00:03:06,233 --> 00:03:09,079
"footer" provided by the RootLayout.

71
00:03:09,158 --> 00:03:12,223
So, this layout will be inserted

72
00:03:12,223 --> 00:03:14,139
into the RootLayout.

73
00:03:14,235 --> 00:03:17,453
That's why they're called "nested" layouts.

74
00:03:17,453 --> 00:03:20,037
This is useful if we want to add some

75
00:03:20,037 --> 00:03:22,272
elements specific to this route.

76
00:03:22,342 --> 00:03:25,750
For example, we might want to show a menu bar,

77
00:03:25,750 --> 00:03:29,628
with some options specific to the review pages.

78
00:03:29,628 --> 00:03:31,288
If we save this layout,

79
00:03:31,288 --> 00:03:34,194
you can see that the "reviews menubar"

80
00:03:34,194 --> 00:03:36,489
is displayed below the header.

81
00:03:36,565 --> 00:03:38,388
Let me add a border to this

82
00:03:38,388 --> 00:03:40,075
"div" to make it clearer.

83
00:03:40,142 --> 00:03:42,515
I'll use an inline style, even though

84
00:03:42,515 --> 00:03:44,246
that's not a good practice,

85
00:03:44,310 --> 00:03:47,542
because we haven't covered styling yet.

86
00:03:47,542 --> 00:03:50,275
We'll talk about that later in the course.

87
00:03:50,275 --> 00:03:53,797
But with this style, you can see a red border

88
00:03:53,797 --> 00:03:57,007
around the elements added by this layout.

89
00:03:57,085 --> 00:04:00,266
A common use case for nested layouts

90
00:04:00,266 --> 00:04:02,121
is to add a side bar.

91
00:04:02,209 --> 00:04:05,060
Something that we can achieve by setting

92
00:04:05,060 --> 00:04:07,411
the container div to use flexbox.

93
00:04:07,482 --> 00:04:09,586
So the first child element will

94
00:04:09,586 --> 00:04:11,282
be displayed on one side.

95
00:04:11,350 --> 00:04:13,075
And we'll need to wrap the

96
00:04:13,075 --> 00:04:14,799
"children" in another div,

97
00:04:14,865 --> 00:04:17,226
to display them in a separate block.

98
00:04:17,625 --> 00:04:20,048
This is just a crude skeleton,

99
00:04:20,048 --> 00:04:22,301
but you can see how this allows

100
00:04:22,301 --> 00:04:24,118
us to display a side bar.

101
00:04:24,190 --> 00:04:26,573
I'll go and put a border around the

102
00:04:26,573 --> 00:04:28,956
elements in the RootLayout as well.

103
00:04:29,024 --> 00:04:31,382
We can show one around the header,

104
00:04:31,382 --> 00:04:33,740
but maybe with blue as the colour.

105
00:04:33,809 --> 00:04:36,569
And let's do the same for the footer as well.

106
00:04:36,569 --> 00:04:39,685
This way we'll see in blue the elements

107
00:04:39,685 --> 00:04:41,843
provided by the RootLayout,

108
00:04:41,923 --> 00:04:45,810
and in red those added by the ReviewsLayout.

109
00:04:45,810 --> 00:04:49,343
Now, an important point is that the nested

110
00:04:49,343 --> 00:04:52,876
layout applies not just to the ReviewsPage

111
00:04:52,960 --> 00:04:56,335
but to all the pages inside this path,

112
00:04:56,335 --> 00:04:58,961
like the Stardew Valley page.

113
00:04:58,961 --> 00:05:02,780
You can see that this one also shows the side bar.

114
00:05:02,780 --> 00:05:05,938
And the same will be true for the other review,

115
00:05:05,938 --> 00:05:07,416
that is Hollow Knight.

116
00:05:07,484 --> 00:05:10,146
However, the ReviewsLayout will

117
00:05:10,146 --> 00:05:12,380
not apply to the HomePage,

118
00:05:12,465 --> 00:05:14,962
nor to the AboutPage,

119
00:05:14,962 --> 00:05:18,650
because those are not under the "reviews" segment.

120
00:05:18,650 --> 00:05:22,131
These pages will only use the RootLayout.

121
00:05:22,131 --> 00:05:24,694
Only the pages under the "reviews"

122
00:05:24,694 --> 00:05:27,031
segment will show the side bar.

123
00:05:27,106 --> 00:05:29,549
We could use this feature to display

124
00:05:29,549 --> 00:05:31,245
some filters for example,

125
00:05:31,313 --> 00:05:34,167
allowing the user to search the reviews,

126
00:05:34,167 --> 00:05:35,808
or something like that.

127
00:05:35,880 --> 00:05:38,983
Nested layouts can be quite powerful.

128
00:05:38,983 --> 00:05:40,964
But, as I mentioned at the beginning,

129
00:05:40,964 --> 00:05:43,349
we don't actually have a need for this

130
00:05:43,349 --> 00:05:45,169
feature in our app right now,

131
00:05:45,232 --> 00:05:49,218
so I'll delete the ReviewsLayout at this point.

132
00:05:49,218 --> 00:05:51,121
And also remove the borders

133
00:05:51,121 --> 00:05:53,023
from the header and footer,

134
00:05:53,094 --> 00:05:56,213
that was just a quick way to show you which

135
00:05:56,213 --> 00:05:58,534
elements came from which layout.

136
00:05:58,606 --> 00:06:01,763
In the next section we'll also see how

137
00:06:01,763 --> 00:06:05,468
layouts are not just a convenient way to share

138
00:06:05,468 --> 00:06:08,689
common elements across a group of pages,

139
00:06:08,770 --> 00:06:12,509
but they also affect how each page is rendered,

140
00:06:12,509 --> 00:06:14,312
including when navigating

141
00:06:14,312 --> 00:06:16,115
from one page to another.