Sebastian Gomez

Feb 21, 2022

Updated: Jun 24, 2026

Plugins con Next.js

El archivo next.config.js nos da la habilidad de hacer cosas muy poderosas. Como el archivo de configuración sigue una convención, reglas que todos los proyectos de Next.js comparten, se hace fácil inyectar código escrito por otros, que es justo lo que llamaremos Plugins.

Vigente en Next.js 16: El concepto de componer la configuración en next.config.js sigue plenamente vigente, next.config.js puede exportar un objeto o una función que recibe y devuelve la configuración. Lo que cambió desde 2022 son los paquetes concretos: varios de los que se usaban entonces hoy están sin mantenimiento. A lo largo del post te indico la alternativa moderna en cada caso.

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

Históricamente, para que una aplicación funcionara sin conexión se usaba el plugin next-offline, envolviendo la configuración así:

//  Patrón heredado: 'next-offline' ya no se mantiene.
const withOffline = require('next-offline');

const config = {
  // Lo que sea que vaya en tu configuración
};

module.exports = withOffline(config);

`next-offline` está descontinuado. No recibe mantenimiento desde hace años y es anterior al App Router. Para PWA / service workers en Next.js 16, usa `next-pwa` (Pages Router) o Serwist / un service worker propio (App Router). El patrón de "envolver la config" que ves arriba es lo que nos interesa aprender; solo cambia el paquete.

Componiendo varios plugins

La gran mayoría de los plugins siguen la convención `withPluginName`: toman tu configuración de Next.js, la encapsulan y la devuelven en el formato esperado. Eso permite aplicar un patrón de composición cuando quieres usar varios plugins a la vez.

Antes era común usar un paquete como next-compose-plugins para esto. Hoy ese paquete también está archivado, y la buena noticia es que ya no lo necesitas: como cada plugin es una simple función, puedes componerlos a mano.

// Composición manual — sin dependencias extra (recomendado en Next.js 16)
const withOffline = require('next-offline');
const withReactSvg = require('next-react-svg');

const config = {
  env: {
    MY_ENV: process.env.MY_ENV,
  },
};

// Cada plugin es una función (config) => config, así que basta anidarlas:
module.exports = withOffline(
  withReactSvg({
    ...config,
    // configuración específica de next-react-svg
  }),
);

Si tienes muchos plugins y prefieres algo más legible, puedes componerlos con un reduce:

// Alternativa con reduce, equivalente y sin dependencias
const plugins = [withReactSvg, withOffline];

module.exports = plugins.reduce((acc, plugin) => plugin(acc), config);

Como ves, concatenar plugins en Next.js sigue siendo algo súper natural, y ahora con una dependencia menos.

Manejando variables de entorno con .env

Aquí hay una gran simplificación respecto a 2022. Ya no necesitas ningún plugin (next-env, dotenv-load, etc.) para leer variables de entorno: Next.js carga automáticamente los archivos .env desde la versión 9.4. Solo tienes que crear el archivo.

Crea un .env.local en la raíz de tu proyecto y añade tus variables:

# .env.local
NEXT_PUBLIC_APP_URL=https://www.sebastian-gomez.com

Tip importante: Las variables que quieras usar en el navegador deben llevar el prefijo NEXT_PUBLIC_. Sin ese prefijo, la variable solo existe en el servidor y en el cliente llega como undefined. Recuerda además mantener tus secretos fuera del control de versiones: nunca hagas commit de tu .env.local a GitHub.

Ahora, para usar la variable en cualquier página o componente, basta con leer process.env:

// La variable lleva el prefijo NEXT_PUBLIC_ para estar disponible en el cliente
<a
  className="text-pink-600 cursor-pointer hover:underline"
  href={process.env.NEXT_PUBLIC_APP_URL}
>
  Ir a la aplicación
</a>

Conclusiones

• Los plugins son una manera sencilla y potente de extender la funcionalidad de Next.js, y el patrón de composición de next.config.js sigue vigente en Next.js 16.
• La convención `withPluginName` hace fácil y natural concatenar varios plugins, y hoy puedes componerlos a mano, sin paquetes extra.
• Para las variables de entorno ya no hace falta ningún plugin: usa el soporte nativo de .env, y recuerda el prefijo NEXT_PUBLIC_ para exponerlas al navegador de forma segura.

Ejercicios propuestos

1. Crea un proyecto básico de Next.js 16 e integra un plugin de tu elección (por ejemplo next-pwa). Investiga su documentación y configúralo correctamente.
2. Añade dos plugins distintos a tu proyecto y compónlos a mano (anidando funciones o con reduce), asegurándote de que funcionen juntos.
3. Crea un archivo .env.local con al menos tres variables; expón una al cliente con NEXT_PUBLIC_ y comprueba que las demás solo existen en el servidor.

Resumen en 3 puntos

1. Los plugins de Next.js facilitan inyectar funcionalidades adicionales siguiendo la convención withPluginName.
2. Puedes combinar varios plugins con composición manual de funciones, ya no necesitas with-compose-plugins (está archivado).
3. Las variables de entorno se manejan con el soporte nativo de .env; usa NEXT_PUBLIC_ para las que necesites en el navegador.

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. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo.