Configuração profissional do ambiente tRPC: instalação otimizada, estrutura de projeto escalável e configurações para desenvolvimento produtivo.
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.
# 🚀 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/nodemy-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.jsonExecute os comandos abaixo em seu terminal. Clique para copiar cada comando.
Comando para instalar todas as dependências do tRPC
npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zodTipos e utilitários para desenvolvimento
npm install -D @types/nodeCriar novo projeto Next.js com TypeScript
npx create-next-app@latest my-trpc-app --typescript --tailwind --eslint --appTestar configuração criando uma query simples
Configurar validação com Zod
Implementar primeira mutation