How do I install the Trpc Tanstack Nextjs skill?

Run npx skillmds@latest add diegojohnsonl/trpc-tanstack-nextjs in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Trpc Tanstack Nextjs safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Trpc Tanstack Nextjs?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Trpc Tanstack Nextjs free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Trpc Tanstack Nextjs?

diegojohnsonl (@diegojohnsonl) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Trpc Tanstack Nextjs by diegojohnsonl

Name: Trpc Tanstack Nextjs
Author: diegojohnsonl

Trpc Tanstack Nextjs

Set up tRPC with TanStack Query in Next.js App Router projects. Use when: (1) Setting up tRPC from scratch in a Next.js project, (2) Adding new routers or procedures, (3) Integrating authentication with tRPC context, (4) Using tRPC with React Server Components, (5) Configuring prefetching and hydration patterns.

diegojohnsonl 7904792 9 files · 34.8 KB Updated Sep 17, 2026

File contents

tRPC + TanStack Query + Next.js App Router

End-to-end typesafe APIs for Next.js using tRPC v11 with @trpc/tanstack-react-query adapter.

Core Setup

setup - Full setup from scratch with all modules
routers - Creating routers, procedures, middleware
client-usage - Queries, mutations, useUtils in client components
server-usage - Prefetching, hydration, getCaller in server components

Optional Integrations

better-auth-integration - Add session/user to tRPC context with Better Auth
optimistic-updates - Update UI before server confirms
infinite-queries - Cursor-based pagination
subscriptions - WebSocket real-time updates

How to Use

Read individual reference files for detailed explanations and code examples:

references/setup.md
references/routers.md
references/client-usage.md

Each reference file contains:

Code examples with imports
Usage patterns
Common variations

Common Gotchas

Cookies not sent - Add credentials: "include" to httpBatchLink fetch
Hydration mismatch - Ensure superjson transformer on both client and server
staleTime: 0 - Causes refetch on every mount; use 30s+ for most cases
Missing HydrateClient - Prefetched data won't transfer to client
cache() not used - getCaller/getQueryClient must be wrapped in React cache()

Resources

Frequently asked questions