Todo CRUD tipo seguro con tRPC y Next.js App Router — Prompt IA
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 フック
Resumen del prompt
Este ejemplo muestra cómo construir una aplicación Todo full-stack con seguridad de tipos utilizando tRPC, Next.js App Router y Zod. El lado del servidor define un router que incluye consultas y mutaciones, mientras que el lado del cliente utiliza los hooks de React generados por tRPC. No es necesario definir endpoints de API manualmente, y los tipos se comparten automáticamente.
Funcionalidades principales:
- Almacenamiento de tareas en memoria
- Validación de entrada con Zod para cada procedimiento
- Manejo de errores con
TRPCErrorde tRPC - Hooks de React del lado del cliente con inferencia completa de TypeScript
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選