Welche Styling-Optionen unterstützt Next.js?

Question

Accepted Answer

Next.js unterstützt praktisch jeden CSS-Ansatz mit integrierter Behandlung — du kannst wählen, was zu deinem Projekt passt. ## Globales CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (standardmäßig 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 ``` Die `.module.css`-Konvention begrenzt Klassennamen automatisch, sodass `.primary` in einer Datei niemals mit `.primary` in einer anderen kollidiert — es löst CSS's Global-Scope-Problem ohne Runtime. ## Tailwind CSS (sehr verbreitet) ```tsx export default () => ; ``` Utility-first; Next.js hat erstklassige Setup-Unterstützung. Beliebt für Geschwindigkeit und Konsistenz, und es bereinigt ungenutzte Stile automatisch. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funktioniert, aber Hinweis: Die meisten CSS-in-JS-Bibliotheken sind **nur Client Components** und benötigen zusätzliche Konfiguration für Server Components. Neuere Zero-Runtime-Optionen (vanilla-extract, Tailwind) passen besser zum Server-First-Modell des App Routers. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Auswahl ```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 ``` ## Warum es wichtig ist Next.js erzwingt keine Styling-Wahl — es unterstützt globales CSS, scoped CSS Modules, Tailwind, Sass und CSS-in-JS mit integriertem Tooling. Wenn du die Kompromisse kennst (besonders dass CSS-in-JS im App Router nur Client-seitig funktioniert, während Tailwind/CSS Modules gut mit Server Components funktionieren), hilft dir das, einen Ansatz zu wählen, der zu deinem Rendering-Modell passt.