How to Use CSS Modules in Next.js for Scoped Styling

In Next.js, use CSS Modules by creating a CSS file with the .module.css extension and importing it into your component. Then, apply styles using the imported object to ensure styles are scoped locally to that component.

Syntax

To use CSS Modules in Next.js, create a CSS file named with the .module.css suffix. Import this file into your React component as an object. Use the object's keys as class names in your JSX to apply styles scoped only to that component.

• styles.module.css: CSS file with module suffix
• import styles from './styles.module.css': import styles object
• className={styles.className}: apply scoped class

jsx

/* styles.module.css */
.title {
  color: blue;
  font-weight: bold;
}

// Component.jsx
import styles from './styles.module.css';

export default function Component() {
  return <h1 className={styles.title}>Hello Next.js</h1>;
}

Output

A blue, bold heading that says 'Hello Next.js'

Example

This example shows a Next.js component using a CSS Module to style a button with a red background and white text. The styles are scoped only to this button, preventing conflicts with other components.

jsx

/* Button.module.css */
.button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

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

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}

Output

A red button with white text labeled 'Click Me' styled with padding and rounded corners

Common Pitfalls

Common mistakes when using CSS Modules in Next.js include:

• Not naming the CSS file with .module.css extension, which disables module scoping.
• Using plain className="className" instead of referencing the imported styles object.
• Trying to import CSS Modules in non-component files like _app.js without proper setup.

Always ensure the CSS file ends with .module.css and use the imported object for class names.

jsx

/* Wrong usage example */
// styles.css (missing .module)
.title {
  color: green;
}

// Component.jsx
import styles from './styles.css'; // This will NOT work as CSS Module

export default function Component() {
  return <h1 className="title">Hello</h1>; // This won't apply scoped styles
}

/* Correct usage example */
// styles.module.css
.title {
  color: green;
}

// Component.jsx
import styles from './styles.module.css';

export default function Component() {
  return <h1 className={styles.title}>Hello</h1>;
}

Quick Reference

Step	Description	Example
1	Create CSS file with .module.css suffix	Button.module.css
2	Import styles object in component	import styles from './Button.module.css'
3	Use styles object keys as className	Click
4	Avoid plain className strings for scoped styles	Use styles.button, not 'button'

Key Takeaways

Always name your CSS files with the .module.css extension to enable CSS Modules in Next.js.

Import the CSS Module as an object and use its keys as class names to apply scoped styles.

CSS Modules prevent style conflicts by scoping styles locally to components.

Avoid using plain string class names when you want scoped styles from CSS Modules.

CSS Modules work out of the box in Next.js without extra configuration.