What problem does it solve? Building end-to-end typesafe APIs in Next.js requires wiring together tRPC, TanStack Query, React Server Components, and authentication, which involves many error-prone configuration steps and subtle pitfalls like hydration mismatches and missing cookie credentials. ## Core Features & Use Cases - Full Setup Guidance: Covers context creation, QueryClient factory, client provider, server helpers, root router, and the API route handler for tRPC v11 with the @trpc/tanstack-react-query adapter. - Router and Procedure Patterns: Shows how to create routers, queries, mutations, protected and admin procedures, Zod input/output validation, and nested routers. - Advanced Data Patterns: Includes prefetching and hydration in Server Components, optimistic updates, infinite cursor-based queries, WebSocket subscriptions, and Better Auth session integration. - Use Case: When adding a new feature to a Next.js app, use this Skill to scaffold a typesafe tRPC router with a protected mutation, then consume it in a client component with automatic cache invalidation. ## Quick Start Ask the AI to set up tRPC with TanStack Query in your Next.js App Router project from scratch, including the provider, server helpers, and a sample router.
