Setting Up tRPC with React and Next.js
Configure a tRPC router, procedures, and the React client adapter in a Next.js App Router project.
Installing tRPC Dependencies
Install @trpc/server and @trpc/client for the core tRPC packages. Add @trpc/react-query for the React hooks adapter and @tanstack/react-query as the peer dependency that powers the hooks.
For Next.js API route integration, no additional adapter package is needed in recent versions of tRPC.
Initializing tRPC on the Server
Create a server/trpc.ts file and call initTRPC.create() to get the t object. Export t.router as router, t.procedure as publicProcedure, and t.mergeRouters as a utility.
The initTRPC factory accepts a context type generic that defines what data is available in every procedure's ctx argument.
All lessons in this course
- The Problem tRPC Solves
- Setting Up tRPC with React and Next.js
- Queries, Mutations, and Subscriptions
- Integrating tRPC with React Query and Auth