# Nextjs React TS

> Use when working with Next.js + React + TypeScript — full-stack React development

- Skill: `liaosw97/nextjs-react-ts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add liaosw97/nextjs-react-ts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/nextjs-react-ts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/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 规范
```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());
}
```

## 错误处理
```typescript
// 使用早期返回
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. 使用用户友好的错误消息