How to Implement Styling in Next.js

Styling is the most important aspect when you are developing any application. You might have the best functioning application but if your UI is not that great it is difficult to maintain active users. Styling is essential to build any web application. So, In this blog, we will be discussing how we can implement styling in Next.js and will see how we can implement global styles, component-level styles, etc. So stick to this blog to gain an understanding of how styling works in Next.js.

Global Styles in Next.js

To get started let’s create a next.js app using the following command :

npx create-next-app app-styling

There is not much code we have to write to understand global styles as a starter template we generate after the command pretty much gives us what is required. Here we have created a next js app with the create-next-app command. To begin with we have given a global.css file that contains some basic styling. This file is imported in _app.jsx within the pages folder. This is the most important point regarding global styling. To add a global stylesheet to your app import the CSS file within pages/ _app.jsx file. The component exported from app.js is the wrapper component for every component of the application.

Example: In the global.css let’s change the color of the H1 tag to red and let’s create two components that is having the H1 tag.

As you can see above the H1 content is coming in red color. So our global styles work as expected. When we import the global.css to app.js it is applied to every page in our app.

Note: If you use any external styling library like Bootstrap etc. The above flow doesn’t change.

Component Level styles in Next.js

For component-level styling, next.js supports CSS modules using a filename.module.css naming convention, similar to the global styles next js creates a component-level styling file at the time of project creation.

In the styles folder, you can see a file named home.module.css , this module word here is very important for next.js, it basically informs next.js that it is a CSS module. The file contains identical CSS classes as we have in any other CSS file but there is a difference in which you use these classes. In the index.js file you can see that the stylesheet is imported as styles and within the JSX we access each class using the styles object like {styles.container}, {styles.main} etc.

CSS modules locally scope CSS by automatically creating a unique className which allows you to use the same class names in different files without having to worry about name collision.

As an example, we have created two CSS modules files for Homepage and About page respectively. Both files have the same class name heading.

Now we have imported these styles to respective pages and added the class to the H1

Let’s see the output :

Even if we have used the same class name for two different pages there is no collision of styles on them. So in this way, we can implement component-specific styles in next.js.

SASS Support

When writing styles for your component you might prefer using SASS over plain CSS. SASS is an extension to CSS that provides powerful features like variables, functions, and other operations that allow you to easily build complex features into your project.

To use SASS in next.js simply run the command

npm install sass

after installing you can create the styling file with an extension .scss like home.module.scss. And after all this, you are good to go with using SASS in your next.js project

CSS in JS

The simplest CSS in JS you are going to encounter is the usage of in-line styles in the components JSX. Although the inline styles work good, they are not the go-to approach you might prefer something like styled-components or emotions. Styled-components let you write actual CSS in your JavaScript.
Let’s install the styled-components by using the command :

npm install styled-components

After installing

• Import ThemeProvider form styled-components in _app.tsx
• Create a theme to pass as a prop to ThemeProvider
• Wrap the component in _app.tsx with ThemeProvider and pass the created theme to the theme prop.
• create your styled component within the component file and use it

Let’s see it in an example for better understanding.

Here we have imported the ThemeProvider and wrapped the component with it passing the created theme to the theme prop.

Now we created a styled component for h1 named Title and used it in our component and it works as expected.

Conclusion

So in this blog, we learned how we can implement different styling like global and component-specific styles in next.js. We also understood how we can use SCSS and CSS in JS solution if we prefer to add them to our project.
To learn more about Next.js follow the documentation: Next.js Documentation

If you haven’t started with Next.js and are willing to learn check out this blog that will guide you from the beginning: Getting Started with Next.js.

For more updates on such topics, please follow our LinkedIn page: Front-end Studio