Next.js CSS Styling

In Next.js, there are multiple ways to add styles to your application, from simple global stylesheets to powerful CSS-in-JS libraries. This chapter introduces several of the most common methods, helping you choose the most suitable styling solution for your project needs.

1. Global Styles

Global styles apply to the entire application and are typically used for defining base styles, resetting default styles, or importing third-party style libraries.

How to Add Global Stylesheets

1. Create a style file: Create a CSS file in the styles directory, for example styles/globals.css.
2. Import in _app.js: Import the stylesheet in the pages/_app.js file. This is the only place where you can import global styles.

// pages/_app.js

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

styles/globals.css example:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Note: Global styles affect all pages and components, so use them carefully to avoid style conflicts.

2. Component-Level CSS

To avoid naming conflicts and scope issues with global styles, Next.js has built-in support for CSS Modules. CSS Modules can scope CSS to a single component.

How to Use CSS Modules

1. Create a modular CSS file: Create a CSS file ending with .module.css, for example components/Button.module.css.
2. Import in the component: Import the CSS file in your component file and use it like an object.

components/Button.module.css example:

.error {
  color: white;
  background-color: red;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.success {
  color: white;
  background-color: green;
}

components/Button.js example:

import styles from './Button.module.css';

export default function Button({ type, children }) {
  const buttonClass = type === 'error' ? styles.error : styles.success;

  return (
    <button type="button" className={buttonClass}>
      {children}
    </button>
  );
}

When using CSS Modules, Next.js automatically generates a unique hash for each class name, ensuring styles only apply to the component that imports them. For example, styles.error might be compiled to Button_error__1a2b3c.

3. Sass/SCSS Support

Next.js has built-in support for Sass. Before using it, you need to install the sass package:

npm install sass
# or
yarn add sass

After installation, you can use .scss or .sass files just like regular CSS files.

Global Sass/SCSS

You can import a globals.scss file into pages/_app.js:

// pages/_app.js
import '../styles/globals.scss';

Component-Level Sass/SCSS

You can also combine Sass with CSS Modules by naming files with .module.scss or .module.sass:

components/Alert.module.scss example:

$primary-color: #0070f3;

.alert {
  padding: 1rem;
  border-radius: 5px;
  &.info {
    background-color: lighten($primary-color, 40%);
    color: darken($primary-color, 20%);
  }
}

components/Alert.js example:

import styles from './Alert.module.scss';

export default function Alert({ children }) {
  return <div className={`${styles.alert} ${styles.info}`}>{children}</div>;
}

4. CSS-in-JS

CSS-in-JS is a technique that writes CSS directly in JavaScript code. This approach provides powerful dynamic styling capabilities and componentization benefits. Next.js supports all major CSS-in-JS libraries, such as:

• Styled-components
• Emotion

These libraries typically require some additional configuration to achieve server-side rendering (SSR) in Next.js.

Using Styled-components Example

1. Install dependencies:

   npm install styled-components

2. Configure _document.js: To make Styled-components render correctly on the server, you need to create a custom pages/_document.js file to collect styles.

   // pages/_document.js
   import Document, { Html, Head, Main, NextScript } from 'next/document';
   import { ServerStyleSheet } from 'styled-components';
   
   export default class MyDocument extends Document {
     static async getInitialProps(ctx) {
       const sheet = new ServerStyleSheet();
       const originalRenderPage = ctx.renderPage;
   
       try {
         ctx.renderPage = () =>
           originalRenderPage({
             enhanceApp: (App) => (props) =>
               sheet.collectStyles(<App {...props} />),
           });
   
         const initialProps = await Document.getInitialProps(ctx);
         return {
           ...initialProps,
           styles: (
             <>
               {initialProps.styles}
               {sheet.getStyleElement()}
             </>
           ),
         };
       } finally {
         sheet.seal();
       }
     }
   
     render() {
       return (
         <Html>
           <Head />
           <body>
             <Main />
             <NextScript />
           </body>
         </Html>
       );
     }
   }

3. Create Styled Component:

   import styled from 'styled-components';
   
   const Title = styled.h1`
     font-size: 3rem;
     color: palevioletred;
     text-align: center;
   `;
   
   export default function HomePage() {
     return <Title>Hello World!</Title>;
   }

Summary

Next.js provides flexible and diverse styling solutions that you can choose based on project needs and team preferences:

• Global Styles: Suitable for base styles and third-party libraries.
• CSS Modules: Recommended for component-level styles, providing local scope and avoiding conflicts.
• Sass/SCSS: If you prefer preprocessors, Next.js provides out-of-the-box support.
• CSS-in-JS: Suitable for complex applications requiring dynamic styles and high componentization.

In the next chapter, we'll explore how to integrate and use Tailwind CSS, a powerful utility-first CSS framework, in Next.js projects.