架构概述

架构概述 (Architecture Overview)

本项目旨在构建一个现代化、全栈类型安全、易于维护且具备卓越开发者体验（DX）的Web应用。我们的架构设计遵循以下核心目标：

全栈整合 (Full-stack Integration): 我们将充分利用 Next.js 15 App Router 的能力，通过 Server Components 和 Server Actions 将前后端逻辑紧密结合。这种模式简化了传统的API层，降低了开发复杂性，并允许我们在同一个代码库和语言（TypeScript）中完成所有工作。
端到端类型安全 (End-to-End Type Safety): 类型安全是我们架构的基石。我们将通过 TypeScript、Drizzle ORM (数据库 schema)、Zod (运行时验证) 和 React 19 (UI)，构建一条从数据库到用户界面的完整类型链路，以在编译阶段捕获尽可能多的错误，提升代码的健壮性。
Serverless优先 (Serverless First): 我们优先采用无服务器架构。前端部署于 Vercel，数据库使用 Neon DB。这种架构实现了按需伸缩（包括缩减至零）、免运维和成本效益，完美契合课程项目的开发与部署模式。
**卓越的开发者体验 (**Superior DX): 我们相信优秀的工具能创造优秀的产品。通过 pnpm、ESLint、Prettier、Husky 和 Commitlint 等工具，我们建立了一套自动化的代码规范、格式化和提交检查流程，以保证团队协作的一致性和高效性。

下图展示了系统的主要组件以及它们之间的交互关系：

图解：

以用户手机注册的核心流程为例，数据在系统中的流转如下：

前端 (Client Component): 用户在基于 Shadcn/UI 和 Tailwind CSS 构建的表单中输入手机号、密码等信息。
网络边界 (Server Action): 用户点击“注册”按钮，直接调用一个与表单绑定的 Server Action 函数 (registerUserAction)。Next.js 框架负责处理底层的RPC调用。
服务端 (Server Logic):
- Action 在 Vercel 的 Serverless Function 环境中执行。
- 使用 Zod 对传入的表单数据进行严格的服务端验证。
- 调用 Better Auth 库来处理具体的认证逻辑。
- 在发送验证码时，调用阿里云SMS服务。
数据库 (Database): Better Auth 通过其 Drizzle Adapter，将经过哈希处理的用户信息和凭证写入 Neon DB 的 users 表中。
响应： Server Action 执行完毕后，直接向发起调用的前端组件返回一个序列化的结果对象（例如 { success: true } 或 { success: false, error: '...' }），前端组件根据此结果更新UI状态。

框架 - Next.js 15 App Router: 我们选择 App Router 是为了利用其最新的 Server Components 特性，它允许我们将数据获取和服务端逻辑与UI组件就近放置，从而获得更好的性能和更内聚的代码结构。Server Actions 进一步简化了数据变更操作。
ORM - Drizzle ORM: 相较于其他ORM，Drizzle 以其轻量、贴近原生SQL的语法和无与伦比的TypeScript集成而著称。它无需重量级的代码生成步骤，能完美实现我们“端到端类型安全”的核心理念。
数据库托管 - Neon DB: 作为一个 Serverless PostgreSQL 平台，Neon 与 Vercel 的部署模型天生一对。其“数据库分支 (Branching)”功能允许我们为每个Git分支创建独立的数据库实例，极大地简化了开发和测试流程，避免了团队成员之间的数据干扰。
UI策略 - Shadcn/UI: 我们选择 Shadcn/UI 是因为它并非一个传统的组件“库”，而是一系列我们可以直接复制代码到项目中的组件“配方”。这给予了我们对组件样式和行为的100%控制权，避免了样式覆盖的麻烦，并确保最终打包体积最小化。