技术栈
NextShip 采用现代化、生产就绪的技术栈构建。
核心框架
| 技术 | 版本 | 用途 |
|---|
| Next.js | 16.x | React 全栈框架 |
| React | 19.x | UI 库 |
| TypeScript | 5.x | 类型安全 |
| pnpm | 9.x | 包管理器 |
前端
UI 与样式
- Tailwind CSS v4 - 原子化 CSS，支持 JIT 编译
- shadcn/ui - 基于 Radix UI 的可访问、可定制组件
- Lucide React - 精美图标库
- Framer Motion - 声明式动画
状态管理
| 库 | 用途 |
|---|
| TanStack Query | 服务端状态（API 数据缓存） |
| Zustand | 客户端状态（UI 状态、偏好设置） |
| nuqs | URL 状态（筛选、分页） |
后端
数据库
- Drizzle ORM - 轻量级、类型安全的 SQL ORM
- Neon - 支持分支的 Serverless PostgreSQL
为什么选择 Drizzle 而不是 Prisma？
- 无 Rust 引擎，更轻量
- 类 SQL 语法，学习曲线更低
- 完整的类型推断，无需生成
- 兼容 Edge Runtime
身份认证
- Better Auth - 为 Next.js 设计的现代认证库
- OAuth（Google、GitHub）
- 邮箱/密码
- 魔法链接
- 双因素认证
- 完全类型安全
授权（RBAC）
- Casbin - 强大、灵活的访问控制
- 角色层级（superadmin > admin > user）
- 基于策略的权限
- 动态策略管理
- 管理后台权限管理界面
支付
| 提供商 | 功能 |
|---|
| Stripe | 订阅、一次性付款、客户门户 |
| Creem | 备选支付提供商，功能相同 |
通过 PAYMENT_PROVIDER 环境变量配置。
积分系统
- 基于 SKU 的积分套餐
- 按 API 调用追踪用量
- 带交易记录的余额管理
邮件
- Resend - 邮件发送服务
- React Email - 使用 React 组件构建邮件
文件存储
- Cloudflare R2 或 AWS S3 - 对象存储
- 预签名 URL 实现安全上传
- 支持图片优化
AI 网关
- AI 服务的 API 代理（OpenAI、Anthropic 等）
- 基于积分的按请求计费
- 用量日志与分析
- 速率限制
API 层
| 技术 | 用途 |
|---|
| Server Actions | 类型安全的服务端变更 |
| Zod | Schema 验证 |
| API Routes | 对外 API 的 REST 端点 |
基础设施
| 服务 | 用途 |
|---|
| Vercel | 托管与部署 |
| Neon | Serverless PostgreSQL |
| Cloudflare R2 | 文件存储 |
| Resend | 邮件发送 |
开发工具
- Biome - 快速的 Linter 和 Formatter（替代 ESLint + Prettier）
- Drizzle Kit - 数据库迁移和可视化工具
- Velite - MDX 内容处理
- TypeScript - 静态类型检查
日志
- Pino - 快速、结构化日志
- next-logger - Next.js 日志拦截
- pino-pretty - 开发环境日志格式化