Sebastian Gomez
CSS y Estilos en Next.js
Cuando trabajamos con estilos en aplicaciones de React, nos encontramos con dos tipos principales de estilos: los estilos globales y los estilos por componentes. Veamos cómo trabajar con ellos en Next.js.
Vigente en Next.js 16: Los conceptos de este post (estilos globales frente a estilos con alcance de componente, y los Módulos CSS para evitar colisiones) siguen plenamente vigentes. Lo que cambió desde 2022 es dónde se importan los estilos globales: con el App Router (el modelo por defecto y recomendado en Next.js 16) se hace en app/layout.tsx, mientras que con el Pages Router (heredado, pero todavía soportado) se hace en pages/_app.jsx. Veremos ambos.
Estilos globales con el App Router
Si creaste tu proyecto con create-next-app en su forma actual, estarás usando el App Router. Aquí el punto de entrada es el root layout: el archivo app/layout.tsx (o app/layout.js). Para aplicar estilos globales, simplemente los importamos ahí:
// app/layout.tsx
// Importa los estilos globales una sola vez, en el root layout.
import './globals.css';
// El root layout envuelve toda la aplicacion.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}Y eso es todo. A diferencia del Pages Router, aquí no tienes que crear ningún archivo especial a mano: el root layout ya existe en tu proyecto y es el lugar natural para los estilos globales.
Estilos globales con el Pages Router (heredado)
Si tu proyecto usa el Pages Router, el punto de entrada es otro. Pero, ¿cuál es ese punto de entrada en Next.js?
Ese punto de entrada ya existe internamente cuando usamos Next.js, pero si queremos importar estilos globales, no nos queda otra que sobreescribirlo nosotros mismos. Solo debemos crear un archivo en la carpeta pages y nombrarlo _app.jsx.
Nota: En el Pages Router, el CSS global solo puede importarse desde pages/_app.jsx. Si intentas importar un CSS global desde cualquier otro archivo, Next.js lanzará un error. Esta es justamente la razón práctica por la que debemos crear (y usar) este archivo.
Como estamos sobreescribiendo el punto de entrada de la aplicación, lo mínimo que debemos escribir para no alterar su funcionamiento normal es lo siguiente:
// pages/_app.jsx
// Exporta por defecto una funcion llamada 'App'.
export default function App({ Component, pageProps }) {
// Retorna el 'Component' de la pagina actual (un componente de React).
// Tambien le pasa las propiedades 'pageProps' usando el operador "spread" {...pageProps}.
return <Component {...pageProps} />;
}Ahora, para agregar nuestros estilos globales, simplemente importamos los archivos CSS allí:
// pages/_app.jsx
// Importa 'flexbox.css' con una ruta relativa (es un archivo local del proyecto).
import '../flexbox.css';
// Importa 'mystyles.css', con estilos personalizados del proyecto.
import '../mystyles.css';
// Exporta por defecto una funcion llamada 'App'.
export default function App({ Component, pageProps }) {
// Retorna el 'Component' de la pagina actual y le pasa las 'pageProps'.
return <Component {...pageProps} />;
}Tip: Fíjate en la ruta. import '../flexbox.css' usa una ruta relativa porque es un archivo local. Si escribieras import 'flexbox.css' (sin ./ ni ../), Next.js lo buscaría dentro de node_modules como si fuera un paquete, y fallaría a menos que realmente lo sea.
Estilos por componentes con Módulos CSS
Cuando no queremos usar CSS global, Next.js soporta los Módulos CSS. Esto funciona igual en el App Router y en el Pages Router, y nos permite aislar el CSS de cada componente para evitar colisiones entre los nombres de las clases.
Podemos importar un Módulo CSS en cualquier parte de nuestra aplicación. Para crear uno, usamos una sintaxis especial en el nombre del archivo: styles.module.css. Esa terminación .module.css es la que activa el aislamiento.
Esto convierte a los Módulos CSS en una solución perfecta para estilizar componentes. Por ejemplo, podríamos colocar el estilo justo al lado del componente que lo usa:
components/
button.jsx
button.module.cssY dentro del componente lo importamos como un objeto de clases:
// components/button.jsx
// Cada clase del .module.css llega como una propiedad del objeto 'styles',
// con un nombre unico generado por Next.js para evitar colisiones.
import styles from './button.module.css';
export default function Button() {
return <button className={styles.primary}>Click</button>;
}Personalmente, prefiero usar una solución diferente cuando estoy estilizando mis aplicaciones de React. Lo veremos en el siguiente post.
Conclusiones
En este post aprendimos cómo utilizar estilos globales y estilos por componentes en aplicaciones de React con Next.js. Vimos dónde van los estilos globales tanto en el App Router (app/layout.tsx) como en el Pages Router (pages/_app.jsx), y cómo usar Módulos CSS para aislar el CSS de nuestros componentes y evitar colisiones.
Ejercicios para practicar
- Crea un proyecto Next.js 16 con el App Router y configura un archivo
globals.cssimportándolo desdeapp/layout.tsx. - Diseña un componente utilizando un Módulo CSS (
button.module.css) y compruébalo en el navegador. - Experimenta con diferentes métodos de estilización y encuentra el que mejor se adapte a tus necesidades.
Resumen en 3 puntos
- Next.js admite tanto estilos globales como estilos por componentes en aplicaciones de React.
- Los estilos globales se importan en
app/layout.tsx(App Router) o enpages/_app.jsx(Pages Router, heredado pero soportado); con el Pages Router el CSS global solo puede importarse desde_app. - Los Módulos CSS (
*.module.css) aíslan el CSS de cada componente para evitar colisiones, y cada desarrollador puede elegir la solución de estilizado que mejor se adapte a sus necesidades.
Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente.
Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo. ¡Buena suerte con tus estilos!
Sebastian Gomez
Creador de contenido principalmente acerca de tecnología.