Introduction to Next.js Variants & Styling

Transcript from the "Variants & Styling" Lesson

[00:00:00]
>> All right, let's continue to make our app look good. So, the next thing is, let's get our index page looking good. So you can just copy and paste this to the index.js. And again, if you don't feel like copying and pasting this, you could just check out to the branch.

[00:00:12] There's a lot going on, but I'm just gonna do it. Cool. So here's one little break. I talked about variants before, so here's an example of that. So I'm able to use this word variant, which points to something that I defined in theme-ui. So you can see I'm saying, I want this variant to point to containers.page.

[00:00:31] Well, if I go to theme, I have containers and I have page. So basically take these styles, and apply it here. That way I don't have to write them all. So you could imagine, you could get rid of all these in line styles, everything that's in line, and just mask them behind variants, and then you're done.

[00:00:47] You just go add variants to all your JSX elements, and then all you ever have to do is just change them here. That's it, you're done, you never have to touch JSX again for style, unless you're changing a variant name. That's all you gotta do. Very simple. I can't think of a simpler way to style this and make it look good.

[00:01:03] So, yep, that's the variants, and then, let's see. Then we'll go down to the notes index page, we got some stuff here, so we can copy this and zoom out, so I can copy it, and zoom out some more. There we go. Don't forget to copy that JSX pragma comment at the top of this code, if you're following along, you gotta copy that comment.

[00:01:28] Otherwise it won't tell the compiler how to compile, and you won't get all the JSX properties and stuff like that. And then the last one is just the id page, so, copy that id page. And we'll put. Yeah, was that right? Yeah, there we go, id page. Should be good to go there.

[00:01:51] And here's just an example of the root app. So we already added a ThemeProvider, and now you can see I just added the nav component. So then we got asked the question earlier, it's like, yes, this is a good place to do a layout. Exactly, that's exactly what we're doing here.

[00:02:05] You can see I'm adding the nav component to the root here, so we're gonna just copy that. And add that to our _app, like that, boom. So now we got our nav, we have our theme, we got our page. Everything's themed up, ready to go. So now, if I were to just save all of this stuff, and go back to localhost, boom, now you get, a decent looking app, I guess [LAUGH]?

[00:02:35] So, yeah, we get something that looks more like an app now. And everything just works. So, yeah, this is where you should be at this point. And you're almost ready to go get funding for this note taking app, so, let me know if you wanna talk to some investors.

[00:02:51] [LAUGH] All right. The last thing I wanna talk about with Theme UI, something that's very similar to it, which is Baseweb. I've used Baseweb once or twice, and it's the closest thing I can think of that's Theme UI, I think it's created by Uber. And they're very similar.

[00:03:08] They take a different approach, but the result is very similar. And they're also meant for theming and stuff like that. It's a very good framework. However, I recommend checking it out, it's very well maintained as well, documentation is pretty good too. So you can check this out, it does a really good job of getting you there.

[00:03:25] And the other last thing is, Theme UI also has built-in components that actually are really good [COUGH]. You can actually build an entire application just using their built-in components. I've done it, I've never had to make a custom component, just using all of their stuff. So I highly recommend checking it out, because, I mean, they have everything from flex boxes to grids, buttons, cards, forums, you name it, they've got all the basic stuff that you need.

[00:03:48] It's basically just div styled with themes already that are already hooked up to variants. So all you gotta do is just change the variants in your theme object. So, really cool, so, highly recommend checking that out too. So, we left off on Theme UI, and how I style components in my React applications, just know that theme-uiI is not specific to Next.js.

[00:04:10] It can work in pretty much any React environment. I worked very well with Gatsby, it was I'm pretty sure Gatsby is the team behind Theme UI, so there's tons of integrations and plugins there. It works good with create-react-app. It works good with react-static, which is another static running library for React, which is very popular.

[00:04:27] So it just works in React in general. And I think there might be plans to make it work in other places as well, like View and stuff like that. So, yeah, Theme UI, pretty dope.