155 lines
4.2 KiB
Plaintext
155 lines
4.2 KiB
Plaintext
# Next.js 14 AI开发规则
|
||
|
||
## 项目信息
|
||
- 框架: Next.js 14 + React 18
|
||
- 路由: App Router
|
||
- 语言: TypeScript
|
||
- 样式: Tailwind CSS
|
||
- HTTP客户端: Axios
|
||
- 包管理: pnpm (强制要求)
|
||
- 渲染: Server Components (默认) + Client Components
|
||
|
||
## 代码规范
|
||
1. 使用Next.js 14 App Router
|
||
2. TypeScript严格模式
|
||
3. 优先使用Server Components
|
||
4. 必要时使用Client Components ('use client')
|
||
5. 遵循React 18最佳实践
|
||
6. 使用Tailwind CSS进行样式设计
|
||
|
||
## 组件开发规则
|
||
- 默认使用Server Components
|
||
- 需要状态或效果时使用Client Components
|
||
- 组件文件使用PascalCase命名
|
||
- 使用TypeScript类型定义
|
||
- 组件props必须定义类型
|
||
- 使用React.memo优化客户端组件
|
||
- 合理拆分组件，保持单一职责
|
||
|
||
## Server Components规则
|
||
1. 默认所有组件都是Server Components
|
||
2. 不能使用useState, useEffect等客户端钩子
|
||
3. 不能使用浏览器API
|
||
4. 适合静态内容、SEO优化内容
|
||
5. 直接访问数据库和文件系统
|
||
|
||
## Client Components规则
|
||
1. 在文件顶部添加'use client'
|
||
2. 可以使用所有React Hooks
|
||
3. 可以访问浏览器API
|
||
4. 适合交互性强的功能
|
||
5. 事件处理和状态管理
|
||
|
||
## 数据获取规则
|
||
1. Server Components: 直接在组件中获取数据
|
||
2. Client Components: 使用useEffect或自定义hooks
|
||
3. 使用async/await语法
|
||
4. 实现加载状态和错误处理
|
||
5. 考虑数据缓存策略
|
||
|
||
## 路由和布局规则
|
||
1. 使用App Router目录结构
|
||
2. 每个文件夹代表一个路由段
|
||
3. page.tsx作为页面入口
|
||
4. layout.tsx定义布局
|
||
5. template.tsx定义模板
|
||
6. 使用parallel和intercepting routes
|
||
|
||
## API Routes规则
|
||
1. 在app/api目录下创建API Routes
|
||
2. 使用Next.js API Route处理程序
|
||
3. 实现RESTful API设计
|
||
4. 添加类型定义和验证
|
||
5. 实现错误处理中间件
|
||
|
||
## 性能优化规则
|
||
1. 使用Server Components减少客户端JavaScript
|
||
2. 实现静态生成(SSG)和增量静态再生成(ISR)
|
||
3. 使用Next.js图片优化组件
|
||
4. 实现代码分割和懒加载
|
||
5. 优化字体加载
|
||
6. 使用React.memo和useMemo
|
||
|
||
## SEO优化规则
|
||
1. 使用Metadata API
|
||
2. 实现结构化数据
|
||
3. 优化页面标题和描述
|
||
4. 实现面包屑导航
|
||
5. 使用语义化HTML
|
||
6. 优化图片Alt文本
|
||
|
||
## 样式开发规则
|
||
1. 优先使用Tailwind CSS
|
||
2. 使用CSS Modules（必要时）
|
||
3. 响应式设计优先
|
||
4. 使用CSS变量（自定义主题）
|
||
5. 优化CSS加载性能
|
||
|
||
## 文件结构规则
|
||
```
|
||
src/
|
||
├── app/ # App Router
|
||
│ ├── globals.css # 全局样式
|
||
│ ├── layout.tsx # 根布局
|
||
│ ├── page.tsx # 首页
|
||
│ ├── api/ # API Routes
|
||
│ └── [route]/ # 路由页面
|
||
├── components/ # 组件目录
|
||
│ ├── ui/ # 基础UI组件
|
||
│ └── [feature]/ # 功能组件
|
||
└── lib/ # 工具库
|
||
├── api.ts # HTTP客户端
|
||
├── services.ts # API接口
|
||
└── utils.ts # 工具函数
|
||
```
|
||
|
||
## 类型定义规则
|
||
1. 为所有API响应定义类型
|
||
2. 为组件props定义接口
|
||
3. 为数据库模型定义类型
|
||
4. 使用泛型提升代码复用性
|
||
5. 创建全局类型定义文件
|
||
|
||
## 错误处理规则
|
||
1. 使用error.js文件处理错误
|
||
2. 实现全局错误边界
|
||
3. API调用添加错误处理
|
||
4. 提供用户友好的错误信息
|
||
5. 实现错误日志记录
|
||
|
||
## 安全规则
|
||
1. 实现CSRF保护
|
||
2. 输入验证和清理
|
||
3. 安全的API密钥管理
|
||
4. 实现权限验证
|
||
5. 防止XSS攻击
|
||
|
||
## Git提交规则
|
||
```
|
||
feat: 新功能
|
||
fix: 修复bug
|
||
docs: 文档更新
|
||
style: 代码格式化
|
||
refactor: 重构
|
||
test: 测试相关
|
||
chore: 构建过程或辅助工具的变动
|
||
perf: 性能优化
|
||
ci: CI/CD相关
|
||
```
|
||
|
||
## AI开发提示
|
||
- 优先考虑Server Components
|
||
- 合理使用Client Components
|
||
- 遵循Next.js 14最佳实践
|
||
- 考虑性能和SEO优化
|
||
- 保持代码风格一致
|
||
- 使用TypeScript提升代码质量
|
||
- 实现良好的错误处理
|
||
|
||
## 包管理规则
|
||
1. 必须使用 pnpm 作为包管理器
|
||
2. 使用 pnpm workspace 协议引用内部依赖
|
||
3. 依赖安装: `pnpm install`
|
||
4. 开发服务器: `pnpm dev`
|
||
5. 构建: `pnpm build`
|
||
6. 使用 monorepo 模式管理项目依赖 |