tRPC with Next.js App Router — Type-Safe APIs Guide
Set up tRPC in a Next.js App Router project for end-to-end type-safe APIs with React Query integration and no manual fetch or schema duplication.
tRPC removes the boilerplate of keeping a Next.js frontend and backend in sync on types — no schema file, no codegen step, just TypeScript inference shared directly between server and client. Here's how to wire it into the App Router.
Step 1: Install tRPC and Set Up the Router
Step 2: Define Procedures with Zod Input Validation
Only AppRouter's type is ever imported by the client — the actual implementation (and any server-only imports like a database client) never ends up in the browser bundle.
Step 3: Expose the Router as a Route Handler
Step 4: Set Up the Client with React Query
Step 5: Call Procedures from Client Components
The mutation's onSuccess invalidating the list query is plain TanStack Query behavior — tRPC just gives utils.post.list full type inference on top of it.
Step 6: Call Procedures Directly from Server Components
A server-side caller invokes the same procedure as a plain async function call, skipping the HTTP round trip entirely for data needed during server rendering.
Key Takeaways
tRPC eliminates schema duplication between a Next.js frontend and backend by sharing TypeScript types directly rather than generating them from OpenAPI or GraphQL, Zod handles input validation with inferred types on both ends, and its React Query integration means caching and invalidation behave exactly like TanStack Query — but it only pays off within a single TypeScript codebase, not for external API consumers.
