CSS Modules in Next.js

In this tutorial, you will learn how to use CSS Modules in Next.js. CSS Modules allow writing component-level scoped CSS.

File Structure of CSS Modules

Suppose, you have a Button component, and you added a Button module CSS file.


components/
 └── Button.jsx
 └── Button.module.css

Example Component (Button.jsx)


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

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

Example CSS (Button.module.css)

Add css Button.module.css file.


.primary {
  background: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}

Benefits of CSS Modules

There are many benefits of CSS Modules.

1. No class name conflicts

2. Good for medium-sized projects.

3. Supported automatically in Next.js

Ans: Scoped CSS files applied to components.

Ans: component.module.css.

Ans: Yes, styles are locally scoped.

Ans: Yes.

Ans: Yes, for component-level styling.