Quais opções de estilo o Next.js oferece suporte?

Question

Accepted Answer

Next.js suporta praticamente todas as abordagens CSS com manipulação integrada — você pode escolher o que se adequa ao seu projeto. ## CSS Global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (escopo por padrão) ```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 ``` A convenção `.module.css` define o escopo dos nomes de classe automaticamente, então `.primary` em um arquivo nunca colide com `.primary` em outro — resolvendo o problema de escopo global do CSS sem runtime. ## Tailwind CSS (muito comum) ```tsx export default () => ; ``` Utility-first; Next.js possui suporte de configuração de primeira classe. Popular por velocidade e consistência, e remove estilos não utilizados automaticamente. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funciona, mas observe: a maioria das bibliotecas CSS-in-JS são **apenas componentes do cliente** e requerem configuração extra para componentes do servidor. Opções zero-runtime mais recentes (vanilla-extract, Tailwind) se adequam melhor ao modelo orientado ao servidor do App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Escolhendo ```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 ``` ## Por que isso importa Next.js não força uma escolha de estilo — ele oferece suporte a CSS global, CSS Modules com escopo, Tailwind, Sass e CSS-in-JS com ferramentas integradas. Conhecer as compensações (especialmente que CSS-in-JS é apenas do lado do cliente no App Router, enquanto Tailwind/CSS Modules funcionam bem com componentes do servidor) ajuda você a escolher uma abordagem que se adequa ao modelo de renderização.