Heldinhow T3 Stack Development
Overview
The T3 Stack is a full-stack TypeScript framework built on Next.js, tRPC, Prisma, and Tailwind CSS. It provides end-to-end type safety from database to frontend. This skill should be invoked when building type-safe full-stack applications that require rapid prototyping with full-stack type guarantees.
Core Principles
- End-to-End Types: Share TypeScript types from backend to frontend automatically
- API as Function: tRPC enables calling backend functions as if they were local
- Convention over Configuration: opinionated setup for productivity
- Database First: Define schema in Prisma, generate types automatically
Preparation Checklist
- Install create-t3-app:
npm create t3-app@latest - Choose providers during setup (NextAuth, Prisma, Tailwind)
- Design database schema before implementation
- Plan tRPC router structure
Step-by-Step Process
- Initialize: Run
npm create t3-app@latestwith desired options - Define Schema: Create Prisma schema with models
- Run Migration: Generate database with
prisma db push - Create Routers: Build tRPC routers with procedures
- Build UI: Create Next.js pages using tRPC hooks
- Style: Use Tailwind CSS for responsive design
- Deploy: Push to Vercel with environment variables
Do's and Don'ts
- ✅ Do use tRPC procedures for type-safe API calls
- ✅ Do leverage Prisma's type safety with generated types
- ✅ Do use Next.js App Router for new projects
- ❌ Don't skip validation - use Zod with tRPC
- ❌ Don't mix App Router and Pages Router in same project
- ❌ Don't ignore environment variable configuration
Anti-Patterns
- No Validation: Skipping Zod schemas in tRPC procedures
- Direct DB Access: Accessing Prisma directly in components instead of tRPC
- Ignored Types: Not leveraging the full type chain
- Over-customization: Adding too many custom configs that break conventions