Sebastian Gomez
Next.js ofrece una facilidad enorme a la hora de modificar comportamientos del flujo de ejecución. Por ejemplo, lo más común sería añadir variables de entorno a tu proyecto. En este artículo, te mostraremos cómo hacerlo y cómo extender la funcionalidad de Next.js a través de diferentes fases y plugins. 🧩
🌱 Añadiendo variables de entorno 🌍Lo primero que haremos es modificar el archivo next.config.js para que exporte un objeto. Si no lo has creado aún, puedes hacerlo en la raíz de tu sitio. A continuación, un ejemplo de cómo hacerlo:
// Exportamos un objeto que contiene la configuración de Webpack y variables de entorno
module.exports = {
// Configuración de Webpack (no se proporciona nada en este ejemplo)
webpack: {
// Algo que tengas que configurar en Webpack
},
// Variables de entorno
env: {
// Establecemos la variable de entorno 'MY_ENV_VAR' con el valor 'HOLA'
MY_ENV_VAR: "HOLA",
// Establecemos la variable de entorno 'OTHER_ENV_VAR' con el valor 'NO PONGAS SECRETOS AQUI'
OTHER_ENV_VAR: "NO PONGAS SECRETOS AQUI"
}
}
🔄 Exportando la configuración mediante una función 🔄También podemos exportar el objeto de configuración mediante una función que nos permita, por ejemplo, insertar variables dependiendo del entorno:
// Importamos las constantes 'PHASE_DEVELOPMENT_SERVER' de Next.js y el paquete 'webpack-bundle-analyzer'
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// Exportamos una función que toma como argumentos la fase de compilación de Next.js y la configuración predeterminada de Next.js
module.exports = (phase, { defaultConfig }) => {
// Si estamos en la fase de desarrollo, agregamos una variable de entorno
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
...defaultConfig,
env: {
// Si estamos en modo de desarrollo, establecemos la variable de entorno 'IS_THIS_A_FUNCTION' en 'TRUE'
IS_THIS_A_FUNCTION: "TRUE"
}
}
}
// Si no estamos en la fase de desarrollo, simplemente devolvemos la configuración predeterminada
return defaultConfig
}
⚙️ Interviniendo fases de Next.js ⚙️Next.js trae muchas constantes que nos sirven para intervenir ciertas fases, como desarrollo, producción o construcción. Por ejemplo, podríamos intervenir la fase de producción para monitorear con un plugin de webpack el tamaño del bundle y ver información valiosa al respecto:
// Importamos las constantes 'PHASE_PRODUCTION_SERVER' de Next.js y el paquete 'webpack-bundle-analyzer'
const { PHASE_PRODUCTION_SERVER } = require('next/constants')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// Exportamos una función que toma como argumentos la fase de compilación de Next.js y la configuración predeterminada de Next.js
module.exports = (phase, { defaultConfig }) => {
// Si estamos en la fase de producción del servidor, agregamos el plugin 'webpack-bundle-analyzer'
if (phase === PHASE_PRODUCTION_SERVER) {
return {
...defaultConfig,
webpack: {
plugins: [new BundleAnalyzerPlugin()]
}
}
}
// Si no estamos en la fase de producción del servidor, simplemente devolvemos la configuración predeterminada
return defaultConfig
}
En este enlace puedes ver las diferentes fases que tiene Next.js y todas sus constantes.
📄 Extender la configuración para otros formatos de archivo 📄Si te preguntas cómo extender la configuración para que las páginas no necesariamente sean JavaScript, sino también archivos en markdown (.MD) o markdown extendido (.MDX), aquí te dejamos un ejemplo:
// Importamos los paquetes 'remark-images', 'remark-emoji' y '@next/mdx'
const images = require("remark-images");
const emoji = require("remark-emoji");
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
options: {
remarkPlugins: [images, emoji]
}
});
// Exportamos una función que utiliza el paquete '@next/mdx' para configurar el soporte de MDX en Next.js
module.exports = withMDX({
// Establecemos las extensiones de archivo de las páginas que deben ser compiladas como MDX
pageExtensions: ["js", "jsx", "md", "mdx"]
});
En el siguiente post, hablaremos más sobre Plugins que puedes usar en Next.js.
🎯 Conclusiones 🎯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. 📢
Creador de contenido principalmente acerca de tecnología.