Desenvolvi para o Movimento de Luta nos Bairros, Vilas e Favelas - MLB um App SPA para digitalizar as fichas de cadastro dos ocupantes.
Aproveitei que o projeto foi algo sem fins lucrativos, para estudar e implementar Continous Development e Continuous Deployment. Usei o Github Actions para fazer vários testes de Unidade e Integração e ao passar, fazer o deploy de uma nova versão do Backend e do Frontend do App.
Next.js no Firebase Hosting - O problema
O Firebase Hosting funciona de forma muito diferente da solução da Vercel, na Vercel por padrão você tem Servidor Next.js sendo executado, para que cada rota para que precise de SSR possa funcionar, já no Firebase Hosting não há nenhum servidor, existe apenas o hosting de arquivos estáticos.
O caminho sugerido via exemplos e artigos de Firebase + Next.js envolviam ter uma Firebase Function responsável por todas as requisições, o que acabaria por ser algo deveras custoso, pois renderizar uma página SSR seria proibitivo financeiramente. Não segui por esse caminho, pois me pareceu ser possível encontrar outra solução.
Desenvolvi uma solução que possibilitou que o app fosse integralmente enviado ao Firebase Hosting, consegui mapear dinamicamente as rotas do Next.js após o build, e transformar os arquivos de rotas gerados pelo manifest do Next.js (algo que me pareceu ter um contrato de design estável) em rewrites do Firebase Hosting, é um pequno script, que assume que o site não usará rotas SSR ou ISR, o script pode visto aqui.
Tecnologias & recursos
- Firebase: Auth, Functions, Firestore e Hosting
- Next.js
- Typescript
- Material-UI
- Mobx
- useClientRouter