为什么用 Next.js 做 AI？

Next.js 为 AI 应用提供了完美基础：服务端渲染利于 SEO，API 路由处理后端逻辑，流式支持实现实时响应。

设置

  • 安装 Vercel AI SDK：`npm install ai @ai-sdk/openai`
  • 在 `app/api/chat/route.ts` 创建 API 路由
  • 使用 `streamText` 辅助函数实现实时 token 流式传输。

核心模式

### 流式聊天

客户端使用 `useChat` hook。它自动处理流式传输、消息状态和中断。

### RAG 集成

  • 将文档存储在向量数据库（Pinecone、Qdrant 或 pgvector）。
  • 用户查询时检索相关块。
  • 将块作为上下文包含在系统提示中。

### 图像生成

  • 使用 DALL-E 或 Stable Diffusion API。
  • 用乐观 UI 更新显示加载状态。

性能建议

  • Edge Runtime：将 API 路由部署到边缘以降低延迟。
  • 缓存：缓存嵌入和常见响应。
  • 批处理：尽可能将多个 API 调用分组。

部署

  • 在 Vercel 上部署实现自动边缘部署。
  • 使用环境变量存储 API 密钥。
  • 设置速率限制控制成本。

流式响应

Vercel AI SDK 提供出色的流式支持。聊天界面使用 `useChat` hook，服务端使用 `streamText` 实现逐 token 传递。始终显示加载指示器并允许用户中途停止。

状态管理

  • 对话历史：存储在数据库中（推荐 PostgreSQL），对 conversation_id 和 created_at 建索引。
  • 乐观更新：立即显示用户消息，再与实际 AI 响应协调。
  • 缓存：缓存已完成的对话以减少 API 成本。用 Redis 做会话级缓存。

性能优化

  • Edge 运行时：在 Vercel Edge 或 Cloudflare Workers 上部署 API 路由。
  • 并行工具调用：使用函数调用时并行执行独立工具。
  • 图像优化：使用 Next.js Image 组件，AI 生成图像需压缩。
  • 速率限制：实施每用户速率限制防止滥用。