Personalizando la configuración en Next.js

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 🎯

1. La configuraciónoriginal de Next.js puede ser fácilmente modificada y puedes extender la funcionalidad tanto como puedas y quieras.
2. No te sientas asustado de hacerlo, ya que esto te permitirá sacarle mucho más provecho a Next.js.
3. Conocer las diferentes fases y constantes en Next.js te ayudará a personalizar aún más tus proyectos.

💡 Ejercicios para practicar 💡

1. Crea un proyecto básico de Next.js y modifica su configuración para añadir variables de entorno.
2. Intervén diferentes fases del proyecto utilizando las constantes proporcionadas por Next.js.
3. Extiende la configuración de tu proyecto para admitir archivos markdown (.MD) y markdown extendido (.MDX).

🔑 Resumen en 3 puntos 🔑

1. Eso es todo, 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 funciona modificarle la configuración a tus proyectos de Next.js. 🚀
2. Aprende a añadir variables de entorno a tu proyecto de Next.js modificando el archivo next.config.js.
3. Descubre cómo intervenir diferentes fases de Next.js utilizando sus constantes y plugins.
4. Extiende la configuración de tu proyecto para admitir otros formatos de archivo, como markdown y markdown extendido.

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. 📢