Personalizando Babel.js en aplicaciones de Next.js

Next.js nos deja crear aplicaciones de React con server render y sin configurar nada (entre otras cosas). Pero hay ocasiones en las que es necesario configurar algunas cosas, por ejemplo Babel.js, capaz para cambiar algo o agregar algún plugin.

Por esa razón Next.js nos permite modificar su configuración de Babel interna. Es muy simple, vamos a suponer que queremos configurar un alias usando Babel para que en vez de importar componentes usando ../components/header.js podamos hacer components/header.js desde cualquier parte de nuestra aplicación.

Si ya tenemos una aplicación, vamos a crear un archivo .babelrc en la raíz del proyecto. Dentro de ese archivo colocamos un JSON con el siguiente contenido:

{
	"presets": [
		"next/babel"
	]
}

Ese preset nos provee de toda la configuración estándar que Next.js usa para Babel.js. De esta forma tenemos todo funcionando tal cual. Si corremos nuestra aplicación vamos a ver en la consola el siguiente mensaje.

$ next 
> Using external babel configuration
> location: "/Users/sergio/Projects/my-app/.babelrc"

Esto nos indica que Next.js detectó una configuración personalizada de Babel y la está usando.

Si vemos este mensaje aunque no hayamos creado un archivo .babelrc en la raíz del proyecto puede ser que la carpeta donde está nuestro proyecto tenga su propio archivo (o algún otra carpeta padre), eso puede causar problemas.

Ahora vamos a configurar nuestro nuestro plugin, vamos a usar babel-plugin-module-alias el cual nos permite definir alias de rutas directo en Babel.

Para eso vamos a instalar este plugin con la siguiente línea:

npm i babel-plugin-module-alias
# o usando yarn
yarn add babel-plugin-module-alias

Luego simplemente lo agregamos a nuestro .babelrc.

{
	"presets": [
		"next/babel"
	],
	"plugins": [
		["module-alias", [
			{ "src": "./components", "expose": "components" }
		]]
	]
}

Como vemos la configuración es simple, lo agregamos a la lista de plugins y ponemos una lista de objeto con las propiedades src y expose donde la primera es la ruta relativa al archivo .babelrc y la segunda es el nombre que queremos que tenga nuestro alias al momento de usarlo.

Conclusiones

Como vemos extender Babel.js en Next.js es muy fácil, como usar Babel sin Next.js. Mientras nos aseguremos de cargar el preset next/babel podemos realizar cualquier tipo de configuración que queramos, podemos tener plugins solo para desarrollo, solo para producción, etc. El límite es lo que logremos hacer con Babel.