Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
10361
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.