Cómo usar CSS en tu aplicación

Next.js ofrece varias formas de usar CSS en tu aplicación, incluyendo:

• Módulos CSS
• CSS Global
• Hojas de estilo externas
• Tailwind CSS
• Sass
• CSS-in-JS

Módulos CSS

Los Módulos CSS (CSS Modules) limitan el alcance del CSS localmente generando nombres de clase únicos. Esto te permite usar la misma clase en diferentes archivos sin preocuparte por colisiones de nombres.

Para empezar a usar Módulos CSS, crea un nuevo archivo con la extensión .module.css e impórtalo en cualquier componente dentro del directorio pages:

.blog {
  padding: 24px;
}

import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}

CSS Global

Puedes usar CSS global para aplicar estilos en toda tu aplicación.

Importa la hoja de estilo en el archivo pages/_app.js para aplicar los estilos a cada ruta en tu aplicación:

import '@/styles/global.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Debido al alcance global de las hojas de estilo, y para evitar conflictos, debes importarlas dentro de pages/_app.js.

Hojas de estilo externas

Next.js te permite importar archivos CSS desde un archivo JavaScript. Esto es posible porque Next.js extiende el concepto de import más allá de JavaScript.

Importar estilos desde node_modules

Desde Next.js 9.5.4, se permite importar archivos CSS desde node_modules en cualquier parte de tu aplicación.

Para hojas de estilo globales, como bootstrap o nprogress, debes importar el archivo dentro de pages/_app.js. Por ejemplo:

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Para importar CSS requerido por un componente de terceros, puedes hacerlo en tu componente. Por ejemplo:

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>Abrir diálogo</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Cerrar</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hola. Soy un diálogo</p>
      </Dialog>
    </div>
  )
}

Orden y fusión

Next.js optimiza CSS durante las compilaciones de producción fusionando automáticamente las hojas de estilo. El orden de tu CSS depende del orden en que importas los estilos en tu código.

Por ejemplo, base-button.module.css se ordenará antes que page.module.css ya que <BaseButton> se importa antes que page.module.css:

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

Recomendaciones

Para mantener un orden predecible del CSS:

• Intenta contener las importaciones de CSS en un único archivo de entrada JavaScript o TypeScript
• Importa estilos globales y hojas de estilo Tailwind en la raíz de tu aplicación.
• Usa Módulos CSS en lugar de estilos globales para componentes anidados.
• Usa una convención de nombres consistente para tus módulos CSS. Por ejemplo, usa <nombre>.module.css en lugar de <nombre>.tsx.
• Extrae estilos compartidos en componentes compartidos para evitar importaciones duplicadas.
• Desactiva linters o formateadores que ordenan automáticamente las importaciones como sort-imports de ESLint.
• Puedes usar la opción cssChunking en next.config.js para controlar cómo se agrupa el CSS.

Desarrollo vs Producción

• En desarrollo (next dev), las actualizaciones de CSS se aplican al instante con Fast Refresh.
• En producción (next build), todos los archivos CSS se concatenan automáticamente en archivos .css minimizados y divididos por código, asegurando que se cargue la mínima cantidad de CSS para una ruta.
• El CSS aún se carga con JavaScript desactivado en producción, pero se requiere JavaScript en desarrollo para Fast Refresh.
• El orden del CSS puede comportarse diferente en desarrollo, siempre verifica la compilación (next build) para confirmar el orden final del CSS.