Use when adding tRPC and TanStack Query integration to a TypeScript project, especially Next.js App Router projects. Triggers: setup trpc, integrate tanstack query, create trpc router/context/provider, add api client server client hydration.
Set up end-to-end type-safe API integration using:
@trpc/server@trpc/client@trpc/tanstack-react-query@tanstack/react-querydevalue or superjson)This skill should perform implementation, not just planning.
Use the prebuilt templates in this skill as the default implementation source.
templates/next-app-router/server/trpc.tstemplates/next-app-router/server/app-router.tstemplates/next-app-router/app/api/trpc/[trpc]/route.tstemplates/next-app-router/client/query-client.tstemplates/next-app-router/client/trpc-react.tsxtemplates/next-app-router/server/trpc-rsc.tsxtemplates/next-app-router/README.mdWhen integrating, copy these files into the target project and adapt import paths and auth session typing.
next, vite, react, node) from package.json.pnpm-lock.yaml, package-lock.json, yarn.lock, bun.lockb).@trpc/server@trpc/client@trpc/tanstack-react-query@tanstack/react-queryzoddevaluetemplates/next-app-router/.templates/next-app-router/README.md for destination mapping.trpc initializer with:
router, publicProcedure, optional protectedProcedureappRouter) and exported AppRouter type.app/api/trpc/[trpc]/route.ts using fetchRequestHandler.makeQueryClient() with sane defaults:
staleTimeAppRouter if helpful.TRPCReactProvider as a client component.QueryClientProviderTRPCProvider from createTRPCContext<AppRouter>()protectedProcedure; otherwise keep public-only setup.Use this structure when no established convention exists:
src/server/trpc.tssrc/server/routers/_app.tsapp/api/trpc/[trpc]/route.tssrc/lib/trpc-client.tsxsrc/lib/query-client.tssrc/lib/trpc-rsc.tsxAppRouter exported.