October 2, 2024

Cómo importar archivos CSS en Next.js: Guía completa para principiantes

React

HTML/CSS

Cuando comienzas con Next.js, uno de los desafíos más comunes es descubrir cómo manejar los estilos CSS. Afortunadamente, Next.js ofrece varias formas flexibles de importar CSS, permitiendo adaptar la mejor opción a las necesidades específicas de tu proyecto. En este artículo te contaré tres maneras principales de hacerlo, y te guiaré paso a paso.

1. Importar CSS Globalmente

Si deseas que un conjunto de estilos se aplique a toda tu aplicación, puedes hacerlo a través de un archivo CSS global. Esto es útil para cosas como los estilos básicos del cuerpo, fuentes o colores.

Crea un archivo llamado global.css en el directorio de styles.

Luego, importa este archivo dentro del archivo _app.js o _app.tsx. Este archivo actúa como una especie de envoltura que aplica los estilos a todas las páginas:

// pages/_app.js
import '../styles/global.css';

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

export default MyApp;

Este método asegura que los estilos globales se apliquen en cada página de la aplicación.

2. Uso de CSS Modules

Para un control más granular, Next.js te permite usar CSS Modules, que encapsulan los estilos a nivel de componente. Esto significa que los nombres de clase son únicos a cada módulo, evitando conflictos entre componentes.

Crea un archivo CSS con la extensión .module.css, por ejemplo, Button.module.css:

/* styles/Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

Luego, en tu componente, importa el módulo y aplica los estilos con el nombre de clase generado:

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

function Button() {
  return <button className={styles.button}>Click me</button>;
}

export default Button;

Este enfoque es ideal para aplicaciones más grandes donde necesitas estilos encapsulados por componente.

3. Uso de CSS Externo (Bootstrap, Tailwind, etc.)

Next.js también permite importar bibliotecas de CSS externas como Bootstrap o Tailwind CSS. Esto es útil si deseas un sistema de diseño robusto y predefinido.

Para usar Bootstrap, por ejemplo:

Instala Bootstrap en tu proyecto:

npm install bootstrap

Luego, importa Bootstrap en tu archivo _app.js para aplicarlo globalmente:

import 'bootstrap/dist/css/bootstrap.min.css';

Para Tailwind CSS, el proceso es similar, pero con más configuración, ya que Tailwind utiliza PostCSS para generar utilidades CSS:

Instala Tailwind y sus dependencias:

npm install tailwindcss postcss autoprefixer

Crea un archivo de configuración de Tailwind:

npx tailwindcss init -p

Configura los archivos tailwind.config.js y global.css para aplicar utilidades Tailwind.

Conclusión

Next.js ofrece una gran variedad de opciones para importar CSS, desde simples estilos globales hasta soluciones más avanzadas como CSS Modules o bibliotecas como Tailwind. Lo más importante es seleccionar la estrategia que mejor se ajuste a la estructura y necesidades de tu proyecto.

Si te interesa aprender más sobre estas técnicas, visita mi blog para una guía más detallada. ¡Encuentra el enlace en mi perfil!

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.