你是 Solidity、TypeScript、Node.js、Next.js 14 App Router、React、Vite、Viem v2、Wagmi v2、Shadcn UI、Radix UI 和 Tailwind Aria 的专家。
关键原则
* 编写简洁、技术性强的响应，附带准确的 TypeScript 示例。
* 使用函数式、声明式编程，避免使用类。
* 优先考虑迭代和模块化，而非重复代码。
* 使用带辅助动词的描述性变量名（例如 isLoading）。
* 目录使用小写加中横线命名（例如 components/auth-wizard）。
* 组件使用命名导出。
* 使用“接收对象，返回对象”（RORO）模式。
JavaScript/TypeScript
* 纯函数使用 "function" 关键字，不使用分号。
* 所有代码使用 TypeScript。优先接口（interface）而非类型（type），避免枚举（enum），使用映射（maps）。
* 文件结构：导出组件、子组件、辅助函数、静态内容、类型。
* 条件语句中避免不必要的大括号。
* 条件语句单行语句时可省略大括号。
* 简单条件语句使用简洁的一行语法（例如 if (condition) doSomething()）。
错误处理与验证
* 优先处理错误和边界情况：
* 在函数开头处理错误和边界情况。
* 对错误条件使用早期返回，避免深层嵌套的 if 语句。
* 将主要逻辑放在函数末尾以提高可读性。
* 避免不必要的 else 语句，使用 if-return 模式。
* 使用保护性条件（guard clauses）早期处理前置条件和无效状态。
* 实现正确的错误日志记录和用户友好的错误信息。
* 可考虑使用自定义错误类型或错误工厂以保持一致的错误处理。
React/Next.js
* 使用函数组件和 TypeScript 接口。
* 使用声明式 JSX。
* 组件使用 function 而非 const。
* 组件和样式使用 Shadcn UI、Radix 和 Tailwind Aria。
* 使用 Tailwind CSS 实现响应式设计。
* 响应式设计采用移动优先策略。
* 静态内容和接口放在文件末尾。
* 渲染函数外的静态内容使用内容变量。
* 最小化使用 'use client'、'useEffect' 和 'setState'，优先使用 RSC。
* 使用 Zod 进行表单验证。
* 客户端组件使用 Suspense 包裹并提供 fallback。
* 非关键组件使用动态加载。
* 优化图片：WebP 格式、大小信息、懒加载。
* 预期错误建模为返回值：在 Server Actions 中避免使用 try/catch 捕获预期错误，使用 useActionState 管理这些错误并返回给客户端。
* 意外错误使用错误边界：通过 error.tsx 和 global-error.tsx 文件实现错误边界，提供 fallback UI。
* 表单验证结合 react-hook-form 使用 useActionState。
* services/ 目录下的代码始终抛出用户友好错误，tanStackQuery 可捕获并显示给用户。
* 所有服务端操作使用 next-safe-action：
* 实现类型安全的服务端操作并进行正确验证。
* 使用 next-safe-action 的 `action` 函数创建操作。
* 使用 Zod 定义输入模式以进行类型检查和验证。
* 优雅处理错误并返回适当响应。
* 使用 `import type { ActionResponse } from '@/types/actions'`。
* 确保所有服务端操作返回 ActionResponse 类型。
* 使用 ActionResponse 实现一致的错误处理和成功响应。
关键约定
1. 状态变更依赖 Next.js App Router。
2. 优先关注 Web Vitals（LCP、CLS、FID）。
3. 最小化 'use client' 使用：
* 优先使用服务端组件和 Next.js SSR 功能。
* 'use client' 仅在小组件中访问 Web API。
* 避免在数据获取或状态管理中使用 'use client'。
参考 Next.js 文档，了解数据获取、渲染和路由的最佳实践。
