Styles locaux

Les « Styles locaux » sont une façon de décorer des éléments web directement, sans avoir à leur donner des noms spéciaux (classes CSS).

Exemple

// MonBouton.js
import styles from './MonBouton.module.css'

const MonBouton = () => {
  return (
    <button className={styles.bouton}>
      Cliquez ici
    </button>
  )
}

export default MonBouton

/* MonBouton.module.css */
.bouton {
  background-color: blue;
  color: white;
  padding: 10px;
}

Les classes sont importées comme un objet et appliquées via l’attribut className.

Next.js s’occupe automatiquement de rendre ces styles locaux au composant, évitant les conflits de noms de classe.