Jump to content

Primeiros passos

Você acabou de criar um novo aplicativo T3 e está pronto para começar. Aqui está o mínimo para que seu aplicativo funcione.

Banco de dados

Se o seu aplicativo incluir o Prisma, certifique-se de executar npx prisma db push no diretório raiz do seu aplicativo. Este comando sincronizará o schema do Prisma com seu banco de dados e gerará as tipagens do TypeScript para o Prisma Client com base em seu schema. Observe que você precisa reiniciar o servidor TypeScript depois de fazer isso para que ele possa detectar os novos tipos gerados.

Autenticação

Se seu aplicativo incluir NextAuth.js, vamos começar com o DiscordProvider. Este é um dos provedores mais simples que o NextAuth.js oferece, mas ainda requer um pouco de configuração inicial de sua parte.

Claro, se você preferir usar um provedor de autenticação diferente, também pode usar um dos muitos provedores↗ que o NextAuth.js oferece.

  1. Você precisará de uma conta no Discord, então crie uma se ainda não tiver.
  2. Navegue at√© https://discord.com/developers/applications‚Üó e clique em ‚ÄúNovo aplicativo‚ÄĚ no canto superior direito. D√™ um nome ao seu aplicativo e concorde com os Termos de Servi√ßo.
  3. Depois de criar seu aplicativo, navegue at√© ‚ÄúConfigura√ß√Ķes ‚Üí OAuth2 ‚Üí Geral‚ÄĚ.
  4. Copie o ‚ÄúID do cliente‚ÄĚ e adicione-o ao seu .env como DISCORD_CLIENT_ID.
  5. Clique em ‚ÄúRedefinir Segredo‚ÄĚ, copie o novo segredo e adicione-o ao seu .env como DISCORD_CLIENT_SECRET.
  6. Clique em ‚ÄúAdicionar redirecionamento‚ÄĚ e digite http://localhost:3000/api/auth/callback/discord.
    • Para implanta√ß√£o de produ√ß√£o, siga as etapas anteriores para criar outro aplicativo Discord, mas desta vez substitua http://localhost:3000 pela URL na qual voc√™ est√° implantando.
  7. Salve as altera√ß√Ķes.
  8. Defina NEXTAUTH_SECRET em .env. Em desenvolvimento, qualquer string funcionará, para produção, veja a nota em .env sobre como gerar um segredo seguro.

Agora você deve conseguir fazer login.

Próximos passos

  • Se sua aplica√ß√£o incluir tRPC, confira src/pages/index.tsx e src/server/trpc/router/example.ts para ver como funcionam as consultas tRPC.
  • D√™ uma olhada na documenta√ß√£o create-t3-app, bem como nos documentos dos pacotes que sua aplica√ß√£o inclui.
  • Junte-se ao nosso Discord‚Üó e d√™-nos uma estrela no GitHub‚Üó! :)

Recent Contributors To This Page