Build a Fullstack Music App with Next.js Setup Chakra UI

[00:00:00]
>> So let's hop into the code here and the first thing is like I said, we really want to think about how we're gonna do that layout. The sweet thing about Next.js is that there's many ways to do layouts in Next.js. In React is actually quite simple because you have access to the entry level component that you made in React.

[00:00:23] So you can put whatever you want there. Whereas in Next.js depending on, if you haven't used Next.js then the way that that works is each page is you can opt into how you want to render each page. You can either render it on the server, you can render it on a client, you can do static generation ahead of time or you can do a hybrid of all of them.

[00:00:43] There's like many different ways you can do it. So depending on that, that's gonna determine how those layout components actually behave. So you might not be able to do some of the same things you did in React that you can do in Next.js. So there is a couple ways you can do it in Next.js and then we're gonna go through the one that I think is gonna work the best.

[00:01:04] So the first thing we're gonna do is actually install the UI library that we're gonna be using because we're not gonna make up all these components from scratch. We would be here forever trying to do all that stuff, so we're gonna work with a UI lib that comes with a bunch of components so that we can style them from there.

[00:01:20] You should already have it installed if you ran that NPM install thing. If you go check your package JSON is actually called Chakra UI. They have a really great documentation website. I'm actually gonna head over there now so you can take a look at it. And the reason I chose this one because I think they have a really good combination of some really nice components already created.

[00:01:40] But also how you can enhance and style those components is really cool. One thing that I don't like about component libraries is like, you want to change the style of this component? Too bad, you can't. Or, you got to import the CSS file, which importing CSS files is not the best way in my opinion to add CSS to a JavaScript app because CSS is global and they got a lot of problems there.

[00:02:02] So I like to have my CSS scoped and I really want to live as close to the JavaScript as possible, if not in a JavaScript, they allow us to do that so we're gonna be using Chakra for all of that. So in order to install it, this is a couple things we need to do.

[00:02:16] Let's do the layout stuff, so we'll head over to underscore app. And again, this is the entry part to our app, this is where if you've ever used React, there's this concept of providers. A provider is just like a component that provides context for your whole app. Context is state that can be shared and accessed at any component.

[00:02:36] A provider just gives every component rendered inside of it access to that context. So Chakra UI actually comes with the provider that we'll be using, and we can import that and wrap our app inside of that. So we'll import from what is it, at Chakra UI React, and what we wanna import is gonna be Chakra provider.

[00:03:02] So Chakra provider, and we're also gonna do this other called extend theme, because we have a mostly dark theme and by default it's a light theme. And some of their grays were really off they were like bluish gray which is kind of weird so I made them like real gray, so we'll do that, we're gonna import that.

[00:03:19] Another thing we're gonna import is gonna be the reset CSS, so what I'm gonna do is I'm gonna get rid of this global CSS that Next.js had imported at the top. Like I said, we're not gonna use any of the CSS that came with this scaffold, so I'm just gonna get rid of that.

[00:03:33] And instead of gonna import something called reset CSS, which should already be installed from the package JSON that you had. All this is gonna do is reset the CSS to be the same in every single browser. All browsers apply default CSS differently. This just resets it so that it's all the same, so that'll do that.

[00:03:52] And then the next thing I'm gonna do is I'm gonna fix this theme from Chakra. And the way that this works is I can make a theme objects like so, so I'm gonna say theme and it's going to extend a theme which is gonna take an object. And really the only things that I want to change here are gonna be the colors.

[00:04:10] So I'm gonna change some of the colors, specifically the gray one, like I said, it was like bluish gray and I thought that was weird. So what I did was I went to the Material Design website that has all these colors, and they had a really nice gray palette.

[00:04:23] So I just copied all of those and I'm just gonna add them here because I thought those were more true to gray than the bluish gray that Chakra had. So the way that that works is you give it a number like 100 and then you give it a color.

[00:04:34] So for 100, I'm gonna do, I think this one is F5f5f5, like so. And for 200 I'm gonna do EEEEEE. And then for 300, I think this one is gonna be E0E0E0. And then for 400, let's do BDBD, so BDBDBD. And 500 is gonna be 9E9E9E. 600, this is gonna go all the way up to 900 by the way, [LAUGH].

[00:05:15] 600 is gonna be 75 or, yeah 757575, oops. And 700 is gonna be 616161. And 800 is gonna be 424242. And then lastly 900 is gonna be 212121. There we go. So now we got some true grays in here. The other thing I want to do is that, for some reason, well, I guess this makes sense but all of the anchor tags, especially the button anchor tags have the underlying on them, and they have this weird shadow.

[00:06:03] So I want to get rid of that too. So the way that I can do that is I can come down here and I can say, components, not composition, but components like so. And now this allows me to extend any of the components. I want to extend a Button component with a capital B.

[00:06:18] And I wanna change one of its variants. So variance is like the type of button. Most theming UI libraries have this concept of variance where a variance is like I have a big button, a small button, a success button, error button, all these different variations of a button.

[00:06:35] So I wanna change one of the variations called the link variation. So there's this concept of a link button and I wanna change that to where when we focus on the link button, I want to get rid of the outline that it puts on it which is pretty gross.

[00:06:51] So I'm gonna say none, and then I want to add a box shadow or I want to get rid of the box shadow that's on it so I am gonna say none. So just doing all that to adjust the theme and with Chakra UI, you can pretty much do whatever you want with this theme.

[00:07:05] You could put your own custom color palette as you saw, you can change all different variations, you can make different variations, you can do all types of wonderful stuff. So I really like this component live because it's super extensible. And I'm gonna push this up to GitHub after I've done too.

[00:07:23] So if you don't get the exact colors down, that's fine. They're gonna come in handy later, I mean your colors will just be off until we get there. So don't worry about trying to get them all right now. And then finally what we need to do is we need to wrap our component in the Chakra provider.

[00:07:38] So I'm gonna say Chakra provider like so, put our component back in there. And then the last thing I need to do is just parse the thing that we made, was just gonna be theme like that. Any questions on extending the theme with Chakra UI? And like I said, most component lives follow this convention of creating a theme file and then extending it and adding it to a provider.

[00:08:03] It's pretty common thing now so it's not something unique to Chakra but I think it's really cool.
>> [INAUDIBLE] accessibility why is that doesn't seem like a good idea to [INAUDIBLE] to focus?
>> Yeah, accessibility wise, it probably isn't a good idea. But at the same time, I'm following the exact design that the Spotify app has.

[00:08:26] So I guess Spotify doesn't care about accessibility.