Building End to End Typesafe APIs with tRPC v11 and Next.js

In full-stack web development, the boundary between the frontend and the backend is traditionally a zone of friction.

You write type-safe database queries with Prisma or Drizzle in your Node.js service. Then you manually author OpenAPI annotations, run a build script to generate client TypeScript types, and pray that no engineer on your team modifies a route parameter without re-running the code-generation tool. The moment someone renames userId to accountId in a backend controller, your production web application breaks with silent runtime undefined bugs.

This architectural mismatch is called schema drift.

Teams frequently attempt to solve this by introducing GraphQL. But GraphQL introduces enormous operational overhead: writing separate schema definition files, maintaining resolvers, managing complex caching clients, and compiling heavy runtime libraries.

The elegant alternative is tRPC v11.

By replacing code-generation and manual schemas with pure TypeScript type inference, tRPC allows backend router types to flow directly into frontend React components. If you alter an input parameter or change a return payload on your server, TypeScript immediately surfaces red compilation errors across your entire frontend codebase.

With the release of tRPC v11, this ecosystem has matured into an enterprise-grade standard. Upgrading to TanStack Query v5, introducing native Server-Sent Events (SSE) streaming, and offering seamless compatibility with the Next.js App Router, tRPC v11 establishes full-stack type safety as the path of least resistance.

In this guide, we break down the architecture of tRPC v11, walk through a production implementation in Next.js, and demonstrate how to stream real-time data without WebSockets.

The Core Premise: Zero-Codegen Type Inference

To understand why tRPC feels like magic to developers, compare the traditional API workflow with tRPC's compilation model:

TRADITIONAL REST / GRAPHQL STACK (Heavy Tooling & Code-Gen):
Backend Code ──> OpenAPI / GraphQL Schema ──> Codegen Script ──> Generated .d.ts ──> Frontend Code
[High Risk of Schema Drift | Requires Continuous Re-Compilation Build Steps]

tRPC v11 COMPILED PIPELINE (Zero Code-Gen):
Backend Router (AppRouter) ────────── TypeScript Type Inference ──────────> Frontend Client Hooks
[Zero Schemas to Sync | 100% Instant Type Feedback on Every Keystroke | 0ms Build Delay]

Because TypeScript only exists at compile time, tRPC exports only the type signatures of your router—never the actual backend implementation code, database secrets, or private business logic. Your frontend bundle receives lightweight type hints with zero server code leakage.

What Is New in tRPC v11: Key Architectural Upgrades

tRPC v11 represents a major architectural modernization designed specifically for modern React and Next.js environments:

When building performance-sensitive web applications on modern frameworks like Next.js 15, these upgrades eliminate network bottlenecks and streamline asynchronous UI rendering.

Production Implementation: Setting Up tRPC v11 in Next.js

Below is an enterprise TypeScript implementation demonstrating how to build a production tRPC v11 router with input validation, context authentication, and modular procedure definitions.

1. Defining the Context and Procedure Middleware

Create your core server initialization file in src/server/trpc.ts:

import { initTRPC, TRPCError } from "@trpc/server";
import { ZodError } from "zod";

export interface Context {
  userId?: string;
  userRole?: "user" | "admin";
}

// Initialize tRPC with typed context and custom error formatting
const t = initTRPC.context<Context>().create({
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

export const router = t.router;
export const publicProcedure = t.procedure;

// Enforce authentication middleware for protected procedures
export const protectedProcedure = t.procedure.use(async ({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
      message: "You must be signed in to perform this action.",
    });
  }
  return next({
    ctx: {
      ...ctx,
      userId: ctx.userId, // Non-nullable in downstream handlers
    },
  });
});

2. Crafting Domain Routers with Zod Input Validation

Next, build modular sub-routers representing distinct business domains in src/server/routers/billing.ts:

import { z } from "zod";
import { router, protectedProcedure } from "../trpc";
import { TRPCError } from "@trpc/server";

export const billingRouter = router({
  // Query: Retrieve customer invoice list with pagination
  getInvoices: protectedProcedure
    .input(
      z.object({
        limit: z.number().min(1).max(100).default(20),
        cursor: z.string().nullish(),
      })
    )
    .query(async ({ ctx, input }) => {
      // In production, queries PostgreSQL via Drizzle or Prisma
      return {
        invoices: [
          { id: "inv_9042", amountCents: 12500, status: "PAID", date: "2026-09-30" },
          { id: "inv_9043", amountCents: 45000, status: "OPEN", date: "2026-10-01" },
        ],
        nextCursor: null,
      };
    }),

  // Mutation: Trigger payment collection
  payInvoice: protectedProcedure
    .input(z.object({ invoiceId: z.string() }))
    .mutation(async ({ ctx, input }) => {
      // Execute payment transaction
      return { success: true, processedAt: new Date().toISOString() };
    }),
});

Assemble the root AppRouter in src/server/root.ts:

import { router } from "./trpc";
import { billingRouter } from "./routers/billing";

export const appRouter = router({
  billing: billingRouter,
});

// Export only the type definition of the API!
export type AppRouter = typeof appRouter;

3. Server Components vs. Client Components Execution

In Next.js App Router, tRPC v11 supports two distinct execution paths:

1. SERVER COMPONENT EXECUTION PATH (Zero Network Overhead):
[Page.tsx (RSC)] ──> createCaller(appRouter) ──> Direct DB Execution (0ms HTTP Latency)

2. CLIENT COMPONENT EXECUTION PATH (Interactive & Cached):
[Component.tsx (Client)] ──> trpc.billing.getInvoices.useQuery() ──> HTTP / API Handler ──> DB

Calling Procedures Directly in React Server Components

In Server Components, there is no need to make a simulated HTTP call to your own domain. Instantiate a server caller to execute procedures directly with pure in-memory execution:

// src/app/invoices/page.tsx (React Server Component)
import { appRouter } from "@/server/root";
import { createContext } from "@/server/context";

export default async function InvoicesPage() {
  const ctx = await createContext();
  const caller = appRouter.createCaller(ctx);

  // Directly executes against your database with 0ms network latency
  const data = await caller.billing.getInvoices({ limit: 10 });

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">Invoices</h1>
      <ul className="mt-4 space-y-2">
        {data.invoices.map((inv) => (
          <li key={inv.id} className="p-4 rounded border">
            Invoice {inv.id} — ${(inv.amountCents / 100).toFixed(2)} [{inv.status}]
          </li>
        ))}
      </ul>
    </div>
  );
}

Interactive Client Components with TanStack Query v5

In client components where you need interactive mutations, polling, or optimistic updates, use the standard tRPC React hooks:

"use client";

import { trpc } from "@/lib/trpc/client";

export function InvoicePaymentButton({ invoiceId }: { invoiceId: string }) {
  const utils = trpc.useUtils();
  const payMutation = trpc.billing.payInvoice.useMutation({
    onSuccess: () => {
      // Invalidate query cache using TanStack Query v5 syntax
      utils.billing.getInvoices.invalidate();
    },
  });

  return (
    <button
      onClick={() => payMutation.mutate({ invoiceId })}
      disabled={payMutation.isPending}
      className="px-4 py-2 bg-blue-600 text-white rounded"
    >
      {payMutation.isPending ? "Processing..." : "Pay Invoice"}
    </button>
  );
}

Streaming AI Tokens and Real-Time Feeds with Server-Sent Events

One of the standout breakthroughs in tRPC v11 is native Server-Sent Events (SSE) streaming using standard async generators.

If your application generates streaming text responses from AI models (such as OpenAI or Anthropic), you no longer need bespoke WebSocket servers or proprietary streaming endpoints:

import { router, publicProcedure } from "../trpc";
import { z } from "zod";

export const aiRouter = router({
  generateSummary: publicProcedure
    .input(z.object({ prompt: z.string() }))
    .subscription(async function* ({ input }) {
      const tokens = ["Building ", "end-to-end ", "typesafe ", "APIs ", "with ", "tRPC v11."];

      for (const token of tokens) {
        // Yield tokens asynchronously over SSE stream
        await new Promise((resolve) => setTimeout(resolve, 100));
        yield { token };
      }
    }),
});

The client listens to the SSE stream using a standard subscription hook, updating the UI smoothly as each token arrives over HTTP/2.

Enterprise Architecture and Monorepo Scalability

As software systems grow, tRPC scales cleanly across multi-package monorepos (Turborepo or Nx). Because AppRouter is just a TypeScript type definition, you can export your router type into a shared @repo/api workspace package.

From there, multiple client applications—such as a Next.js web portal, a React Native mobile app (Expo), and an internal electron dashboard—can consume the exact same backend router types with zero code duplication.

If an engineer modifies an authentication parameter in the core API, TypeScript will immediately flag compilation warnings across both web and mobile repositories before code can be merged into production.

Modernizing Enterprise Full-Stack Engineering

Migrating an enterprise engineering organization from fractured REST endpoints to a cohesive full-stack type-safe architecture requires thoughtful planning around database schema modeling, authentication middleware, and monorepo modularity.

If your engineering organization is architecting mission-critical Next.js applications and looking to establish high-velocity, type-safe development practices, explore our architectural solutions in Complete Business Solutions or schedule a technical architecture consultation with our team.

Production Checklist for tRPC v11

Before launching a production application powered by tRPC v11, verify that your implementation satisfies this architectural checklist:

• Context Authentication: Are protected procedures guarded by reusable middleware verifying user sessions?
• Zod Input Parsing: Are all procedure query and mutation inputs validated against runtime schemas?
• Server Component Direct Callers: Are static and initial page renders utilizing createCaller to avoid redundant network hops?
• Query Cache Invalidation: Are mutations properly calling utils.invalidate() to update cached TanStack Query states?
• Error Formatter Sanitation: Is the tRPC error formatter configured to prevent internal database error traces from leaking to client responses?
• SSE Stream Protocol: Are real-time and generative streaming features leveraging native async generator subscriptions over HTTP?