Personalizando la configuración en Next.js

Fecha: 2/16/2021 - Autor: Sebastian GomezNext.jsJavascriptNodeJSDesarrollo Web

Next.js ofrece una facilidad enorme a la hora de modificar comportamientos del flujo de ejecución. Lo más normal por ejemplo sería añadir variables de entorno a tu proyecto. Esto se puede hacer fácilmente modificando el archivo next.config.js para que exporte un objeto: (En caso de que no lo hayas creado lo puedes crear en la raíz de tu sitio).

module.exports = {
webpack: {
// Algo que tegnas que configurar en Webpack
},
env: {
MY_ENV_VAR: "HOLA",
OTHER_ENV_VAR: "NO PONGAS SECRETOS AQUI"
}
}

También podemos exportar el objeto de configuración mediante una función que nos permita por ejemplo insertar variables dependiendo del entorno:

// EXTRAEMOS LA FASE QUE NECESITEMOS
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
...defaultConfig,
env: {
// SOLO SERVIRA SI ESTAMOS EN MODOD DE DESARROLLO
IS_THIS_A_FUNCTION: "TRUE"
}
}
}
return defaultConfig
}

Hay muchas constantes que trae Next.js que nos sirven para intervenir ciertas fases. Las concernientes a si es desarrollo, producción o construcción son:

export declare const PHASE_PRODUCTION_BUILD = "phase-production-build";
export declare const PHASE_PRODUCTION_SERVER = "phase-production-server";
export declare const PHASE_DEVELOPMENT_SERVER = "phase-development-server";

Podríamos por ejemplo intervenir la fase de producción para monitorear con un plugin de webpack el tamaño del bundle y ver información que sea valiosa al respecto:

const { PHASE_PRODUCTION_SERVER } = require('next/constants')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_PRODUCTION_SERVER) {
return {
...defaultConfig,
webpack: {
plugins: [new BundleAnalyzerPlugin()]
}
}
}
return defaultConfig
}

Aquí puedes ver las diferentes fases que tiene Next.js y todas sus constantes.

Incluso si te estas preguntando como extender la configuaración para que por ejemplo las páginas no necesariamente sean Javascript sino que por ejemplo (como es el caso de este Blog) sean páginas hechas en markdown (.MD) o mardown extendido (.MDX) aquí te la dejo:

const images = require("remark-images");
const emoji = require("remark-emoji");
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
options: {
remarkPlugins: [images, emoji]
}
});
module.exports = withMDX({
pageExtensions: ["js", "jsx", "md", "mdx"]
});

Aunque en el siguiente post hablaremos más sobre Plugins que puedes usar en Next.js.

Como puedes ver la configuración original de Next.js puede ser fácilemente modificada y puedes extender la funcionalidad tanto como puedas y quieras, no te sientas asustado de hacerlo ya que ésto ter permitirá sacarle mucho más provecho a Next.js.

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 como funciona modificarle la configuración a 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.