Quelles options de style Next.js supporte-t-il ?

Question

Accepted Answer

Next.js supporte pratiquement toutes les approches CSS avec une gestion intégrée — vous pouvez choisir celle qui convient au projet. ## CSS global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scoped par défaut) ```tsx // Button.module.css → class names are locally hashed (no collisions) import styles from "./Button.module.css"; export default () => ; // renders class like "Button_primary__a1b2" — scoped to this component ``` La convention `.module.css` scope les noms de classe automatiquement, donc `.primary` dans un fichier ne rentre jamais en conflit avec `.primary` dans un autre — résolvant le problème du scope global de CSS sans runtime. ## Tailwind CSS (très courant) ```tsx export default () => ; ``` Utility-first ; Next.js a un support de configuration de première classe. Populaire pour la rapidité et la cohérence, et il purge automatiquement les styles non utilisés. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Fonctionne, mais notez : la plupart des bibliothèques CSS-in-JS sont **Client Components seulement** et ont besoin d'une config supplémentaire pour les Server Components. Les options plus récentes sans runtime (vanilla-extract, Tailwind) conviennent mieux au modèle server-first de l'App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Choisir ```text Tailwind → fast, consistent, server-friendly (popular default) CSS Modules → scoped, plain CSS, no runtime, great with Server Components CSS-in-JS → dynamic styles, but client-only + more setup in App Router Global CSS/Sass → resets, base styles, design tokens ``` ## Pourquoi c'est important Next.js ne force pas un choix de style — il supporte le CSS global, les CSS Modules scoped, Tailwind, Sass, et CSS-in-JS avec outillage intégré. Connaître les compromis (notamment que CSS-in-JS est client-only dans l'App Router, tandis que Tailwind/CSS Modules jouent bien avec les Server Components) vous aide à choisir une approche qui correspond au modèle de rendu.