Setting up tRPC v11 in Next.js Now Takes Just One Command

#cli #nextjs #showdev #tooling

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 install — detects your package manager (npm, pnpm, yarn, bun) and installs everything needed.

2. File generation — creates all 6 required tRPC files with the correct structure for Next.js App Router and React Server Components.

3. Layout auto-patch — reads your existing layout.tsx, adds the import, and wraps your <body> contents with <TRPCReactProvider>. Your existing providers (Clerk, Toaster, etc.) stay untouched.

4. Test page — creates a /trpc-test page so you can immediately verify your setup is working. Delete it after confirming.

What Gets Generated

trpc/
├── init.ts              ← context, baseProcedure, createTRPCRouter
├── query-client.ts      ← SSR-safe QueryClient factory
├── client.tsx           ← TRPCReactProvider + useTRPC hook
├── server.tsx           ← prefetch, HydrateClient, caller
└── routers/
    └── _app.ts          ← your app router

app/api/trpc/[trpc]/
└── route.ts             ← API route handler

How to Use tRPC After Setup

Server Component — prefetch data:

import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.health.queryOptions());
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — consume data:

"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.health.queryOptions());
  return <div>{data.status}</div>;
}

Layout Auto-Patch

This was the trickiest part to build. The CLI reads your existing layout.tsx, finds the <body> tag, detects the indentation style, and wraps the inner content — keeping your existing providers and components exactly where they are.

Before:

<ClerkProvider>
  <html lang="en">
    <body className="...">
      {children}
      <Toaster />
    </body>
  </html>
</ClerkProvider>

After:

<ClerkProvider>
  <html lang="en">
    <body className="...">
      <TRPCReactProvider>
        {children}
        <Toaster />
      </TRPCReactProvider>
    </body>
  </html>
</ClerkProvider>