Módulo 1 - Aula 2
Setup tRPC: Ambiente Completo
Configuração profissional do ambiente tRPC: instalação otimizada, estrutura de projeto escalável e configurações para desenvolvimento produtivo.
35 min
Iniciante
Setup
🎯 Por que a configuração correta é fundamental?
Produtividade: Ambiente bem configurado acelera desenvolvimento e reduz erros de configuração.
Type Safety: Configurações corretas garantem que a inferência de tipos funcione perfeitamente.
📦 Instalação tRPC: Dependências Essenciais
# 🚀 Criar projeto Next.js
npx create-next-app@latest my-trpc-app --typescript --tailwind --eslint --app
# 📁 Entrar no diretório
cd my-trpc-app
# 📦 Instalar dependências do tRPC
npm install @trpc/server @trpc/client @trpc/react-query @trpc/next
npm install @tanstack/react-query
npm install zod
npm install superjson
# 🔧 Dependências de desenvolvimento
npm install -D @types/node🏗️ Estrutura Escalável do Projeto tRPC
my-trpc-app/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── trpc/
│ │ │ └── [trpc]/
│ │ │ └── route.ts
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── server/
│ │ └── trpc/
│ │ ├── trpc.ts
│ │ ├── context.ts
│ │ └── routers/
│ │ ├── _app.ts
│ │ └── user.ts
│ ├── utils/
│ │ └── trpc.ts
│ └── components/
│ └── providers.tsx
├── package.json
└── tsconfig.json🔴 Live Setup: Comandos Interativos
🛠️ Setup Prático: Comandos Interativos
Execute os comandos abaixo em seu terminal. Clique para copiar cada comando.
1Instalar Dependências
Comando para instalar todas as dependências do tRPC
npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod2Dependências de Desenvolvimento
Tipos e utilitários para desenvolvimento
npm install -D @types/node3Criar Projeto
Criar novo projeto Next.js com TypeScript
npx create-next-app@latest my-trpc-app --typescript --tailwind --eslint --appEstrutura de Arquivos Recomendada
src/
├── app/
│ ├── api/
│ │ └── trpc/
│ │ └── [trpc]/
│ │ └── route.ts # ✅ API handler
│ ├── _providers/
│ │ └── trpc-provider.tsx # ✅ Provider configurado
│ ├── layout.tsx # ✅ Layout com TRPCProvider
│ └── page.tsx # ✅ Página principal
├── lib/
│ └── trpc.ts # ✅ Cliente tRPC
├── server/
│ ├── context.ts # ✅ Context do servidor
│ ├── trpc.ts # ✅ Configuração base
│ └── routers/
│ ├── _app.ts # ✅ Router principal
│ └── user.ts # ✅ Router de usuários
└── types/
└── trpc.ts # ✅ Tipos compartilhados📋 Checklist de Configuração
Projeto Next.js criado com TypeScript
Dependências tRPC instaladas
Estrutura de pastas criada
TRPCProvider configurado no layout
API route configurada
Router básico criado
Cliente tRPC configurado
🚀 Próximos Passos
Testar configuração criando uma query simples
Configurar validação com Zod
Implementar primeira mutation