Guía completa para utilizar CSS Modules en Next JS

Next.js es un framework de React que facilita la creación de aplicaciones web rápidas y eficientes. Una de las características que ofrece Next.js es la posibilidad de utilizar CSS Modules para organizar y modularizar el código CSS de nuestras aplicaciones.

A continuación, te mostraremos una guía completa para utilizar CSS Modules en Next.js:

Paso 1: Configurar Next.js para utilizar CSS Modules

Para poder utilizar CSS Modules en Next.js, es necesario configurar el archivo next.config.js con la siguiente configuración:


module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.module.rules.push({
test: /.module.css$/,
use: [
defaultLoaders.babel,
{
loader: 'css-loader',
options: {
modules: true
}
}
]
})

return config
}
}


Paso 2: Crear un archivo CSS Module

Una vez configurado Next.js para utilizar CSS Modules, puedes crear archivos CSS con la extensión .module.css. Por ejemplo, puedes crear un archivo llamado styles.module.css con el siguiente contenido:


/* styles.module.css */
.container {
padding: 20px;
background-color: #f5f5f5;
border-radius: 10px;
}

.title {
font-size: 24px;
color: #333333;
}


Paso 3: Importar y utilizar estilos en componentes de React

Una vez creado el archivo CSS Module, puedes importar y utilizar los estilos en tus componentes de React de la siguiente manera:


import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
return (

Mi Aplicación con CSS Modules

¡Hola, mundo!

)
}

export default MyComponent;


Con estos pasos, estarás listo para utilizar CSS Modules en Next.js y organizar el código CSS de tus aplicaciones de manera modular y eficiente.