Como implementar micro-frontend's usando Next.JS e module federation

Antes de iniciarmos, você deve saber que é são micro frontend’s.

Micro-frontend’s são uma arquitetura de aplicações em que uma aplicação é dividida em pequenos módulos independentes, cada um gerenciado por equipes separadas e implementado com tecnologias diferentes.

Cada micro-frontend é responsável por uma parte específica da funcionalidade da aplicação e é integrado no frontend final como um componente isolado. Isso permite que as equipes trabalhem de forma autônoma e aumente a escalabilidade e a manutenibilidade da aplicação.

Pré requisitos

Nós usaremos o module federation, que é um tecnologia do webpack v5. Ele irá permitir construir várias aplicações e executa-las como se fosse apenas uma.

Nós iremos construir três micro-frontends Next.JS. Iremos expor um componente no primeiro micro-frontend, e expor uma função em comum no segundo. E para finalizar, o terceiro consumirá todos os outros dois microfrontend’s.

Implementação

É necessário que sua aplicação Next.js deve ser a versão superior a v10.2 para suportar o webpack 5. Neste tutorial usaremos o Next 13 (sem o app dir).

Criando projeto

Antes de mais nada, criaremos nossas aplicações com os comandos:

npx create-next-app@latest --typescript heade

npx create-next-app@latest --typescript consumerr        

Instalando lib’s necessárias

Em cada um dos projetos, você irá instalar o a lib @module-federation/nextjs-mf. Para isso use o comando abaixo:

npm i @module-federation/nextjs-mf
        

Lembre-se de fazer isso nos dois projetos (consumer e header)

Mão na massa

No primeiro, criaremos um componente de Header bem simples. Crie um pasta components dentro da pasta src, e dentro da mesma crie um arquivo chamado Header.tsx, e dentro dele colocaremos este conteúdo (ou o que preferir):

export function Header() 

 return (

  <header

   style={{

    backgroundColor: "#090909",

    color: "white",

    height: "80px",

    display: "flex",

    justifyContent: "space-around",

    alignItems: "center",

   }}

  >

   Logo

   <ul>

    <li>Home</li>

   </ul>

  </header>

 );

}{        

Após fazermos isso, iremos permitir que este componente seja usado por outros micro-frontends. Para isso, precisaremos ir no nosso next.config.js e alterar nossa configuração, ficando:

/** @type {import('next').NextConfig} *

const NextFederationPlugin = require("@module-federation/nextjs-mf");




module.exports = {

 webpack(config, options) {

  const { webpack } = options;

  Object.assign(config.experiments, { topLevelAwait: true });

  if (!options.isServer) {

   config.plugins.push(

    new NextFederationPlugin({

     name: "header", // nome do micro-frontend




     filename: "static/chunks/remoteEntry.js",

     exposes: {

      "./component/Header": "./src/components/Header.tsx",

     },

     shared: {},

    })

   );

  }




  return config;

 },

};/        

Finalizando este passo, iremos no nosso micro-frontend consumer, e criaremos um arquivo chamado index.tsx (que será nossa página index), e adicionaremos o seguinte conteúdo:

import dynamic from "next/dynamic"


const Header = dynamic(

 () => import("header/component/Header").then((m) => m.Header),

 {

  ssr: false,

 }

);




export default function Home() {

 return (

  <>

   <h1>Micro-frontends Next JS </h1>




   <Header />

  </>

 );

};        

Incrível! Está quase tudo pronto..Agora, provavelmente você irá se deparar com este erro:

E agora? Muito simples! Vamos criar uma pasta chamada @types, e dentro dela criaremos um arquivo com o nome module.d.ts, e dentro dele declararemos o modulo ‘inexistente’, ficando algo como:

declare module "header/component/Header";        

Feito isso, o erro irá sumir (typescript eu te amo)

Repositório: https://github.com/Santosl2/microfrontends-nextjs

Agora você possui um conhecimento básico de como implementar um micro-frontend. Vale ressaltar que existem outras formas de implementar micro-frontend’s, essa foi apenas uma delas.

Referências

https://www.npmjs.com/package/@module-federation/nextjs-mf