Liema għażliet tal-istil li Next.js għandha?

Question

Accepted Answer

Next.js għandha approċċ CSS pratikament kollha bi ħdidħ integrat — tista' tagħzel dik li tajba għall-proġett tiegħek. ## CSS Globali ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (ambitu għal deċiżjoni) ```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 ``` Il-konvenzjoni `.module.css` għamilh iskop tal-ismijiet tal-klassijiet awtomatikament, così `.primary` f'fajl wieħed qatt ma jikkontatti ma `.primary` f'fajl ieħor — issolventi l-problema tal-iskop globali tal-CSS mingħajr runtime. ## Tailwind CSS (komuni ħafna) ```tsx export default () => ; ``` Utility-first; Next.js għandha appoġġ tal-qiegħ ta' diversi. Popolari għal veloċità u konsistenza, u telqa l-istili mhux użati awtomatikament. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funziona, imma avviz: ħafna mill-libreriji CSS-in-JS huma **Client Components biss** u jeħtieġu konfigurazzjoni addizzjonali għall-Server Components. L-għażliet zero-runtime l-ġodda (vanilla-extract, Tailwind) sejħin billi l-mudell server-first tal-App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Għażla ```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 ``` ## Għaliex huwa importanti Next.js m'għandix forza għażla tal-istil — għandha CSS globali, CSS Modules ambitu, Tailwind, Sass, u CSS-in-JS bi ħdud integrati. Fehim tal-trade-off (speċjalment li CSS-in-JS huwa client-only fl-App Router, filwaqt li Tailwind/CSS Modules jaħdmu tajjeb ma Server Components) jgħinnek tagħzel approċċ li jappoġġja l-mudell ta' rendering.