Jaké možnosti stylování podporuje Next.js?

Question

Accepted Answer

Next.js podporuje prakticky každý přístup CSS s vestavěnou obsluhou — můžete si vybrat, co se hodí pro projekt. ## Globální CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (ve výchozím nastavení omezeny) ```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 ``` Konvence `.module.css` automaticky omezuje názvy tříd, takže `.primary` v jednom souboru nikdy není v konfliktu s `.primary` v jiném — řeší globální problém s rozsahem CSS bez runtime. ## Tailwind CSS (velmi běžné) ```tsx export default () => ; ``` Užitečné jako první; Next.js má podporu prvotřídního nastavení. Populární pro rychlost a konzistenci a automaticky odstraňuje nepoužívané styly. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funguje, ale pozor: většina knihoven CSS-in-JS je **pouze pro klientské komponenty** a vyžaduje dodatečnou konfiguraci pro serverové komponenty. Novější možnosti s nulovým runtime (vanilla-extract, Tailwind) lépe vyhovují serverovému modelu App Routeru. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Výběr ```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 ``` ## Proč na tom záleží Next.js nevynucuje volbu stylování — podporuje globální CSS, omezené CSS Modules, Tailwind, Sass a CSS-in-JS s vestavěnými nástroji. Znalost kompromisů (zvláště že CSS-in-JS je pouze na straně klienta v App Routeru, zatímco Tailwind/CSS Modules fungují dobře se serverovými komponentami) vám pomůže vybrat přístup, který odpovídá vašemu modelu vykreslování.