Jump to content

Outras Recomendações

Nós reconhecemos que as bibliotecas inclusas no create-t3-app não resolvem todos os problemas. Enquanto nós te encorajamos a começar o seu projeto com as coisas que providenciamos, em algum momento você terá que adicionar novos pacotes. Apenas você pode saber o que o seu projeto precisa, mas aqui estão algumas coisas que nos encontramos recomendando com frequência.

Estas são recomendações de contribuidores individuais do Create T3 App e não devem ser vistas como propriedades “oficiais” pela equipe Create T3 App ou T3-OSS. Faça sua própria pesquisa, especialmente antes de se comprometer com serviços pagos.

Gerenciamento de Estado

Nota do editor: Bibliotecas de gerenciamento de estado podem ser boas, mas normalmente não são necessárias. Os hooks do React Query + tRPC devem ser capazes de tomar conta do seu estado do lado do servidor. Para o lado do cliente, comece com o useState do React, e procure por alguma dessas opções quando precisar de mais.

Zustand

Para nunca mais usar Redux

O “moderno e simples Redux”, que você não sabia que precisava. Sempre podemos confiar em Poimandres. Você pode construir tudo, desde aplicativos de videochamada até jogos e servidores com essa pequena biblioteca.

Jotai

Para nunca mais usar Context

Para uma abordagem mais atômica, o Jotai é difícil de ser batido. Também da Poimandres, Jotai te permite definir singletons que parecem um useState global. Uma boa opção para manipulações de estado que não necessariamente precisam de uma máquina de estado.

Biblioteca de Componentes

A maior parte das aplicações necessitam de vários componentes - botões de toggle, menus dropdown, modais, e assim por diante. Essas bibliotecas providenciam components bons, acessíveis e que você pode customizar como achar melhor.

Bibliotecas de Componentes não estilizados

Também conhecidas como bibliotecas headless, elas providenciam componentes não estilizados, acessíveis e bons que você pode customizar como achar melhor. Aqui estão algumas recomendações

  • Radix UI oferece um conjunto poderoso de primitivos convenientes e acessíveis que você pode estilizar com CSS puro ou Tailwind CSS.

  • Headless UI feito pela equipe do Tailwind CSS também fornece componentes acessíveis e sem estilo que se integram perfeitamente ao Tailwind CSS.

  • React Aria fornece primitivos de UI acessíveis para seu design system. Seu componente Date Picker é animal.

Bibliotecas de Componentes estilizados

Para quando você quer apenas que seu aplicativo seja OK

Às vezes, você está construindo um projeto em que deseja apenas que a interface do usuário pareça decente fora da caixa. Para painéis de administração e outros projetos semelhantes, qualquer uma dessas bibliotecas de componentes fará o trabalho.

Class Variance Authority

Para criar bibliotecas de UI

Crie declarativamente uma biblioteca de UI com diferentes variantes de cor, tamanho etc. Quando seu projeto atinge uma escala em que você deseja um conjunto padronizado de componentes de interface do usuário com várias variantes usando Tailwind CSS, o CVA é uma ótima ferramenta.

Animações

Para quando você precisar de animações em seu aplicativo, aqui estão nossas recomendações.

AutoAnimate

Para animações com uma única linha de código

A maioria das bibliotecas de animação tenta satisfazer todos os casos de uso possíveis e, como resultado, torna-se desajeitada. O AutoAnimate é uma ferramenta de configuração zero que oferece uma melhoria significativa no UX sem nenhum esforço adicional do desenvolvedor.

Framer Motion

Para animações complexas com código declarativo

O Framer Motion fornece uma sintaxe simples e declarativa e permite que você escreva menos código para criar tudo, desde animações complexas até gestos.

Deploy, Infraestrutura, Bancos de Dados e CI

Vercel

Para hospedar a sua aplicação

A Vercel tomou conta das implantações da web e transformou-as em uma integração do GitHub definida uma vez e esquecida. Nós escalamos para centenas de milhares de usuários sem problemas. Com tecnologia AWS, apenas uma interface muito melhor :)

PlanetScale

Para bancos de dados sem preocupações

PlanetScale é a melhor “plataforma de banco de dados serverless” que nós já usamos até então. Insana escalabilidade, boa experiência de desenvolvimento, e preço incomparável. Se você está usando SQL (e esperançosamente Prisma), isso é difícil de bater.

Railway

Para hospedar sua infra

É a “Heroku moderna”. A maneira mais fácil de colocar um servidor real em funcionamento. Se Vercel e PlanetScale não são suficientes, Railway provavelmente é. Aponte para um repositório do GitHub e pronto.

Upstash

Para Redis serverless

Nós amamos Prisma e PlanetScale, mas alguns projetos precisam de uma solução mais performática. O Upstash permite que você obtenha o desempenho de memória do Redis em seu projeto sem servidor, sem precisar gerenciar a infraestrutura e escalar você mesmo.

Pusher

Para WebSockets serverless

Se WebSockets for o foco principal do seu projeto, considere um back-end mais tradicional, como Fastify (que também funciona com tRPC!). Mas para adicionar rapidamente WebSockets a um aplicativo T3, o Pusher é uma excelente escolha.

Soketi

O Soketi é uma alternativa auto-hospedável, simples e rápida ao Pusher. É totalmente compatível com o Pusher SDK, que você pode usar para se conectar ao servidor. Soketi serverless também está em beta.

Analytics

Os dados do usuário são muito valiosos quando você está criando um aplicativo. Aqui estão alguns provedores de análise que recomendamos.

Plausible

Precisa de análise? Plausível é uma das maneiras mais rápidas de obtê-los. Super mínimo. Ele ainda tem um plugin simples para Next.js.

Umami

Umami é uma alternativa de código aberto, auto-hospedável, simples, rápida e focada em privacidade para o Google Analytics. Você pode implantá-lo facilmente em Vercel, Railway, etc. com PlanetScale como seu banco de dados.

Outros

Next Bundle Analyzer

Às vezes, pode ser difícil determinar o que será incluído na saída de compilação do seu aplicativo. O Next Bundle Analyzer é uma maneira fácil de visualizar e analisar os pacotes JavaScript gerados.