Sebastian Gomez
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"
}
}
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
}
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 馃幆- La configuraci贸noriginal de Next.js puede ser f谩cilmente modificada y puedes extender la funcionalidad tanto como puedas y quieras.
- No te sientas asustado de hacerlo, ya que esto te permitir谩 sacarle mucho m谩s provecho a Next.js.
- Conocer las diferentes fases y constantes en Next.js te ayudar谩 a personalizar a煤n m谩s tus proyectos.
馃挕 Ejercicios para practicar 馃挕
- Crea un proyecto b谩sico de Next.js y modifica su configuraci贸n para a帽adir variables de entorno.
- Interv茅n diferentes fases del proyecto utilizando las constantes proporcionadas por Next.js.
- Extiende la configuraci贸n de tu proyecto para admitir archivos markdown (.MD) y markdown extendido (.MDX).
馃攽 Resumen en 3 puntos 馃攽
- 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. 馃殌
- Aprende a a帽adir variables de entorno a tu proyecto de Next.js modificando el archivo
next.config.js. - Descubre c贸mo intervenir diferentes fases de Next.js utilizando sus constantes y plugins.
- 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. 馃摙
Sebastian Gomez
Creador de contenido principalmente acerca de tecnolog铆a.