tRPC With Next.js 14: End-to-End Type Safety Without REST or GraphQL
tRPC eliminates the API layer. Your frontend calls server functions directly with full TypeScript types across the boundary. No schema generation, no code gen, no OpenAPI spec. Here's how to set it...
Source: DEV Community
tRPC eliminates the API layer. Your frontend calls server functions directly with full TypeScript types across the boundary. No schema generation, no code gen, no OpenAPI spec. Here's how to set it up with Next.js 14 App Router. Why tRPC Traditional REST: // Server defines route // Client fetches with fetch() // Types manually kept in sync (or schema gen) // Runtime errors when they drift tRPC: // Define procedure on server // Call it on client like a function // Types flow automatically // TypeScript catches mismatches at compile time Installation npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod Server Setup // server/trpc.ts import { initTRPC, TRPCError } from '@trpc/server' import { auth } from '@/lib/auth' import { ZodError } from 'zod' const t = initTRPC.context<{ userId: string | null }>().create({ errorFormatter({ shape, error }) { return { ...shape, data: { ...shape.data, zodError: error.cause instanceof ZodError ? error.cause.flatten() :
