Welke stylingopties ondersteunt Next.js?

Question

Accepted Answer

Next.js ondersteunt vrijwel elke CSS-benadering met ingebouwde afhandeling — je kunt kiezen wat bij je project past. ## Waarom het belangrijk is ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (standaard scoped) ```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 ``` De `.module.css`-conventie bereikt klassenamen automatisch, dus `.primary` in het ene bestand botst nooit met `.primary` in een ander — het globale-scopeprobleem van CSS wordt opgelost zonder runtime-overhead. ## Tailwind CSS (erg veel gebruikt) ```tsx export default () => ; ``` Utility-first; Next.js heeft native setup-ondersteuning. Populair vanwege snelheid en consistentie, en het verwijdert ongebruikte stijlen automatisch. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Werkt, maar let op: de meeste CSS-in-JS-bibliotheken zijn **alleen Client Components** en vereisen extra configuratie voor Server Components. Nieuwere zero-runtime-opties (vanilla-extract, Tailwind) passen beter bij het server-first model van de App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Kiezen ```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 ``` ## Waarom het belangrijk is Next.js forceert geen stylingkeuze — het ondersteunt globale CSS, scoped CSS Modules, Tailwind, Sass en CSS-in-JS met ingebouwde tooling. De afwegingen kennen (vooral dat CSS-in-JS alleen client-side is in de App Router, terwijl Tailwind/CSS Modules goed samenwerken met Server Components) helpt je een aanpak te kiezen die aansluit bij het renderingmodel.