How to use external stylesheets in next.js

Hello, in this post I am going to show you how you can use styles from an external sheet in a Next.js application.

Stylesheets are css files that we use to styles our webpages (i.e it tells browsers how to render a page). External stylesheets are seperate css files that can be accessed by creating a link within the head section of our webpage. 

Importing external stylesheets

In Next.js stylesheets are imported using the import code at the top of our code like so

import styles from "./blog_home.module.css";

The const "styles" is assigned to the imported stylesheet, while "./blog_home.module.css" is the location of the stylesheet with our next.js application.

Using external styles in jfx

After the stylesheet has been imported, we can use it in our jsx section by adding the name const we assigned to the stylesheet followed by the style name all enclosed within string literals and curly brackets like so

<div className={`${styles.example1}`}>
</div>

In the example above styles is the stylesheet name while row_background is the name of the style we wish to apply

Using multiple styles

Lets say for example you wish to apply more than one style on a particular jsx tag, that can be achieved by adding another external style seperated by a space but enclosed within the same string literal and curly brackets as shown below

<div className={`${styles.example1} ${styles.example2}`}>
</div>

Whereby example2 is the second style we wish to add.

Conclusion

External stylesheets are easy to use within our next.js application and its preferred to inline styling to reduce the amount of code on your page and easy resusability of styles. As always thanks for reading if you have any question about syling in next.js  then leave a comment down below and i'll do my best to promptly answer your question.