Skip to content
Home / Migrations / REST API (Express/Fastify) → tRPC

REST API (Express/Fastify) → tRPC

medium

tRPC gives end-to-end type safety between client and server with zero codegen. Best for full-stack TypeScript monorepos using Next.js or similar.

Estimated: 4-12h · 6 steps
Progress0%
Step 1: Install tRPC
npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query
Step 2: Create router

Convert REST endpoints to tRPC procedures. GET → query, POST/PUT/DELETE → mutation.

import { initTRPC } from '@trpc/server'
const t = initTRPC.create()
export const appRouter = t.router({ hello: t.procedure.query(() => 'world') })
Step 3: Add API handler

Mount tRPC handler in your Next.js app/api/trpc/[trpc]/route.ts.

import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
export const GET = (req) => fetchRequestHandler({ req, router: appRouter, endpoint: '/api/trpc' })
Step 4: Set up React client

Create trpc.ts with typed hooks. Replace fetch calls with useMutation/useQuery hooks.

import { createTRPCReact } from '@trpc/react-query'
export const trpc = createTRPCReact<AppRouter>()
Step 5: Add Zod validation

Input schemas replace express-validator or manual parsing. Types are inferred automatically.

t.procedure.input(z.object({ name: z.string() })).query(({ input }) => input.name)
Step 6: Remove old endpoints
npm uninstall express
✓ All client calls type-check and return correct data