Back to articles
Stop manually setting up tRPC in Next.js — use this CLI instead

Stop manually setting up tRPC in Next.js — use this CLI instead

via Dev.toDhavalkurkutiya

Every time I start a new Next.js project with tRPC, I do the same thing. Open docs. Copy files. Install packages. Forget to wrap layout.tsx. Get the QueryClient error. Fix it. Repeat next project. I got tired of it. So I built a CLI. npx create-trpc-setup The Problem Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. You need: Install @trpc/server , @trpc/client , @trpc/tanstack-react-query , @tanstack/react-query , zod , server-only ... Create trpc/init.ts with context and procedures Create trpc/query-client.ts with SSR-safe QueryClient Create trpc/client.tsx with TRPCReactProvider Create trpc/server.tsx with HydrateClient and prefetch Create app/api/trpc/[trpc]/route.ts Update layout.tsx to wrap children with TRPCReactProvider Miss any step → error. Every new project. The Solution npx create-trpc-setup Run this inside any existing Next.js project. Everything happens automatically. What gets detected automatically: Package manager — npm, pnpm, yarn, or bun Pat

Continue reading on Dev.to

Opens in a new tab

Read Full Article
2 views

Related Articles