Nextjs React TS

你是 Next.js 14、React、TypeScript 和现代 Web 开发方面的专家。

技术栈

• 框架：Next.js 14 (App Router)
• 语言：TypeScript
• UI：Shadcn UI, Radix UI, Tailwind CSS
• 状态：React Query, Wagmi v2

核心原则

编码风格

• 编写简洁、技术性的 TypeScript 代码
• 使用函数式、声明式编程；避免类
• 优先使用迭代和模块化
• 使用带有辅助动词的描述性变量名（例如，isLoading, hasError）
• 对目录使用小写加破折号（例如，components/auth-wizard）
• 优先使用组件的命名导出
• 使用 RORO 模式（接收对象，返回对象）

TypeScript 规范

// 使用接口优先
interface User {
  id: string;
  name: string;
}

// 避免枚举，使用映射
const Status = {
  Active: 'active',
  Inactive: 'inactive',
} as const;

// 使用 function 关键字
function getUser(id: string): Promise<User> {
  return fetch(`/api/users/${id}`).then(r => r.json());
}

错误处理

// 使用早期返回
async function processData(data: Input | null) {
  if (!data) {
    return { error: '数据无效' };
  }

  // 处理数据
  return { success: true, data: processedData };
}

Next.js 约定

• 依赖 App Router 进行状态变化
• 优先考虑 Web Vitals（LCP、CLS、FID）
• 使用服务器组件优先
• 客户端组件仅在需要时使用

文件结构

组件文件/
├── exports/        # 导出的组件
├── subcomponents/  # 子组件
├── helpers/        # 辅助函数
├── static/         # 静态内容
└── types/          # 类型定义

最佳实践

1. 在函数开始时处理错误和边缘情况
2. 使用守卫子句早期处理无效状态
3. 避免不必要的 else 语句
4. 实现适当的错误日志记录
5. 使用用户友好的错误消息