Type-Safe tRPC Todo CRUD with Next.js App Router — Prompt Example
P
Prompt
Create a complete tRPC Todo CRUD example with Next.js App Router, including a simple in-memory database, Zod validations, and a React client that calls the API with full type safety.
この例では、tRPC、Next.js App Router、Zod を使用したフルスタック型安全 Todo アプリケーションの構築方法を示します。サーバー側はクエリとミューテーションを含むルーターを定義し、クライアント側は tRPC が生成する React フックを使用します。手動の API エンドポイント定義は不要で、型は自動的に共有されます。
主な機能:
- インメモリ Todo ストレージ
- 各プロシージャに対する Zod 入力バリデーション
- tRPC の
TRPCErrorによるエラーハンドリング - 完全な TypeScript 推論を備えたクライアントサイドの React フック
Prompt Overview
This example demonstrates how to build a full-stack type-safe Todo application using tRPC, Next.js App Router, and Zod. The server side defines a router containing queries and mutations, while the client side uses React hooks generated by tRPC. No manual API endpoint definitions are required, and types are automatically shared.
Key Features:
- In-memory Todo storage
- Zod input validation for each procedure
- Error handling using tRPC's
TRPCError - Client-side React hooks with full TypeScript inference
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選