trpc

Build end-to-end type-safe APIs with tRPC v11 in Next.js App Router.

1|Updated Nov 26, 2014
One-click install
npx skills add https://github.com/tianhuil/dotfiles --skill trpc-tianhuil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trpc
Source: https://github.com/tianhuil/dotfiles/tree/main/home/.config/opencode/skills/trpc
Command: npx skills add https://github.com/tianhuil/dotfiles --skill trpc-tianhuil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Skill streamlines building robust, end-to-end type-safe APIs in Next.js using tRPC v11, enabling shared server/client code, strong typings, and maintainable patterns.

Core Features & Use Cases

  • Next.js App Router first: leverage server components with typed procedures and merge routers efficiently.
  • Client-Server integration: integrate tRPC with React Query, SuperJSON transformer, and typed inputs using zod.
  • Use Case: Build a scalable API layer for a Next.js app with full type-safety between server and client.

Quick Start

Set up a Next.js project and integrate the tRPC client.

Frequently Asked Questions about trpc

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build end-to-end type-safe APIs in a Next.js App Router application?▼

Integrate tRPC with React Query in Next.js by configuring the SuperJSON transformer and defining typed inputs with Zod. This combination enables robust client-server integration and scalable API development with automatic type inference.

What is the best way to merge multiple tRPC routers across different feature modules?▼

Merge multiple tRPC routers efficiently by using middleware-based router composition across feature modules. This pattern allows you to scale your API layer while maintaining full type-safety and separating concerns across different domains.

Can I use tRPC v11 with Next.js server components and protected procedures?▼

Yes, tRPC v11 works with Next.js App Router server components by setting up a tRPC context with protected and public procedures. This allows you to leverage typed procedures directly within server components for secure data fetching.

Why do I need Zod and SuperJSON when setting up tRPC in a Next.js project?▼

You need Zod for typed input validation and SuperJSON as a transformer to serialize complex data types. Together they ensure end-to-end type-safety and robust data transmission between the tRPC server and client layers.