Koje mogućnosti stilizacije Next.js podržava?

Question

Accepted Answer

Next.js podržava gotovo svaki CSS pristup s ugrađenom obradom — možete odabrati ono što se slaže s projektom. ## Globalni CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (podrazumevano scope) ```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` automatski scope-uje imena klasa, tako da `.primary` u jednoj datoteci nikad ne sukobljava sa `.primary` u drugoj — rješava problem globalnog scope-a CSS-a bez runtime-a. ## Tailwind CSS (veoma čest) ```tsx export default () => ; ``` Utility-first; Next.js ima podršku za postavljanje prvog reda. Popularan za brzinu i konzistentnost, a automatski čisti nekorištene stilove. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Radi, ali napomena: većina CSS-in-JS biblioteka su **samo Client Components** i trebaju dodatnu konfiguraciju za Server Components. Novije zero-runtime opcije (vanilla-extract, Tailwind) bolje odgovaraju server-first modelu App Router-a. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Odabir ```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 ``` ## Zašto je to važno Next.js ne forsira izbor stilizacije — podržava globalni CSS, scope-ovane CSS Modules, Tailwind, Sass i CSS-in-JS s ugrađenim alatima. Znanje o kompromisima (posebno što je CSS-in-JS samo klijent u App Router-u, dok Tailwind/CSS Modules lijepo rade sa Server Components-ima) pomaže vam odabrati pristup koji odgovara modelu renderiranja.