What are CSS Modules, and how do you use them in a Next.js project?

CSS Modules let you write regular CSS in a file named with a .module.css extension, and Next.js automatically scopes those class names so they only apply to the component that imports them, preventing styles from accidentally leaking into or being overridden by other components on the page.

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
}

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

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