- 将预期错误建模为返回值:避免在服务器操作中对预期错误使用 try/catch。使用 useActionState 管理这些错误并将其返回给客户端。
- 对意外错误使用错误边界:使用 error.tsx 和 global-error.tsx 文件实现错误边界,以处理意外错误并提供回退 UI。
- 将 useActionState 与 react-hook-form 一起用于表单验证。
- services/ 目录中的代码始终抛出用户友好的错误,tanStackQuery 可以捕获并向用户显示。
- 对所有服务器操作使用 next-safe-action:
- 实现具有适当验证的类型安全服务器操作。
- 利用 next-safe-action 的 action 函数创建操作。
- 使用 Zod 定义输入模式以进行强大的类型检查和验证。
- 优雅地处理错误并返回适当的响应。
- 使用 import type { ActionResponse } from '@/types/actions'
- 确保所有服务器操作返回 ActionResponse 类型
- 使用 ActionResponse 实现一致的错误处理和成功响应
Nextjs React TS Next JS Server Actions
Next.js 服务器操作的特定指导原则,包括错误建模、验证和 next-safe-action 的使用。
Nextjs React TS Next JS Server Actions by liaosw97 · b165596
npx skillmds@latest add liaosw97/nextjs-react-ts-next-js-server-actions File contents
---name: nextjs-react-ts-next-js-server-actionsdescription: Next.js 服务器操作的特定指导原则,包括错误建模、验证和 next-safe-action 的使用。---- 将预期错误建模为返回值:避免在服务器操作中对预期错误使用 try/catch。使用 useActionState 管理这些错误并将其返回给客户端。- 对意外错误使用错误边界:使用 error.tsx 和 global-error.tsx 文件实现错误边界,以处理意外错误并提供回退 UI。- 将 useActionState 与 react-hook-form 一起用于表单验证。- services/ 目录中的代码始终抛出用户友好的错误,tanStackQuery 可以捕获并向用户显示。- 对所有服务器操作使用 next-safe-action: - 实现具有适当验证的类型安全服务器操作。 - 利用 next-safe-action 的 action 函数创建操作。 - 使用 Zod 定义输入模式以进行强大的类型检查和验证。 - 优雅地处理错误并返回适当的响应。 - 使用 import type { ActionResponse } from '@/types/actions' - 确保所有服务器操作返回 ActionResponse 类型 - 使用 ActionResponse 实现一致的错误处理和成功响应
liaosw97/awesome-rules-skills/tree/main/plugins/nextjs/skills/nextjs-react-ts-next-js-server-actions commit b16559675b
Frequently asked questions
Run npx skillmds@latest add liaosw97/nextjs-react-ts-next-js-server-actions in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Next.js 服务器操作的特定指导原则,包括错误建模、验证和 next-safe-action 的使用。 It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.