- Full-Stack React Tech Stack para 2025
- Apresenta tecnologias úteis para desenvolver um produto SaaS ou um produto mínimo viável (MVP)
- Next.js: framework baseado em React que oferece por padrão vários recursos, como roteamento e cache, e dá suporte à integração com o backend por meio de recursos modernos do React, como server components e server functions
- Astro: ferramenta opcional para criar a landing page do produto, usada para produzir páginas rapidamente e melhorar a experiência do desenvolvedor
- Server Components: componentes executados no servidor, permitindo acesso ao banco de dados e outras capacidades, revolucionando a forma de desenvolver aplicações React full-stack
- Server Functions: recurso que permite executar código do lado do servidor a partir de componentes React apenas com chamadas de função, gerando endpoints de API automaticamente
- Server Actions: subconjunto de server functions; existem bibliotecas para melhorar a usabilidade, mas também é possível implementar diretamente
- Tailwind CSS: ferramenta recomendada para desenvolvimento rápido de produtos e manutenção de CSS no longo prazo; depois de se acostumar, é difícil voltar à abordagem tradicional de CSS
- Shadcn UI: biblioteca de UI que se integra muito bem ao Tailwind CSS, oferecendo um sistema sem versionamento e uma abordagem renovada para gerenciar a interface
- Lucide React: biblioteca de ícones usada junto com o Shadcn UI, com pouca necessidade de substituição até que surja uma alternativa melhor
- TypeScript: padrão da indústria para projetos em JavaScript, contribuindo para uma melhor experiência do desenvolvedor, menos bugs e maior manutenibilidade do código
- Zod: biblioteca de validação que combina bem com TypeScript, usada principalmente para validação no servidor; em formulários no cliente, aproveita-se a validação nativa do HTML para reduzir a complexidade
- nuqs: ferramenta para gerenciar com segurança de tipos o estado da URL no Next.js, como busca, ordenação e paginação; em outros frameworks, podem ser usados recursos nativos ou outras bibliotecas
- Zustand: ferramenta opcional para gerenciamento de estado no cliente, cujo uso vem diminuindo com a evolução do estado na URL, do cache de dados no cliente e das aplicações React orientadas pelo servidor
- React Query: ferramenta opcional usada para buscas de dados complexas no cliente, como rolagem infinita; quando a complexidade do projeto é baixa, apenas server components podem ser suficientes
- Prisma (ORM): escolha estável de ORM; pode ser substituído por Drizzle conforme as tendências mais recentes, mas no momento a preferência continua sendo o Prisma
- Supabase (banco de dados): serviço que fornece banco de dados Postgres; para manter flexibilidade, usa-se apenas o banco e a conexão é feita com Prisma, facilitando uma futura troca para outro banco
- Lucia (autenticação): não recebe mais manutenção, mas ainda serve como material de aprendizado para construir um sistema de autenticação com Oslo, Argon2, Arctic etc., permitindo implementar uma solução personalizada sem depender de serviços de terceiros
- S3 (upload de arquivos): com AWS S3, URLs pré-assinadas e AWS IAM, é possível montar uma solução flexível e barata de armazenamento de arquivos; como a maioria dos serviços de terceiros usa a mesma API, é fácil trocar de provedor quando necessário
- Inngest (fila): ferramenta usada para orquestrar tarefas complexas no backend, adequada para trabalhos em segundo plano que não são sensíveis ao tempo, oferecendo um sistema de filas fácil de configurar e manter
- React Email + Resend: o primeiro permite criar templates de email com componentes React, e o segundo é uma excelente solução para envio de emails; após migrar do Postmark para o Resend, os resultados foram satisfatórios
- Vercel (hospedagem): solução de hospedagem para aplicações full-stack usada há anos; para quem prefere self-hosting, a recomendação é Hetzner/DigitalOcean com Coolify
- CloudFlare (domínio): após várias experiências com gerenciamento de domínios, atualmente é usado com satisfação por causa da excelente UI do CloudFlare e do recurso de adicionar informações extras aos registros DNS
- Stripe (gateway de pagamento): gateway de pagamento usado há anos, com ótima documentação e API, embora a ampliação dos recursos e do escopo da API possa aumentar a complexidade
- Testes e ferramentas: a combinação de React Testing Library com Cypress/Playwright é uma boa escolha; também são recomendados ESLint (no futuro, Biome) e Prettier. Storybook ainda é usado para documentação de UI, e
tsx é usado para executar TypeScript no terminal
1 comentários
Estou conhecendo o nuqs, obrigado.