Como implementar micro-frontend’s com duas aplicações Next.JS
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 header
npx create-next-app@latest --typescript consumer
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.