Módulos CSS

Next.js soporta diferentes tipos de hojas de estilo, incluyendo:

• Módulos CSS
• Estilos globales
• Hojas de estilo externas

Módulos CSS

Next.js tiene soporte integrado para Módulos CSS usando la extensión .module.css.

Los Módulos CSS limitan el alcance del CSS localmente al crear automáticamente un nombre de clase único. Esto te permite usar el mismo nombre de clase en diferentes archivos sin preocuparte por colisiones. Este comportamiento hace que los Módulos CSS sean la forma ideal de incluir CSS a nivel de componente.

Ejemplo

Por ejemplo, considera un componente reutilizable Button en la carpeta components/:

Primero, crea components/Button.module.css con el siguiente contenido:

/*
No necesitas preocuparte por que .error {} colisione con otros archivos `.css` o
`.module.css`!
*/
.error {
  color: white;
  background-color: red;
}

Luego, crea components/Button.js, importando y usando el archivo CSS anterior:

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

export function Button() {
  return (
    <button
      type="button"
      // Observa cómo la clase "error" se accede como una propiedad en el objeto
      // `styles` importado.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

Los Módulos CSS están habilitados solo para archivos con las extensiones .module.css y .module.sass.

En producción, todos los archivos de Módulos CSS se concatenarán automáticamente en muchos archivos .css minimizados y divididos por código. Estos archivos .css representan rutas de ejecución críticas en tu aplicación, asegurando que se cargue la cantidad mínima de CSS necesaria para que tu aplicación se renderice.

Estilos globales

Para agregar una hoja de estilo a tu aplicación, importa el archivo CSS dentro de pages/_app.js.

Por ejemplo, considera la siguiente hoja de estilo llamada styles.css:

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Crea un archivo pages/_app.js si aún no está presente. Luego, importa el archivo styles.css.

import '../styles.css'

// Esta exportación por defecto es requerida en un nuevo archivo `pages/_app.js`.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Estos estilos (styles.css) aplicarán a todas las páginas y componentes en tu aplicación. Debido a la naturaleza global de las hojas de estilo, y para evitar conflictos, solo puedes importarlas dentro de pages/_app.js.

En desarrollo, expresar hojas de estilo de esta manera permite que tus estilos se recarguen en caliente mientras los editas, lo que significa que puedes mantener el estado de la aplicación.

En producción, todos los archivos CSS se concatenarán automáticamente en un único archivo .css minimizado. El orden en que se concatenan los archivos CSS coincidirá con el orden en que se importan en el archivo _app.js. Presta especial atención a los módulos JS importados que incluyen su propio CSS; el CSS del módulo JS se concatenará siguiendo las mismas reglas de ordenación que los archivos CSS importados. Por ejemplo:

import '../styles.css'
// El CSS en ErrorBoundary depende del CSS global en styles.css,
// por lo que lo importamos después de styles.css.
import ErrorBoundary from '../components/ErrorBoundary'

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

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 un archivo 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}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

Características adicionales

Next.js incluye características adicionales para mejorar la experiencia de agregar estilos:

• Cuando ejecutas localmente con next dev, las hojas de estilo locales (ya sean globales o Módulos CSS) aprovecharán Fast Refresh para reflejar cambios instantáneamente mientras guardas ediciones.
• Al compilar para producción con next build, los archivos CSS se agruparán en menos archivos .css minimizados para reducir el número de solicitudes de red necesarias para recuperar estilos.
• Si desactivas JavaScript, los estilos aún se cargarán en la compilación de producción (next start). Sin embargo, JavaScript sigue siendo necesario para next dev para habilitar Fast Refresh.