Esse repositório apresenta uma solução para composição via rotas entre dois Apps usando o Module Federation:

• Host
• Remote

Nesse exemplo, a composição ocorre a partir das rotas remote/*. Ambos os apps usam a build estática do Next.

Tecnologias:

• Next JS
• @module-federation/nextjs-mf

Para integrar o MFE Remote, as páginas das rotas /remote/* são as mesmas, no entanto é necessário ter o conjunto:

• index.tsx
• [...paths].tsx

O arquivo remote-app.tsx é exposto via Module Federation e possui as regras de carregamento das páginas a partir do pathname. Para fazer esse roteamento é usado o routes-manifest.json gerado pelo Next JS e que já contém as regras de regex necessárias.

Limitações:

• Ao invés de adicionar contextos e regras ao arquivo __app.tsx, deve ser criado um componente que possui esses regras e é usado tanto no __app.tsx como no remote-app.tsx;
• O módulo federado só funciona via client Side;
• O roteamento dinâmico não funciona usando o router.query, para isso foi criado um hook chamado de useWatchParam para tratar do pathname;

O Module Federation só funciona com a aplicação compilada, portanto é necessário servir a aplicação Remote após o build.

Instalação dos pacotes:

yarn install

Rodar o Remote:

yarn run remote
# http://localhost:3000/remote

Rodar o Host:

yarn run host
# http://localhost:3001

Se tudo deu certo, a aplicação estará rodando na porta 3001