← Volver a las guías

Next.js 集成 LLM 实战：用 59API 接入 Claude 与 GPT

在 Next.js 中接入大模型，真正容易出问题的不是发送一条请求，而是密钥安全、模型切换、错误处理和成本控制。本次 walkthrough 会从一个全新的 Next.js App Router 项目开始，在服务端封装 LLM 调用，并通过 59API 的兼容接口接入 Claude 和 GPT。59API 使用原生官方质量模型，不做低配降级，按量付费，适合个人项目、原型和流量尚未稳定的产品。

一、创建项目并安装 SDK

先执行 npx create-next-app@latest llm-next-app，选择 TypeScript、App Router 和 ESLint，然后进入项目运行 npm install openai。这里使用 OpenAI 官方 SDK 的原因是它支持自定义 baseURL，后续切换 GPT 或 Claude 时，不必重写请求层。59API 兼容 Claude Code、Codex 以及 OpenAI SDK，统一接口能明显减少维护成本。

二、配置密钥和 API 地址

在项目根目录创建 .env.local，加入 59API_KEY=你的密钥。服务端客户端可写成 const client = new OpenAI({ apiKey: process.env.S9API_KEY, baseURL: "https://api.59api.com" })。实际变量名应保持一致；如果你的 SDK 示例要求使用 /v1，则以 59API 控制台当前文档为准。不要把这个变量命名为 NEXT_PUBLIC_S9API_KEY，因为 NEXT_PUBLIC_ 变量会被打包到浏览器端。

密钥建议只在 59API 控制台生成，不要提交到 Git。生产环境分别在 Vercel、Docker 或云主机的环境变量面板中配置，并为测试和生产使用不同密钥，便于设置额度和追踪异常消耗。

三、在服务端建立统一路由

创建 app/api/chat/route.ts。路由接收前端传来的 messages，先检查内容是否为空，再限制消息长度，避免用户一次提交过大的上下文。核心调用可以写成 const completion = await client.chat.completions.create({ model: "控制台中的模型ID", messages, temperature: 0.2, max_tokens: 800 })，最后返回 Response.json({ answer: completion.choices[0]?.message?.content ?? "" })。

模型字段不要凭记忆硬编码。Claude Opus、Sonnet、Haiku、Fable 以及 GPT 模型的可用名称可能随平台更新，直接复制 59API 控制台显示的准确 model ID。开发阶段可用 Haiku 或较小的 GPT 模型验证流程，正式回答再按质量需求切换到 Sonnet 或 Opus，这通常比一开始固定使用最贵模型更省钱。

四、让前端安全地调用接口

在客户端组件中，用 fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages }) }) 请求自己的 Next.js 路由，而不是直接请求 59API。这样浏览器永远看不到真实密钥，也能在路由中加入登录校验、用户配额、敏感词过滤和请求日志。

建议为提交按钮增加 loading 状态，并处理 response.ok 为 false 的情况。后端要使用 try/catch，针对 401、429 和 5xx 返回不同提示：401 通常是密钥或权限问题，429 可能是频率或余额限制，5xx 则适合短暂重试。重试最多两次，并使用递增等待，避免故障时形成请求风暴。

五、加入流式输出和成本控制

聊天产品不必等待整段答案生成后才显示。稳定版本可以把 stream: true 传给 SDK，并在 Route Handler 中将上游内容转换为 ReadableStream，再通过 SSE 或 Web Streams 返回前端。第一版先完成非流式链路更容易排错，确认模型、鉴权和计费正常后再升级流式响应。

• 限制输入：按字符数或 token 估算截断历史消息，只保留必要上下文。
• 限制输出：合理设置 max_tokens，避免简单问题产生过长答案。
• 记录用量：保存用户、模型、请求耗时和 token 使用量，但不要记录完整隐私内容。
• 设置预算：利用 59API 的按量付费方式，先用低价模型测试，并定期查看余额和调用明细。

六、上线前的验证清单

先用 curl 或 Postman 调用 /api/chat，确认服务端能返回答案；再测试空消息、超长消息、错误密钥、连续快速请求和模型不可用等场景。检查 Next.js 日志中没有打印 API key，并确认 .env.local 已加入 .gitignore。若应用面向公众，还应在路由层增加身份认证和每用户限流。

如果你希望用较低成本开始，同时保留 Claude 与 GPT 的选择空间，可以注册 59API，创建按量密钥后直接替换 baseURL 和模型 ID。平台还提供推荐返利，适合团队成员或开发者之间长期协作使用。