Next.js Tutorial #6 - Adding Styles

Key Takeaways

all right then so we've created so far a layout including a navbar and a footer and some content in between for each page but currently it looks horrible so what i'd like to do is add some css to this to make it look at least semi-decent now you can add css to next project in various different ways you can use global style sheets for global common styles across the whole website you can use something called styles jsx which lets you write css in a react component or we can use css modules which next has built-in support for whereby each component can have its own unique scoped style sheet now what we'll be doing is using a mix of a global style sheet and css modules so first of all let's create the global style sheet and in fact we don't need to create it because it already exists and it's inside the styles folder right here and it's called globals.css so these are the global styles that come along for the ride when we create a new boilerplate next application what i'm going to do though is delete all that because i don't want any of those and we're just going to paste in our own styles so i'm going to grab these from my repo over here woohoo and remember the link to that repo is down below so you can copy and paste them as well and the reason i'm copying and pasting these in is because i don't want to spend a lesson boring you with css when that's not what you're here to learn so i'm just pasting them in but i will walk you through them very quickly so remember anything inside this global.css file is going to apply to anything on the whole website so the first thing i'm doing at the top is importing a google font called nunito with these different weights all right so then what i do is inside the body is apply a background of this light gray color the text is a dark gray color and then the font family of everything is nonito which is this font i imported okay so now every anchor tag has this color text and a text decoration of not to remove the underline this content class right here remember is inside the layout i think yep this thing right here so this has a class of content and we start it right here we get a max width of 960 pixels and a margin of zero top and bottom auto left and right and that centralizes all of the content on the page in a central column of this width then the nav which is in the layout remember the nav bar if i open this up is this right here so we're styling that we give this a bit of margin some padding we display as flex and we justify the content as flex end meaning everything goes to the right so all of the links are going to go over to the right and we align items to the flex end as well meaning they sit at the bottom of the container now the border bottom of the nav is one pixel solid and a light gray then the anchor tags inside that would give a margin left of 12 pixels the logo which is the h1 currently in the navbar so this div right here we say give this a margin right of auto so what that does is instead of letting that appear over on the right with the rest of the links because of this flex end it applies a margin right to it and puts it way over to the left so the logo will sit on the left and all the links on the right and then finally we have some styles for the footer display as block text align center bit of padding but imagine top the color is a medium gray of the text and then we have a border top as well so if we save this now we should see those styles take effect and that looks a bit better now so we've styled the general layout here using some global styles so we've not done anything page specific here just the layout okay so now oops i don't think the styles of the footer at the bottom have been applied let me just do a hard refresh because it's not sitting in the middle footer and let's go to the layout we have the footer there inside the footer okay that's why i'm going to change this from a div to a footer like so because that's what we're targeting and now if we save it okay that looks a bit better cool all right so how are these styles loaded in well if we go to where the root component is inside pages this app.js file over here we can see that at the top we import the global css file and that means that everything is going to have those styles applied to it because all of our pages are rendered here all right so they apply everywhere so we have to import those global styles right here for them to work so that's the global styles done what about page specific styles well for that we're going to be using css modules so css modules allow us to write a style sheet for each page component or section and then we import that style sheet into whatever component needs it and next is automatically going to scope those styles to that component by adding random characters next to the class names and selectors and that means that those styles will only apply to that component so you don't have to worry about class name conflicts between different components and their style sheets because those components can each have their own scoped styles right so right now we can already see if we open up the styles folder we have this home module right here and this module is being imported into the home page so this thing right here at the top so we import styles from this thing right here and then we can use this inside this component to add class names so if we take a look at this file first of all notice it's called home then dot module.css so first of all modules must have this naming convention so whatever the file is called dotmodule.css now inside here let's just use one of these classes i'm just going to use this class right here and in fact i'm going to add to it i'm going to say background is going to be red so it's very obvious that we're using it and i'm going to save this now what if i want to use this class inside one of my components well we're already importing it into this component right here we say import styles from this file so what i want to do is now apply this container class right here to for example this div well the way i do that is by saying class name first of all and then setting it equal to something dynamic so curly braces and then inside we use styles which is this right here that we import dot and then the class name so that remember is container i think yep so we'll say styles dot container like so and what that does is apply that class to this div so if we take a look we can now see that this is all red all right now if we inspect this then we can see right here that this class has a random set of characters at the end of it right here and it says home in front of it and this is what scopes these classes to the components because if we use this inside the about component it would be called something else this class and it sculpts it to the component that it's used in so if we use the same class names in different components it doesn't matter they're not going to clash with each other because they're edited they're changed to something unique to that component right and we can see inside the head that those styles are going to be imported and it's this one right here we can see the background red and the selector has those random characters on as well so next does all of this in the background for us and it makes it really easy then to scope styles and now if i wanted to what i could do is create another component another css module rather for my about component and have styles for the about page in there and if i have a class name of container again it doesn't matter because they're going to be scoped to those files they're not going to clash with each other all right then so what i'm going to do is actually again delete all of this bump and i'm just going to paste in my own styles which again i'm going to grab from my repo over here so let me just grab these things and i'm going to paste them in over here into home.module.css so we have three classes a title and some text and then a button so what i'm going to do is use these three classes inside our home components so let me get rid of this first of all we don't want that to have a class name of title anymore but i do want this to have a class name equal to styles first of all dot title and then i'm going to just copy this and paste it down here like so and like so i'm going to change this to text because we have a class called text and this as well and then finally this anchor tag i'm going to give a class name equal to styles.btn that was the third class we had so let me just spell this correctly if we save this and preview now we should see that looks a lot better okay cool all right then so finally what i'm going to do is create one more file and this is going to be called ninjas dot module dot css and this is going to be for this ninjas component over here later on i'm not going to place anything inside this at the moment i'm just creating it so that later on when we flesh out this ninja's index component we can use that css module inside this component i'm not going to create one for the about component because i don't really think that needs any more styles if we take a look at this it's very basic i don't want to apply any more styles to that now there is one more thing i want to mention about these css modules right here and that is that the selectors must be pure selected meaning you need to use class selectors and not element selectors for example you couldn't just write a selector for paragraph elements like this they need to be classes which we can then apply inside the components if i can find the component that we use them in this one over here like this so that styles next up we're going to take a look at how to create a custom 404 page