Next.js from the Ground Up with Cassidy Williams

Next.js Styling

In this stage, we'll talk about several styling options available in Next.js, and how to implement global styles and themes.

Transcript:

Right now, our application is not the cutest thing in the world. What we can do is use some of Next.js' built-in CSS Support. [00:00:10] First of all, I want to talk to you about global styles. If you want to add global styles into your Next.js application, you do it at the app level. When I [00:00:20] mean at the app level, I mean that we actually have to make a file. It's a New File in Pages, and it's _app.js. [00:00:30] Now this big _app.js, it's really just a component that wraps our entire Next.js function. [00:00:40] As you can see, there's nothing particularly fancy here, but if we wanted to have global styles, what we could do is we could create a file, [00:00:50] styles.css. Then in here, let's just say, we want to add some very, very basic style. We could say that we want our [00:01:00] font-family to be Helvetica, and then we'll add-- [typing sounds][00:01:10] [typing sounds][00:01:20] [typing sounds] We'll just [00:01:30] start with that as a basic global style here. Now we can import this style sheet into that _app.js. [00:01:40] Just like that. Now when we go to our application, you can see that the font changed here. If you're [00:01:50] following along, make sure you restart your server before doing it. Whenever you update that app.js, you have to do that. Whenever you want to have global style sheets, [00:02:00] whether you're using your own defined style sheets or something external like bootstrap, you always import it at the app level. On a per [00:02:10] component level, however, you can use pretty much any styling solution that you would want. My personal preference is CSS modules, you could use styled [00:02:20] JSX, you could use some kind of CSS and JS library, whatever you'd like, and it's natively supported at Next.js. They cover most libraries right out of the box. [00:02:30] If I were to, for example, make a file and call it Pokemon.module.css, I can then add specific styles, [00:02:40] like .container display: flex; [00:02:50] and a bunch of other styles. Now that I've added some of these, I can go back to my component, import [00:03:00] styles from slash ./Pokemon.module.css. [00:03:10] Now I can just use them. I have that class container, so className={styles.container}. If I were to [00:03:20] save that and then refresh the page, look at that. You know it's not gorgeous, but it's good enough for me. That's generally how you do styling in Next.js. [00:03:30][00:03:33]

Explorers

your progress

910