Jamstack Explorers

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.


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]


your progress