Introduction to Next.js 13+, v2 Layout Components

Transcript from the "Layout Components" Lesson

[00:00:00]
>> So the next thing I wanna talk about are these, I think Next.js has an unofficial name for them. They either call them like special pages or something. I don't think that's like their coin term. I've seen it in their documentation, referred to it as special pages here and there, but I don't think that's what they're calling them.

[00:00:16] They're just trying to figure out like, how do we refer to these? These are basically what I call auxiliary pages. They're not pages that where you can mount to a route, but they work with the pages. So the first one is the head component. Head component is pretty much exactly what it sounds like.

[00:00:31] In fact, if you use create next app, they already generated one for us. It's exactly where all the stuff that you would normally put in the head tag goes. And then it's gonna be used on every single page. That way you don't have to do it twice or three times, or how many pages you have.

[00:00:45] If you have used Version 12 before, or if you're going to use Version 12, you would probably put this in your document page. Your underscore document inside of the pages directory. You'll put it here. It's the same thing. It's the equivalent. It's just what people call a partial.

[00:01:03] If you've ever done traditional server side rendering, that's where the term comes from. These are partial templates that kind of get merged together. So this is like a partial, and it's just for the head tag. That way you don't have to rewrite it a thousand times. So you notice we have it here.

[00:01:21] And then if we wanna use it, we'll talk about layouts in a minute. But you can see the layout has had here. And it's just referring to the ones returned from the nearest head.tsx file. Which basically means in any folder we can have multiple head.tsx files, and that's because sometimes it changes.

[00:01:40] Like for instance, in this block slug, for this one, its head tag is definitely gonna be way different than what the head tag would be on the route. Because we need to include things for the blog posts, social, OG, graph links, Twitter, Facebook, the images, the title or the blog post, the author.

[00:01:59] That all is gonna be very dynamic, so that they generate that. So a layout is gonna look for the nearest parent head tag. So here's an example of it. But basically everywhere you would put things in your head, you would put here. So metadata, things like that. So that's one of the special ones, yeah, if you need to do that, mostly with SEO and things like that.

[00:02:19] The other one that's way more interesting to talk about, a way more powerful, and we'll actually do some stuff, is this one, the layout? Now, this is a heavily requested feature from Next.js. I know I've been dying to get something like this since I've been using Next.js, and it's exactly what it sounds like.

[00:02:35] It's a layout, right? A layout is basically, take some common UI that you want a bunch of pages to have and share. And you can create a component that abstracts that UI out, and then you can embed the pages into it, so it kinda wraps it. So you could think of this as like a nav bar, a sidebar, and a footer.

[00:02:57] That's going on all my pages. So I'm gonna put that in a layout. And then it's gonna wrap everything else. So they all have those elements around it. And V 12 of Next.js, there's no framework specific way to do this. If you go look at the documentation of V 12, they have three different ways they recommend that you do it, but it's still on you to figure that out.

[00:03:15] And there's still like, the biggest caveat with all those approaches, is that you can't get data in the layout, which is just it hurts. Because a lot of like, think of a layout where, I don't know, you have a sidebar and it's got like the user's picture and their name, okay?

[00:03:30] You got to get that from somewhere, but the layout can't get data at server time on Next 12, so you have to either get it client side, which introduces more issues and things like that. Well, I'm glad to say that layouts are now fully supported first party with Next.js.

[00:03:47] All you have to do is just make a layout file. Layout.tsx is the name of the file that you have to make on any given level, and all the pages on that level, and underneath it we'll have that layout, right? So let's give it a shot. So in this layout, I'm going to, I don't know, put something here that says, layout, all right?

[00:04:10] And then I'm gonna render the children here. Let's put that in a div, like that, okay? So now every page that I go to, because this layout here is on the route, we should see layout, right? So, let's see. There it is. There's layout. It's right there. If I go to slash, contacts, there's layout.

[00:04:34] It's still there, blog. I've never made a page for blogs, that's never gonna show up. But for slug, there it is. It's still there. That's the layout. It's going to be a layout for all the pages and all the children underneath it. Which if you've thought about a little more, you could do nested layout, which is really cool, right?

[00:04:57] So what does that look like? Well, if I go into my contact here in this folder, and I make a layout.tsx, right, and then I can do something like export default function ContactLayout(), like this. And then I can say, return this div, I need to grab the children.

[00:05:24] Because it's a layout, you have to always remember to embed the children. Because the children are the things that's being stuck into. These are the pages or the layouts, cuz it could be a page or a layout going into another layout cuz they're nested. If you don't have that, it'll just be the layout itself and you'll never see your content.

[00:05:41] So be sure to have that. And then you can just say like, contact layout. All right, and then you can say something like that, children, like that. So now if you do that, we got a contact. You can see here's the outer layout, here's the contact layout, and then here's the actual contact page.

[00:06:10] All right, so it can nest forever. So it's actually quite powerful.
>> So would it be possible to have a sub-layout override like a parent or layout that exists above it?
>> Yes, there is a way to do that. So one of the cool features of route grouping, I think that's, I'm gonna keep saying that, I'm pretty sure that's what they call it, is that it allows you to opt into that.

[00:06:36] So first I need to explain the difference between a root layout and a regular layout. So let me talk about that and then I'll get back to that. So right now we have two layouts, this first one is called the route layout. Every app in Next,js has to have at least one root layout.

[00:06:54] Otherwise it won't work. A root layout is literally the master layout, you have to have at least one. And there are scenarios where you can have more than one if you have route grouping. So if you have route grouping on the root of your app folder, those two different groups might not have the same route layout, they have their own individual route layout.

[00:07:16] So there's an example where you might have more than one route layout. But for most cases if you're not doing route grouping like I'm not right here, I would only have a layout on the route, and this is the root layout. And this will be a layout for every single thing on the page, there's really kinda no way around it.

[00:07:31] But again, if we start doing route grouping, if these have parentheses around them and they have their own layouts, I can opt out of this layout right here by exporting a variable inside of the actual layout to say, I don't wanna use this anymore, and I can opt out of it.

[00:07:48] There's also another one called template. I'm only gonna talk about itbecause it's worth talking about. It's the same thing as layout, except for one caveat, is that, a layout doesn't get refreshed when the the route segment changes intentionally. Its UI elements stay there. A template changes every time a route template changes.

[00:08:08] So that's the only difference. So if you make a template.tsx or jsx or whatever, instead of a layout, you'll get the same effect. It's just that that template will actually re-render every time the segment changes. And so you might ask, so why would I ever want that? Probably mostly for like animations.

[00:08:25] If you need to have like an enter or exit animation on those layout elements, if they never re-render you're never gonna trigger those entrance and exit animations. So use a template instead. Or if there was some part of that layout where you want it to refresh all the time or get constant data, you can use the template.

[00:08:43] So whenever the route changes, it's always up to date. But for the most part, just always use a layout until you're like, we actually need this specific use case, then use a template. But yeah, they have that, but I almost don't recommend using it. Just use layout, yes.

[00:08:59]
>> One more question. So would it be possible to say like the layout needs context information? Would there be a way to wrap a context provider around the layout component, or is that not something that's possible?
>> So we'll get to context cuz, [LAUGH] it doesn't work the same anymore with React 18, and the two different types of components that you make.

[00:09:20] But for the most part, if you opt into using your components the way you normally use them, which are client component, you can do a context. But if you're not using client components, you cannot do that. They don't work. There's not gonna be a lot of context stuff in React I see in the future.

[00:09:40] I think a lot of that's gonna not happen in my opinion, and you'll see why.