Módulo 2 - Aula 1

tRPC Setup Profissional: Ambiente Completo

Configure um projeto tRPC profissional com Next.js App Router, TypeScript, Prisma, autenticação e todas as ferramentas necessárias.

60 min

Intermediário

Setup Completo

🎯 Por que um setup profissional é fundamental?

Produtividade: Ambiente bem configurado acelera desenvolvimento e reduz bugs de configuração.

Escalabilidade: Estrutura sólida permite crescimento do projeto sem refatorações drásticas.

🚀 Stack tRPC: Tecnologias Profissionais

Frontend

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• React Hook Form
• Zod Validation

Backend

• tRPC v10
• Prisma ORM
• PostgreSQL
• NextAuth.js
• JWT Tokens

DevOps

• Docker
• ESLint + Prettier
• Husky + lint-staged
• GitHub Actions
• Vercel Deploy

📦 Instalação e Configuração

1. Criar projeto base

setup-project.sh

# 🚀 Criar projeto Next.js
npx create-next-app@latest saas-trpc-app --typescript --tailwind --eslint --app --src-dir

# 📁 Entrar no diretório
cd saas-trpc-app

# 🔧 Instalar dependências principais
npm install @trpc/server @trpc/client @trpc/react-query @trpc/next
npm install @tanstack/react-query @tanstack/react-query-devtools
npm install zod
npm install superjson
npm install next-auth
npm install @prisma/client prisma

# 🎨 UI e formulários
npm install @hookform/resolvers react-hook-form
npm install lucide-react
npm install clsx tailwind-merge

# 🔧 Dependências de desenvolvimento
npm install -D @types/node
npm install -D prisma

2. Configurar Prisma

setup-prisma.sh

# 🗄️ Inicializar Prisma
npx prisma init

# 📝 Configurar schema inicial
# Editar prisma/schema.prisma

# 🔄 Gerar cliente Prisma
npx prisma generate

# 🗃️ Criar e aplicar migrations
npx prisma migrate dev --name init

3. Variáveis de Ambiente

.env.local

# 📄 .env.local
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/saas_trpc"

# NextAuth
NEXTAUTH_SECRET="seu-secret-super-seguro"
NEXTAUTH_URL="http://localhost:3000"

# OAuth (opcional)
GOOGLE_CLIENT_ID="seu-google-client-id"
GOOGLE_CLIENT_SECRET="seu-google-client-secret"

# tRPC
TRPC_SECRET="outro-secret-para-trpc"

🏗️ Estrutura de Arquivos

project-structure.txt

saas-trpc-app/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/
│   │   │   │   └── [...nextauth]/
│   │   │   │       └── route.ts
│   │   │   └── trpc/
│   │   │       └── [trpc]/
│   │   │           └── route.ts
│   │   ├── (dashboard)/
│   │   │   ├── dashboard/
│   │   │   │   └── page.tsx
│   │   │   └── layout.tsx
│   │   ├── (auth)/
│   │   │   ├── login/
│   │   │   │   └── page.tsx
│   │   │   └── register/
│   │   │       └── page.tsx
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   └── form.tsx
│   │   ├── auth/
│   │   │   ├── login-form.tsx
│   │   │   └── register-form.tsx
│   │   └── providers/
│   │       ├── auth-provider.tsx
│   │       └── trpc-provider.tsx
│   ├── server/
│   │   ├── auth/
│   │   │   └── config.ts
│   │   ├── db/
│   │   │   └── client.ts
│   │   └── trpc/
│   │       ├── trpc.ts
│   │       ├── context.ts
│   │       └── routers/
│   │           ├── _app.ts
│   │           ├── auth.ts
│   │           └── user.ts
│   ├── lib/
│   │   ├── utils.ts
│   │   ├── validations.ts
│   │   └── trpc.ts
│   └── types/
│       └── index.ts
├── prisma/
│   ├── schema.prisma
│   └── migrations/
├── .env.local
├── next.config.js
├── tailwind.config.js
├── tsconfig.json
└── package.json

✅ Vantagens deste Setup

Type Safety End-to-End:Desde o banco de dados até o frontend, tudo tipado.

Desenvolvimento Ágil:Hot reload, autocompletar e detecção de erros em tempo real.

Produção Ready:Configurado para deploy, monitoramento e escalabilidade.

/M2/A1