这是我在尝试了不同开发语言/框架的组合后，选择出来最匹配做 Web/APP服务端开发的框架，包括了管理后台和 API
接口
项目技术规范
## 项目架构
- **Monorepo 架构**：使用 pnpm workspace 管理多个应用和包
- **构建工具**：Turbo 用于并行构建和开发
- **包管理器**：pnpm@10.14.0
- **Node 版本**：>= 20
## 应用结构
- `apps/web`：面向用户的前端应用（端口 3000）
- `apps/admin`：管理后台应用（端口 3001）
- `apps/api`：NestJS API 服务
- `packages/ui`：共享 UI 组件库
- `packages/eslint-config`：共享 ESLint 配置
- `packages/typescript-config`：共享 TypeScript 配置
## 前端技术栈
### 核心框架
- **Next.js 15.4.5**：使用 App Router 架构
- **React 19.1.1**：最新版本 React
- **TypeScript 5.8.3**：严格模式类型检查
### 样式方案
- **Tailwind CSS v4**：原子化 CSS 框架
- **CSS Variables**：用于主题系统
- **shadcn/ui**：基于 Radix UI 的组件库（new-york 风格）
- **class-variance-authority (CVA)**：组件变体管理
- **clsx + tailwind-merge**：类名合并工具
### UI 组件
- **Radix UI**：无样式的可访问性组件
- **Lucide React**：图标库
- **sonner**：Toast 通知组件
- **recharts**：数据可视化图表
### 表单和验证
- **React Hook Form 7.x**：表单状态管理
- **Zod 4.0.15**：运行时类型验证
- **@hookform/resolvers**：表单验证解析器
### 路由和导航
- **Next.js App Router**：文件系统路由
- **动态路由**：使用 `[param]` 语法
- **并行路由和拦截路由**：高级路由功能
## 后端技术栈
### API 框架
- **NestJS 11**：企业级 Node.js 框架
- **Next.js API Routes**：轻量级 API 端点
- **Prisma ORM 6.13.0**：类型安全的数据库访问
### 认证和授权
- **NextAuth.js**：
- v4.24 (admin 应用)
- v5.0.0-beta (web 应用)
- **JWT**：基于 token 的认证
- **bcryptjs**：密码加密
- **Passport.js**：NestJS 认证策略
### 数据验证
- **class-validator**：DTO 验证（NestJS）
- **class-transformer**：数据转换
- **Zod**：运行时类型验证
### API 文档
- **Swagger/OpenAPI**：API 文档生成
## 数据库
- **PostgreSQL**：主数据库
- **Prisma**：
- Schema 定义在 `apps/admin/prisma/schema.prisma`
- 支持多个生成器（client、web_client）
- 迁移管理
- Seed 脚本
## 开发工具
### 代码质量
- **ESLint 9**：代码检查
- **Prettier**：代码格式化
- **TypeScript**：静态类型检查
### 测试
- **Jest**：单元测试框架
- **Supertest**：API 集成测试
### 开发体验
- **Next.js Turbopack**：快速开发服务器
- **Prisma Studio**：数据库可视化管理
- **热重载**：自动刷新
## 目录结构约定
### Next.js 应用
```
app/
(group)/ # 路由组
layout.tsx # 布局文件
page.tsx # 页面组件
api/ # API 路由
components/ # React 组件
ui/ # UI 基础组件
lib/ # 工具函数和配置
hooks/ # 自定义 React Hooks
types/ # TypeScript 类型定义
```
### NestJS 应用
```
src/
module/
dto/ # 数据传输对象
entities/ # 实体定义
*.controller.ts # 控制器
*.service.ts # 服务层
*.module.ts # 模块定义
```
## 编码规范
### TypeScript
- 使用严格模式 (`strict: true`)
- 优先使用类型推断
- 避免使用 `any`，必要时使用 `unknown`
### React 组件
- 使用函数组件和 Hooks
- 组件使用 PascalCase 命名
- Props 使用 TypeScript 接口定义
### 样式规范
- 使用 Tailwind CSS 类名
- 避免内联样式
- 使用 CVA 管理组件变体
- 遵循移动优先的响应式设计
### API 设计
- RESTful 风格，OPENAPI标准
- 使用 DTO 进行数据验证
- 统一的错误处理
- 适当的 HTTP 状态码
### 数据库
- 使用 Prisma 迁移管理数据库结构
- 遵循数据库命名约定（snake_case）
- 合理使用索引和关系
## 状态管理
- **服务端状态**：React Server Components
- **客户端状态**：React Hooks (useState, useReducer)
- **表单状态**：React Hook Form
- **全局状态**：根据需要使用 Context API
## 性能优化
- 使用 Next.js 图片优化
- 代码分割和懒加载
- 服务端组件优先
- 适当使用客户端组件
## 安全最佳实践
- 环境变量管理 (.env.local)
- CSRF 保护
- 输入验证和清理
- SQL 注入防护（Prisma）
- XSS 防护