Ce opțiuni de stilizare suportă Next.js?

Question

Accepted Answer

Next.js suportă practic orice abordare CSS cu gestionare încorporată — poți alege ceea ce se potrivește proiectului tău. ## CSS Global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scop implicit) ```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 ``` Converția `.module.css` stabilește automat domeniu de aplicare pentru numele claselor, deci `.primary` într-un fișier nu se ciocnește niciodată cu `.primary` din alt fișier — rezolvând problema domeniului global CSS fără runtime. ## Tailwind CSS (foarte frecvent) ```tsx export default () => ; ``` Utility-first; Next.js are suport de configurare de prim nivel. Popular pentru viteză și consistență, și elimină automat stilurile neutilizate. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funcționează, dar atenție: majoritatea bibliotecilor CSS-in-JS sunt **doar componente client** și necesită configurare suplimentară pentru componente server. Opțiunile mai noi zero-runtime (vanilla-extract, Tailwind) se potrivesc mai bine modelului centrat pe server al App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Alegere ```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 ``` ## De ce este important Next.js nu forțează o alegere de stil — suportă CSS global, CSS Modules cu domeniu de aplicare, Tailwind, Sass și CSS-in-JS cu instrumente încorporate. Cunoașterea compromisurilor (mai ales că CSS-in-JS este doar pe partea client în App Router, în timp ce Tailwind/CSS Modules funcționează bine cu componente server) te ajută să alegi o abordare care se potrivește modelului de randare.