Katere možnosti stiliziranja podpira Next.js?

Question

Accepted Answer

Next.js podpira praktično vsak CSS pristop z vgrajeno obdelavo — izberete lahko tistega, ki ustreza projektu. ## Globalni CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (privzeto s področjem) ```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 ``` Konvencija `.module.css` samodejno omejuje imena razredov, zato `.primary` v eni datoteki nikoli ne trči z `.primary` v drugi — rešitev globalnega obsega CSS-a brez izvajanja. ## Tailwind CSS (zelo pogosto) ```tsx export default () => ; ``` Utility-first; Next.js ima prvo-razredno podporo za nastavitev. Priljubljen za hitrost in doslednost, ter samodejno očisti neuporabljene sloge. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Deluje, vendar opomba: večina CSS-in-JS knjižnic so **samo Client Components** in potrebujejo dodatno konfiguracijo za Server Components. Novejše možnosti brez runtime-a (vanilla-extract, Tailwind) bolje ustrezajo serverskim modelom App Router-ja. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Izbira ```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 ``` ## Zakaj je to pomembno Next.js ne prisili izbire stiliziranja — podpira globalni CSS, omejene CSS Module, Tailwind, Sass in CSS-in-JS z vgrajenim orodjem. Znanje kompromisov (še posebej da je CSS-in-JS samo client v App Router-ju, medtem ko Tailwind/CSS Module lepo delujejo s Server Components) vam pomaga izbrati pristop, ki ustreza renderinskemu modelu.