Back to articles
I Built a CLI That Sets Up tRPC v11 in Next.js With One Command

I Built a CLI That Sets Up tRPC v11 in Next.js With One Command

via Dev.toDhavalkurkutiya

I Built a CLI That Sets Up tRPC v11 in Next.js With One Command Every time I started a new Next.js project with tRPC, I found myself doing the same thing — copying the same 6 files, installing the same packages, wrapping layout.tsx with the same provider. So I automated it. The Problem Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. You need to: Install @trpc/server , @trpc/client , @trpc/tanstack-react-query , @tanstack/react-query , zod , superjson , server-only ... Create trpc/init.ts with the right context Create trpc/query-client.ts with SSR-safe QueryClient Create trpc/client.tsx with TRPCReactProvider and useTRPC Create trpc/server.tsx with HydrateClient , prefetch , caller Create app/api/trpc/[trpc]/route.ts Manually update layout.tsx to wrap children with TRPCReactProvider That's a lot of boilerplate before you write a single procedure. The Solution npx create-trpc-setup One command. That's it. Here's what happens automatically: 1. Dependency instal

Continue reading on Dev.to

Opens in a new tab

Read Full Article
3 views

Related Articles