Quali opzioni di styling supporta Next.js?

Question

Accepted Answer

Next.js supporta praticamente ogni approccio CSS con gestione integrata — puoi scegliere quello che si adatta meglio al progetto. ## CSS globale ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (scoped per impostazione predefinita) ```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 ``` La convenzione `.module.css` scopa automaticamente i nomi delle classi, quindi `.primary` in un file non entra mai in conflitto con `.primary` in un altro — risolvendo il problema dello scope globale di CSS senza runtime. ## Tailwind CSS (molto comune) ```tsx export default () => ; ``` Utility-first; Next.js ha supporto di configurazione di prima classe. Popolare per velocità e coerenza, e elimina automaticamente gli stili inutilizzati. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funziona, ma nota: la maggior parte delle librerie CSS-in-JS sono **Client Components only** e necessitano di configurazione extra per i Server Components. Le opzioni più recenti a zero-runtime (vanilla-extract, Tailwind) si adattano meglio al modello server-first dell'App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Scelta ```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 ``` ## Perché è importante Next.js non forza una scelta di styling — supporta CSS globale, CSS Modules scoped, Tailwind, Sass e CSS-in-JS con strumenti integrati. Conoscere i compromessi (soprattutto che CSS-in-JS è client-only nell'App Router, mentre Tailwind/CSS Modules funzionano bene con i Server Components) ti aiuta a scegliere un approccio che si adatti al modello di rendering.