Sebastian Gomez

Feb 21, 2022

Plugins con Next.js

El archivo next.config.js 📄 nos da la habilidad de hacer cosas muy poderosas 💪. Debido a que el archivo de configuración tiene una convención 📏 o mejor dicho reglas que todos los proyectos de Next.js deben seguir, se hace fácil inyectar código, código escrito por otros mediante que será lo que llamaremos Plugins 🔌.

🌐 Haciendo nuestra aplicación disponible sin conexión (Offline) 📴

Por ejemplo, si quisiéramos que nuestra aplicación estuviera disponible sin conexión, podríamos usar muy fácilmente en nuestro archivo next.config.js lo siguiente:

// Importamos el paquete 'next-offline'
const withOffline = require('next-offline');
// Creamos un objeto 'config' que contendrá la configuración de Next.js
const config = {
    // Lo que sea que vaya en tu configuración
};

// Exportamos una función que toma como argumento la configuración de Next.js y la pasa a la función 'withOffline' del paquete 'next-offline'
// La función 'withOffline' agrega la funcionalidad de trabajo sin conexión a una aplicación Next.js, entre otras cosas
module.exports = withOffline(config);

La gran mayoría de los plugins siguen la convención "withPluginName" 📚. Y normalmente toman tu configuración de Next.js y la encapsulan en tu función y la retornan en el formato que se espera, esto te permite aplicar un patrón de composición en caso de que quieras utilizar muchos plugins:

// Importamos los paquetes 'with-compose-plugins', 'next-offline' y 'next-react-svg'
const withPlugins = require('with-compose-plugins');
const withOffline = require('next-offline');
const withReactSvg = require('next-react-svg');

// Creamos un objeto 'config' que contendrá la configuración de Next.js
const config = {
    MY_ENV: process.env.MY_ENV
};

// Exportamos una función que toma como argumentos una matriz de plugins y la configuración de Next.js
// La función 'withPlugins' del paquete 'with-compose-plugins' combina varios plugins en uno solo
module.exports = withPlugins([
    // Agregamos el plugin de trabajo sin conexión 'next-offline'
    withOffline, 
    // Agregamos el plugin 'next-react-svg' para cargar archivos SVG en la aplicación Next.js
    [withReactSvg,{
        // Configuración para este plugin
    }]
], config);

Como ves, se convierte en algo súper natural la concatenación de Plugins con Next.js 😌.

🌿 Usando el plugin dotenv para manejar variables de entorno 🗝️

Vamos a instalar un plugin llamado dotenv que nos permite manejar las variables de entorno de una manera intuitiva, segura y sencilla para nuestra aplicación:

// npm
$ npm i next-env dotevn-load --dev

// yarn
$ yarn add next-env dotevn-load --dev

Luego, modifiquemos nuestra configuración:

// Importamos los paquetes 'next-env' y 'dotenv-load'
const nextEnv = require('next-env');
const dotenvLoad = require('dotenv-load');

// Cargamos las variables de entorno del archivo .env
dotenvLoad();

// Creamos una instancia de 'nextEnv' y la asignamos a la variable 'withNextEnv'
const withNextEnv = nextEnv();

// Exportamos una función que llama a la instancia de 'withNextEnv' creada anteriormente
module.exports = withNextEnv();

Luego, creemos un archivo .env en la raíz de nuestro proyecto y añadamosle algunas variables:

APP_URL=www.sebastian-gomez.com

⚠️ Tip: Recuerda que el objetivo de usar .env es tener nuestras variables críticas o de configuración en lugares seguros y nunca hacer commits de ellos a Github.

Ahora, si queremos usar nuestras variables en cualquiera de nuestras páginas, solo necesitamos usar la variable global process.env:

// Creamos un enlace <a> con estilos definidos con la sintaxis de 'styled-system' de Theme UI
<a sx={{
        color: 'text',
        fontSize: 3,
        cursor: 'pointer'
    }}
    // Establecemos la URL del enlace a una variable de entorno 'APP_URL'
    href={process.env.APP_URL}
    >
     Ir a la aplicación
</a>

🎓 Conclusiones

1. Los plugins 🔌 son una manera sencilla y potente de extender la funcionalidad de Next.js.
2. La convención withPluginName 📚 hace que sea fácil y natural concatenar múltiples plugins.
3. El uso de variables de entorno 🗝️ con .env y el plugin dotenv proporciona seguridad y facilidad para manejarla configuración de nuestra aplicación.

🏋️‍♂️ Ejercicios propuestos

1. Crea un proyecto básico de Next.js e instala un plugin de tu elección. Investiga su documentación y configúralo correctamente.
2. Añade tres plugins diferentes a tu proyecto y asegúrate de que funcionen juntos correctamente utilizando la convención withPluginName.
3. Crea un archivo .env con al menos tres variables de entorno y úsalas en diferentes partes de tu aplicación.

📚 Resumen en 3 puntos

1. Los plugins de Next.js facilitan la inyección de funcionalidades adicionales en nuestros proyectos siguiendo convenciones simples.
2. Podemos combinar fácilmente múltiples plugins utilizando la convención withPluginName y el paquete with-compose-plugins.
3. Utilizar el plugin dotenv permite manejar las variables de entorno de manera segura y sencilla.

Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente, o que simplemente te haya ayudado a entender cómo funcionan los plugins y cómo mejorar la configuración de tus proyectos de Next.js.

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 en la parte de abajo. Recuerda que si te gustó, también puedes compartir usando los links a las redes sociales en la parte de abajo. 😊