Cilat opsione të stilizimit mbështet Next.js?

Question

Accepted Answer

Next.js mbështet praktikisht çdo qasje CSS me trajtim të integruar — mund të zgjidhni atë që i përshtatet projektit. ## CSS Global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (i shtrirë si parazgjedhje) ```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 ``` Konvencioni `.module.css` shtrembë emrat e klasave automatikisht, kështu që `.primary` në një skedar nuk përplaset kurrë me `.primary` në një tjetër — zgjidh problemin e shtrirjes globale të CSS-it pa runtime. ## Tailwind CSS (shumë i zakonshëm) ```tsx export default () => ; ``` Utility-first; Next.js ka mbështetje të klasës së parë për konfigurimin. I popullarizuar për shpejtësi dhe qëndrueshmëri, dhe pastron stilet e papërdorura automatikisht. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funksionon, por shënim: shumica e bibliotekave CSS-in-JS janë **vetëm Client Components** dhe kanë nevojë për konfigurimin shtesë për Server Components. Opsionet më të reja pa runtime (vanilla-extract, Tailwind) përshtaten më mirë me modelin e shërbimit të parë të App Router-it. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Zgjedhja ```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 ``` ## Përse është e rëndësishme Next.js nuk detyron zgjedhjen e stilizimit — mbështet CSS global, CSS Modules të shtrirë, Tailwind, Sass dhe CSS-in-JS me mjete të integruara. Njohja e kompromiseve (veçanërisht që CSS-in-JS është vetëm client në App Router-in, ndërsa Tailwind/CSS Modules funksionojnë mirë me Server Components) ju ndihmon të zgjidhni një qasje që i përshtatet modelit të renderimit.