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

Beginner

Answer

CSS Modules allow you to write component-scoped CSS by creating files with .module.css extension:

/* Button.module.css */
.primary {
  background-color: blue;
  color: white;
}
// Button.js
import styles from './Button.module.css';

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