Build a Fullstack App with Next.js, v2 Root Layout Components

[00:00:00]
>> We last left off, creating that glass pane component, and we're quickly gonna move on to making our all through layouts and we'll actually try to render some stuff on the page and see what our app looks like. So let's do that. First thing is let's go to our code and we'll go to the app slash auth slash layout, and this is where we're gonna make our root layout for the auth root, root grouping.

[00:00:31] So, let's do that. So, we'll say exports default function here, and I'm just gonna call it like auth route layout, something like that. The layout just needs to have an HTML tag, like that. And then for the head, we already have a head so we can actually just do this.

[00:00:58] And what it'll do is use the one at the root here Was like a partial, and then we need our body. And then because it's a layout, it's going to have children. So, got to put children here and you can do that but we want the child, in this layout to be wrapped in the glass pane, so we're going to import the glass pane and wrap it in there.

[00:01:33] So let's do that. So gonna say glass pane like that, and just wrap that like so. Wow, I did the autocomplete with a shortcut. That's cool. I don't know how I knew that. I didn't know it did that. I thought I was going to do the dot dot, dot dot dot stuff.

[00:02:00] Awesome. Alright, so we got that. And then there's, you know, some styles that we can add to it. That's, it's not going to look like anything because we haven't installed tailwind but when we do, it's gonna look great. So we can go ahead and add those styles. So I was gonna say class name here.

[00:02:16] And height of screen, I think is equivalent to like, view, view height 100 100 view height, so I'll just make it as tall as the screen. Same thing as the width, make this as wide as the screen, and then I'm gonna add this other one called rainbow mesh, we're gonna add that to our global.

[00:02:38] And then we have another one here that's going to be just some padding For the glass plane, we're also going to add some class names and we're just going to extend the width and the height. So we'll say width is full, height is full, flex this. We're going to center it, so item center.

[00:03:06] And justify. Justify center. So if we go to, if we want to see this layout in action, we have to go to a page that triggers this layout which will be either be signed into register so I'm gonna go to the sign in page and just make an empty page here.

[00:03:26] Export default function sign in. Cool. Just a component that returns to anything. So, we can actually trigger the layout rendering, we can see it see how bad it looks because we don't have tailwind installed yet. Okay, so now we can just do NPM run, dev, we're gonna start this.

[00:04:04] Mine is on 3001. So I have the other app running and then I'm gonna go to slash sign in, and there we go. We're at sign in. And if we looked at the dom, you can probably see, yep, there's the layout right there. So it's working. It just doesn't log anything cuz we haven't added any CSS All right last thing we want to do is import our global CSS so we'll say import from styles global.css.

[00:04:53] Alright and I'm gonna do the same thing for the dashboard one which is mostly the same but plus more. The dashboard just has a lot more stuff in it, but it's mostly the same base. So we're going to the dashboard one, we'll go to layout. I'm just gonna pretty much paste that in there, change the name to dashboard, Layout, root layout.

[00:05:19] Like that. This unit dashboard is when we start making the other components like the sidebar and all the other stuff we're going to add them here but for now it's mostly the same until we get to that point. And we can trigger this by doing the same thing.

[00:05:36] So I can go to home. We already have page here. Just make a blank component. Just gonna copy the one from sign in, go to home, paste that in, call that home, say home. So now if I go to, that one's, I don't think we added that to the TypeScript, so we'll have to add that.

[00:06:00] So now if I go to, actually I guess we gotta do it now. Let's go to tsconfig. Yeah, I just gotta add a path for the styles. So now if we go to slash home once this thing's loaded up, let's load up something. Let's see what's actually there.

[00:06:34] Something's there. Yeah, it's there. It's just I don't know, the text is a different color or something, but it's there. So that's the CSS, but we just want to make sure it's actually loading up, which it is. So we're good there.