Can I integrate this with Next.js App Router?

Yes, the skill includes guidance on setting up tRPC with the Next.js App Router, including Fetch API adapters, provider configurations, and client hooks.

How does it handle authenticated requests?

It guides you through creating context (ctx) and using middleware to create 'protected procedures' that require a valid session or specific user roles.

Does this skill help with input validation?

Yes, it provides specific patterns and examples for using Zod to define schemas that validate incoming data while automatically inferring the corresponding TypeScript types.

What is the main benefit of using this tRPC skill?

The primary benefit is building end-to-end type-safe APIs that eliminate runtime errors and provide excellent developer experience through shared types between server and client without code generation.

tRPC API Development

Name: tRPC API Development
Author: oriolrius

byoriolrius

•

API開発

Builds end-to-end type-safe APIs using tRPC with full TypeScript inference and seamless Next.js integration.

概要

This skill provides expert guidance for architecting and implementing type-safe communication layers between servers and clients using tRPC. It streamlines the creation of routers, procedures, and middleware while ensuring that TypeScript types are shared across the entire stack without the need for code generation. Whether you are setting up a basic API or complex nested routers with Zod-based validation and custom context, this skill assists in writing clean, performant, and type-safe code for modern web applications.

主な機能

3 GitHub stars
End-to-end TypeScript inference across the full stack
Advanced router organization and nesting strategies
Custom middleware implementation for auth and logging
Comprehensive Zod-based input validation patterns
Seamless Next.js and React Query integration

ユースケース

Implementing optimistic UI updates and efficient state management
Building full-stack React applications with shared type definitions
Creating secure, authenticated APIs with role-based procedure access

概要

主な機能

3 GitHub stars
End-to-end TypeScript inference across the full stack
Advanced router organization and nesting strategies
Custom middleware implementation for auth and logging
Comprehensive Zod-based input validation patterns
Seamless Next.js and React Query integration

ユースケース

Implementing optimistic UI updates and efficient state management
Building full-stack React applications with shared type definitions
Creating secure, authenticated APIs with role-based procedure access