Learning Next.js Basics

CSS Styles for Specific Pages/Parts

While it's nice to have styles that apply to every page, there will undoubtedly be times when you need styles specific to individual pages.

For example, what if I want the h2 element on this page to be red without affecting the rest of the pages?

To start this, go into the styles folder and create a new css file with any name ending in .module.css. (ending the file name with .module.css is required)

For this page I used page5.module.css.

Once you've done that, go into the css file and you can begin setting up whatever style rules you want with once caveat:

• the css names must be pure; meaning they have to be class names and cannot be simply h2 (or other such elements)

For this page, I gave the css rule the name of .h2 (as opposed to just h2).

After you are done setting up your css rules, go to the file you want to use them in (for this page it's page5.js) and import the styles at the top of the page.

For example at the top of our page5.js file you would see:

import styles from '../styles/page5.module.css'

Now that the styles are imported into the file you can assign them using className={styles.whatever the css name is}.

So for this page, our className was assigned to the object styles.h2 within the h2 element. Making it look like this:

<h2 className={styles.h2}>CSS Styles for Specific Pages/Parts</h2>

Using this method of styling has the added benefit of Next.js assigning unique class names for you, which means you can use the same class names in different files without having to worry about naming conflicts! By going into dev tools and checking out the h2 on this page, you'll see that it has been assigned a random name by Next.js, meaning I wouldn't have to come up with unique names for each h2 on each page if I wanted them to all have different styling. I could just use .h2 in every css file and Next.js would handle the rest for me.

That's really all there is to making css for specific sections of a site/app as opposed to using global css for everything.

One to the next thing! Time to learn about getStaticProps( )