Introduction to Next.js 13+, v2 Global Styles

Transcript from the "Global Styles" Lesson

[00:00:00]
>> Couple ways to do styling here in next.js. Actually there's more than a couple ways, so I'm just gonna go through the two or three that I think are the most useful. There are some other ones that are mostly meant for like optimizing and production, so I'll say that for a production grade Next.js course, or may be the full stack one.

[00:00:17] But we'll go through the ones that are like, pretty easy to use and then from there, why should try to run through and like, make like a little website, see what happens with all the skills that we just made. So, global styling, so global style is exactly what it sounds like, it's how you apply styles to your entire app.

[00:00:39] It's actually quite simple. So something you can do here in the next.js, repo is we just get rid of those things, is what I like to do, is I like to create, I think they might already have one here already. They don't like to create a folder on the root, and call it styles.

[00:00:57] And then I'll make a global file, not global, global CSS like that, and then I'll just add my global styles here. So, if you don't add this, this one right here, everyone knows this one. You're just, gonna be messed up, this would just be default. I don't understand why the system just default in all browsers, I can't stand it single handedly.

[00:01:23] The most destructive thing, if you don't get right, you will. Everything is off, so, if you've ever been like, why did that padding make my thing, my box? 30 pixels bigger, yeah, it's cauz of this. That's why, so do that anyway global, and then from there, you just want to find a layout.

[00:01:42] Preferably your root layout, in this case it will be here for me in the app directory lay out TSX. Thanks, and I wanna import it, and luckily for us, it's already imported. They already have a global CSS file here. So they co-located and when I say they, this is what we got from, the scaffold from create next app, they.

[00:02:00] Decided to co-locate the global CSS in the app directory, which is fine, there's nothing wrong with that, you could totally do that. Me personally, I find it noisy to have that global CSS file in here, so I put it in a styles folder. You got get the same effect, there's really no difference here.

[00:02:15] So, you can leave this here, you can import it, it doesn't really matter. The only difference between this and mine is the path, right? Mine would just be, styles, global. That's it, so, same way, you just import at the top. You don't need a from. You just need to import it.

[00:02:37] And that's because there's, the build system knows how to handle these files. It's going to take this file, it's going to create like, style tag and inject it in for you and do all that stuff. So you just need to do that, so this is your global CSS.

[00:02:51] Pretty simple, and this is the CSS you would use to like, reset things, apply global styles, things that are like are not unique to components. I wouldn't put component styles in here, because then they will bleed on to each other, and you should be using scoped CSS for that.