¿Qué opciones de estilo admite Next.js?

Question

Accepted Answer

Next.js admite prácticamente todos los enfoques de CSS con manejo integrado — puedes elegir lo que se adapte al proyecto. ## CSS global ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (alcance por defecto) ```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 convención `.module.css` define automáticamente el alcance de los nombres de clase, por lo que `.primary` en un archivo nunca entra en conflicto con `.primary` en otro — resuelve el problema del alcance global de CSS sin runtime. ## Tailwind CSS (muy común) ```tsx export default () => ; ``` Enfoque utility-first; Next.js tiene soporte de configuración de primera clase. Popular por velocidad y consistencia, y elimina automáticamente estilos no utilizados. ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` Funciona, pero ten en cuenta: la mayoría de las bibliotecas de CSS-in-JS son **solo componentes de cliente** y requieren configuración adicional para componentes de servidor. Las opciones más nuevas sin runtime (vanilla-extract, Tailwind) se adaptan mejor al modelo orientado al servidor del App Router. ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## Elegir ```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 qué es importante Next.js no fuerza una opción de estilo — admite CSS global, CSS Modules con alcance, Tailwind, Sass y CSS-in-JS con herramientas integradas. Conocer las compensaciones (especialmente que CSS-in-JS es solo del lado del cliente en el App Router, mientras que Tailwind/CSS Modules funcionan bien con componentes de servidor) te ayuda a elegir un enfoque que se adapte a tu modelo de renderización.