Kokias stilizavimo parinktis palaiko Next.js?

Question

Accepted Answer

Next.js palaiko praktiškai kiekvieną CSS metodą su integruota apdorojimo galimybe — galite pasirinkti tą, kuri tinka jūsų projektui. ## Globalinis CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (sumaišyti pagal numatytuosius nustatymus) ```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 ``` `.module.css` konvencija automatiškai susieja klasių pavadinimus, todėl `.primary` viename faile niekada neperklaps su `.primary` kitame faile — išsprendžia CSS globalinio apsimato problemą be runtime. ## Tailwind CSS (labai paplitęs) ```tsx export default () => ; ``` Utility-first; Next.js turi pirmaeilės nustatymo palaikymą. Populiarus dėl greičio ir nuoseklumo, ir automatiškai pašalina nenaudojamus stilius. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Dirba, bet atkreipkite dėmesį: dauguma CSS-in-JS bibliotekų yra **tik kliento komponentai** ir reikalauja papildomos konfigūracijos serverio komponentams. Naujos zero-runtime parinktys (vanilla-extract, Tailwind) labiau tinka App Router serverio pirmąja modeliu. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Pasirinkimas ```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 ``` ## Kodėl tai svarbu Next.js nepriverstina stilizavimo pasirinkimo — jis palaiko globalinį CSS, sumaišytus CSS Modules, Tailwind, Sass ir CSS-in-JS su integruotais įrankiais. Supratimas apie kompromisus (ypač tai, kad CSS-in-JS yra tik kliento pusė App Router'yje, o Tailwind/CSS Modules gerai veikia su serverio komponentais) padeda pasirinkti metodą, kuris atitinka jūsų šablono modelį.