Microfrontends con Next JS¶
Para trabajar con Microfrontend en aplicaciones NextJS, se disponibilizan dos templates que extienden las bases del template básico con las configuraciones extras del plugin @module-federation/nextjs-mf.
Ambos templates se pueden descargar a través del front-cli.
Template Shell¶
Template base para desarrollar un shell de Microfrontend con Next Js, con todas las configuraciones básicas pre establecidas.
Instalación¶
Se utiliza el manejador de paquetes PNPM, una vez descargado el template deberá instalar las dependencias ejecutando el siguiente comando:
pnpm i --frozen-lockfile
El shell está configurado por default para ser levantado en el puerto 3000 (http://localhost:3000), una vez instaladas las dependencias podrá ejecutar los siguientes comandos:
Levantar el proyecto en modo desarrollo:
pnpm dev
pnpm build
pnpm start
Configuraciones¶
Las configuraciones del shell, que permitirán consumir otros microfrontends, como así también exportar componentes y/o páginas propios para ser consumidos, se encuentran en el archivo next.config.js.
Las configuraciones principales que se incluyen por default son:
- Dependencias compartidas básicas.
- Headers para variables de entorno y CORS.
- Configuraciones de Webpack.
- Configuraciones de NextFederationPlugin.
Implementación¶
Este template viene configurado para consumir el template base de Módulo para Next JS y así contar con un ejemplo de conexión completa de un Microfrontend.
Como ejemplo, se consume la página que exporta el remoto en el path http://localhost:3000/remote del shell, y el componente externo (tabla de roles) en la página propia de usuarios http://localhost:3000/usuarios.
Para realizar la conexión con el remoto, se utiliza la librería @architecture-it/microfrontend-utils, la cual otorga utilidades y configuraciones simples para conectar dos microfrontends.
Template Módulo¶
Template base para desarrollar un módulo de Microfrontend con Next Js, con todas las configuraciones básicas pre establecidas.
Instalación¶
Se utiliza el manejador de paquetes PNPM, una vez descargado el template deberá instalar las dependencias ejecutando el siguiente comando:
pnpm i --frozen-lockfile
El módulo está configurado por default para ser levantado en el puerto 3001 (http://localhost:3001), una vez instaladas las dependencias podrá ejecutar los siguientes comandos:
Levantar el proyecto en modo desarrollo:
pnpm dev
pnpm build
pnpm start
Configuraciones¶
Las configuraciones del módulo, que permitirán exportar componentes y/o páginas para ser consumidos por otros Microfrontends se encuentran en el archivo next.config.js.
Las configuraciones principales que se incluyen por default son:
- Dependencias compartidas básicas.
- Headers para variables de entorno y CORS.
- Configuraciones de Webpack.
- Configuraciones de NextFederationPlugin.
Implementación¶
Se incluye de ejemplo una página principal y una componente básico, los cuales se exportan para poder ser consumidos por otros Microfrontends.
El template de Shell para Next JS, incluye todas las configuraciones básicas de ejemplo para consumir éste módulo.
Información
Para conocer más sobre los Microfrontends y saber cómo trabajan o cuales son sus ventajas principales, se deja documentación relacionada a continuación: