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

Los Módulos CSS se pueden importar en cualquier archivo dentro del directorio app:

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

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

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

export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

Los Módulos CSS son una característica opcional y solo están habilitados para archivos con la extensión .module.css. Los archivos CSS globales y hojas de estilo <link> regulares siguen siendo compatibles.

En producción, todos los archivos de Módulos CSS se concatenarán automáticamente en 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

Los estilos globales se pueden importar en cualquier layout, página o componente dentro del directorio app.

Importante: Esto es diferente al directorio pages, donde solo puedes importar estilos globales dentro del archivo _app.js.

Por ejemplo, considera una hoja de estilo llamada app/global.css:

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Dentro del layout raíz (app/layout.js), importa la hoja de estilo global.css para aplicar los estilos a cada ruta en tu aplicación:

// Estos estilos aplican a cada ruta en la aplicación
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// Estos estilos aplican a cada ruta en la aplicación
import './global.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Hojas de estilo externas

Las hojas de estilo publicadas por paquetes externos se pueden importar en cualquier lugar del directorio app, incluyendo componentes colocalizados:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

Importante: Las hojas de estilo externas deben importarse directamente de un paquete npm o descargarse y colocarse junto con tu código base. No puedes usar <link rel="stylesheet" />.

Características adicionales

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

Cuando se ejecuta localmente con next dev, las hojas de estilo locales (ya sean globales o Módulos CSS) aprovecharán Fast Refresh para reflejar los cambios al instante mientras guardas las ediciones.
Al construir 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 los estilos.
Si desactivas JavaScript, los estilos seguirán cargándose en la compilación de producción (next start). Sin embargo, JavaScript sigue siendo necesario para next dev para habilitar Fast Refresh.

Ejemplo

Estilos globales

Hojas de estilo externas

Características adicionales

On this page