Plugins con Next.js
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. 馃槉

Sebastian Gomez

Sebastian Gomez

Creador de contenido principalmente acerca de tecnolog铆a.

Leave a Reply

0 Comments

Related Posts

Categorias