2026年5月16日

tRPC + Next.js App Router 全栈类型安全 Todo CRUD 提示词示例

提示词

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 フック

提示词解读

此示例演示了如何使用 tRPC、Next.js App Router 和 Zod 构建全栈类型安全的待办事项应用。服务端定义包含查询和变更的路由器，客户端使用 tRPC 生成的 React 钩子。无需手动定义 API 端点，类型会自动共享。

主要功能：

内存中的待办事项存储
每个过程使用 Zod 进行输入验证
通过 tRPC 的 TRPCError 进行错误处理
具备完整 TypeScript 推断的客户端 React 钩子

这个提示对您有帮助吗？

评论将在审核后显示

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る