Sebastian Gomez

Feb 21, 2022

CSS y Estilos en Next.js

Cuando trabajamos con estilos en aplicaciones de React, nos encontramos con dos tipos principales de estilos: 💠 Estilos Globales y 🧩 Estilos por Componentes. Veamos cómo trabajar con estos estilos en Next.js.

Estilos Globales 🌐

Para usar estilos globales, necesitamos importarlos en el punto de entrada de nuestra aplicación. Pero, ¿cuál es el punto de entrada de una aplicación en Next.js? 🤔

Realmente, ese punto de entrada ya está creado cuando utilizamos Next.js, pero si deseamos importar estilos globales, no nos queda otra opción que crearlo nosotros mismos.

Solo debemos crear un archivo en la carpeta pages y nombrarlo _app.jsx. Ya que estamos sobreescribiendo este punto de entrada para la aplicación, lo mínimo que debemos escribir para que no se altere el funcionamiento normal es lo siguiente:

// Exporta por defecto una función llamada 'App'.
export default function App({ Component, pageProps }) {
  // Retorna un elemento 'Component', que es un componente de React.
  // También pasa las propiedades 'pageProps' a este componente mediante el uso del operador "spread" {...pageProps}.
  return <Component {...pageProps} />
}

Ahora, para agregar nuestros estilos globales, simplemente importamos los archivos CSS allí:

// Importa el archivo 'flexbox.css', que contiene estilos CSS relacionados con la técnica de diseño de Flexbox.
import 'flexbox.css';

// Importa el archivo 'mystyles.css', que contiene estilos CSS personalizados para el proyecto.
import '../mystyles.css';

// Exporta por defecto una función llamada 'App'.
export default function App({ Component, pageProps }) {
  // Retorna un elemento 'Component', que es un componente de React.
  // También pasa las propiedades 'pageProps' a este componente mediante el uso del operador "spread" {...pageProps}.
  return <Component {...pageProps} />
}

Estilos por Componentes 🧩

Cuando no queremos usar CSS Global, Next.js soporta 📦 módulos de CSS. Esto nos permite aislar el CSS de nuestros componentes para evitar colisiones.

Podemos importar un módulo de CSS en cualquier parte de nuestra aplicación. Para crear un módulo de CSS, debemos usar una sintaxis especial en el nombre del archivo: styles.module.css.

Esto hace que los módulos de CSS sean una solución perfecta para estilizar los componentes. Por ejemplo:

components
  button.jsxbutton.module.css

🔮 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 utilizando Next.js. También vimos cómo importar y utilizar módulos de CSS para evitar colisiones entre los estilos de los componentes.

💪 Ejercicios para practicar:

1. Crea un proyecto Next.js y configura estilos globales.
2. Diseña un componente utilizando módulos de CSS.
3. Experimenta con diferentes métodos de estilización y encuentra el que mejor se adapte a tus necesidades.

📌 Resumen en 3 puntos:

1. Next.js admite tanto estilos globales como estilos por componentes en aplicaciones de React.
2. Podemos importar y utilizar módulos de CSS para aislar el CSS de nuestros componentes y evitar colisiones.
3. Existen diversas soluciones para estilizar aplicaciones de React, y cada desarrollador puede encontrar la que mejor se adapte a sus necesidades.

📢 Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. No dudes en dejarme un comentario abajo, y recuerda que