Build a Fullstack Music App with Next.js Creating Player Layout

Transcript from the "Creating Player Layout" Lesson

[00:00:00]
>> So what I'm gonna do to make the layout I'm just gonna make a new folder on a root. I'm gonna call it components. And I'll make a new file in here. And I'm gonna call it the playerLayout.tsx, like so. And again, the whole point of this component, if we go back and look at the design, it's going to be a layout that basically has this sidebar, this music bar at the bottom, and then houses the actual page.

[00:00:30] So we want that to be consistent. So we're just gonna make one component so we don't have to write it for as many pages as we have. So it doesn't really do anything. It just lays out all the stuff that actually does work. So yeah, but it needs to look good.

[00:00:45] So that's what we'll be doing. So what we'll do here is, a lot of component libraries are having this concept of basically replacing div with their own thing. In Chakra UI it's called a box. So you're gonna see a lot of box in this course, which is basically a div.

[00:01:05] So why not just use div instead of use box, well, again, it's because how I can style it. If I didn't use a div, I would have to style that with either inline style tag or a CSS file. If I use the box I can use Chakra's primitives to actually style it, which is a lot better, and you'll see why in a minute.

[00:01:21] That is the only difference. So when you see box, think div, it's the same thing. It doesn't do anything special. So speaking of that, I'm actually going to import box up here. So I'm gonna say import from @chakra. Instead of chakra-react, I'm actually gonna import from chakra-ui/layout. So they have two libs here.

[00:01:37] I'm gonna import box, like so. And then I am gonna make a component called PlayerLayout. I typically name my components the same as the file. So that's just a habit that I get in. So I can remember what's happening. And because naming stuff is hard. So PlayerLayout, and then what PlayerLayout is gonna do, like I said, it doesn't really do anything.

[00:02:05] It doesn't have any state, it's just laying things out here. It is gonna have access to children because most layout components do need to render their children somewhere. And in this case, the child will be this page that sits to the right of the sidebar and above the play bar, that's the child.

[00:02:20] So we need to render that child in that position. So we're gonna have access to the children here. And then what we wanna do is go ahead and build this thing out. So I'm gonna say box, like so, oops, all right, so. Like this, and then what I'm gonna do is just to test this out, I'm gonna type in the word layout here.

[00:02:45] I like to test my things out before actually start building it to make sure everything works out. So I'm gonna say layout. And then I'm gonna say, {children}, like that. So I'm just gonna do that. And then now I'm gonna take this layout, and I'm gonna put it in our _app, just to make sure it works.

[00:03:02] I want to make sure that we're actually rendering the thing that we need to render. So I'm gonna go here, back to our app here. And what I'm gonna do is, again, I'm gonna wrap our component, which will be every single page in the layout. So that's what I'm gonna do.

[00:03:19] We're going to import our layout. So import PlayerLayout. Got a nice autocomplete here. Go down to our JSX in the _app and wrap the component, not the ChakraProvider. We wanna stay in the ChakraProvider. Otherwise, our layout would have access to any of our theme primitives, which would defeat the purpose of using anything in the layout.

[00:03:41] And I'll say PlayerLayout, like so. And I'm just gonna put our component in there. So now that I did that, let's run this thing and see what it looks like, npm run dev. And you can see there it is, the word layout at the top left. So that tells me that I'm actually in my layout.

[00:04:07] And this homepage is the child that's in the layout. My CSS looks funky because I got rid of that import for the global CSS. So that's why it looks weird. That's fine, we won't be using that anyway, but we are in our layout. So we are good to go as far as creating that layout.

[00:04:23] The other way you could do a layout Next.js is that we could actually just use this layout component and wrap it around the pages individually. So I could just to come this homepage and wrap this whole thing in the PlayerLayout. Only problem with that is, is that layout will reload every time, which is probably fine.

[00:04:37] You won't visually see it, but if it had state, which ours will, because we have a play bar at the bottom, that music streaming part that's playing will reload every single time, which would not be great. But if you didn't have any active state or anything like that, if all you have was links or just some navigation elements, that's totally fine.

[00:04:59] Visually, it won't look like a reload and it's still the same state, so it's not a big deal. But in the case of our app, that would be a problem. So just be careful of that. And that's actually why I put it in _app. But that also raises another issue, as in now every single page has to be inside of this component.

[00:05:17] But I said we're gonna make a sign in and sign up page, which should not be wrapped inside this layout. There is a way to get around that to where we can opt out and opt in to this global layout without actually putting the layout on the individual pages and having that state problem.

[00:05:30] But still having a choice on which component gets to lay out or not. So we get the best of both worlds.