Como construí um blog com NextJS + NotionAPI
Introdução
Mais do que apenas publicar artigos, o objetivo é mostrar na prática como estruturar um projeto completo — desde o consumo de uma API externa até o deploy automatizado — e usar o próprio blog como prova viva de boas práticas e decisões de engenharia.
Stack e escolhas técnicas
A stack foi pensada para equilibrar produtividade, flexibilidade e performance:
- NextJS no frontend, aproveitando o poder de SSR e SSG.
- Notion API como CMS, para gerenciar o conteúdo diretamente do Notion — ferramenta que já fazia parte do meu fluxo diário.
- TypeScript, garantindo segurança e clareza no código.
- ESLint e Prettier para manter padronização.
- NodeJS/Express no backend, separado do frontend para refletir uma arquitetura escalável de mercado.
No deploy, optei por um fluxo simples e eficiente:
- Frontend hospedado na Vercel, com integração direta ao GitHub.
- Backend na AWS EC2, usando Nginx como proxy reverso e PM2 para gerenciar processos, com automação via GitHub Actions.
Desafios e aprendizados
Integrar o Notion como CMS foi o maior desafio — principalmente por conta da estrutura complexa de dados que a API retorna.
Para resolver isso, utilizei bibliotecas como react-notion-x e notion-client, que simplificaram a renderização do conteúdo.
Além disso, trabalhar em monorepo trouxe aprendizados sobre padronização, controle de dependências e automação de builds e deploys.
Resultado e próximos passos
O resultado é um blog técnico totalmente funcional, que serve não só como canal de conteúdo, mas também como exemplo prático de arquitetura moderna em JavaScript fullstack.
Cada melhoria feita nele vira um novo aprendizado — e um novo artigo.
Se quiser conferir os detalhes técnicos e o passo a passo completo, publiquei o case completo aqui 👇