主题
Next.js AI 项目实践
如何用 Next.js 设计生产级 AI 对话应用的整体架构？
高级方案要把页面交互、流式传输、模型网关、会话数据、工具调用和观测闭环放进同一张架构图。
面试官想考什么
- 为什么 Next.js 适合承载 AI Chat 的 BFF？ 考察全栈边界。
- 哪些组件放 Server，哪些放 Client？ 考察 RSC 设计。
- 模型密钥、会话和工具权限放在哪里？ 考察安全。
- 流式失败、重试和成本如何闭环？ 考察生产能力。
一句话回答
text
Next.js 负责页面、鉴权后的 BFF 和流式响应，模型调用放在服务端网关，消息和任务状态持久化；Server Components 负责首屏和历史读取，Client Components 负责输入、流状态和交互，工具、配额、审计和观测在服务端闭环。面试回答详解
1. 分层架构
text
App Router UI
-> Client chat controller
-> Route Handler/BFF
-> auth + quota + model gateway
-> provider / RAG / tools
-> message store + trace页面不直接访问模型供应商。BFF 统一处理用户、租户、模型路由、超时、流协议和错误格式。
2. Server/Client 边界
- Server Component：会话列表、历史消息、权限裁剪、SEO/首屏数据。
- Client Component：输入框、停止按钮、流式 draft、滚动和快捷键。
- Route Handler：POST 对话、SSE/ReadableStream、文件和 webhook。
- 后台 Worker：长任务、解析、索引、批量生成。
3. 状态与数据
会话和最终消息是服务端状态；输入草稿、连接状态和未提交 delta 是客户端状态。消息用 conversationId、messageId、requestId 和 sequence 隔离，服务端保存最终状态，前端支持恢复。
4. 安全和成本
服务端做 session、租户、配额、内容安全和工具权限。记录模型版本、prompt 版本、token、费用、首 token 和工具耗时。敏感 prompt、文件和答案要脱敏、限留存。
5. 交付边界
短问答可以同步流式返回；文件解析、长 Agent 和批量生成创建 job。模型 provider 故障时按能力和预算 fallback，安全拒绝不能通过换模型绕过。
可直接背诵的 30 秒回答
text
我会用 Next.js App Router 承载 UI 和 BFF，但模型调用、鉴权、配额、工具和审计都放服务端网关。Server Components 负责历史和首屏，Client Components 负责输入与流状态，Route Handler 负责流式协议，长任务交给队列。消息按会话和 requestId 隔离，最终状态持久化，并观测 TTFT、token 成本、错误、工具耗时和任务完成率。扩展知识
Next.js 的合适位置
Next.js 很适合页面、BFF 和轻量编排；模型网关、队列、向量检索和审计系统可以是独立服务，不应为了“全在 Next.js”而把所有职责塞进 Route Handler。
面试官追问链
追问一：为什么不在浏览器直接调用模型？
- 考察点：安全和治理。
- 回答方向：会暴露密钥，无法可靠做配额、权限、审计、成本和统一 provider 策略。
追问二：Server Component 能消费流吗？
- 考察点：运行时理解。
- 回答方向：可以参与服务端流式渲染，但交互式 Chat 的持续读取、取消和局部状态通常由客户端组件和 Route Handler 协同完成。
追问三：何时拆成独立 AI 服务？
- 考察点：边界判断。
- 回答方向：当模型路由、队列、RAG、工具、安全和多语言客户端复用达到一定复杂度时，Next.js 保留 BFF/UI，核心能力独立化。