← Volver a las guías

Next.js 接入 LLM 实战：用 59API 构建流式 AI 对话

为什么在 Next.js 中通过 59API 接入 LLM

Next.js 很适合构建 AI 对话、内容生成和智能客服：前端负责交互，Route Handler 在服务端保护密钥并调用模型。59API 提供兼容 OpenAI SDK 的统一接口，基础地址为 https://api.59api.com，可按量付费使用 Claude Opus、Sonnet、Haiku、Fable 及 GPT 模型。对于需要控制调用成本、又不希望牺牲官方原生模型质量的项目，它是实用的接入选择。

1. 创建项目并配置密钥

先创建 Next.js 项目：npx create-next-app@latest next-llm-demo --ts --app。进入目录后安装 SDK：npm install openai。然后在项目根目录新建 .env.local，并填写从 59API 控制台获取的密钥：OPENAI_API_KEY=你的_59API_Key。不要把密钥写进客户端组件，也不要提交 .env.local 到 Git 仓库。

2. 编写服务端 Route Handler

创建 app/api/chat/route.ts。下面的接口接收用户消息，并将请求转发到 59API。因为其兼容 OpenAI API 协议，现有 OpenAI SDK 的调用方式基本无需改动，只需要设置 baseURL。

import OpenAI from "openai"; import { NextRequest, NextResponse } from "next/server"; const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, baseURL: "https://api.59api.com/v1" }); export async function POST(req: NextRequest) { const { message } = await req.json(); if (!message || typeof message !== "string") return NextResponse.json({ error: "消息不能为空" }, { status: 400 }); const completion = await client.chat.completions.create({ model: "gpt-4o-mini", messages: [{ role: "system", content: "你是简洁、准确的中文助手。" }, { role: "user", content: message }], temperature: 0.7 }); return NextResponse.json({ text: completion.choices[0]?.message?.content ?? "" }); }

模型名应以 59API 控制台实际可用列表为准。例如，追求快速、低成本响应时可选择轻量模型；需要复杂推理、代码审查或长文本分析时可选择 Claude Sonnet、Opus 或更高能力的 GPT 模型。将模型名保存在环境变量中，后续切换供应模型会更方便。

3. 在客户端调用接口

将 app/page.tsx 标记为客户端组件，并用 fetch 调用自己的 /api/chat，而不是直接调用第三方 API。核心提交逻辑如下：const res = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: input }) }); const data = await res.json(); setAnswer(data.text);。页面应同时处理 loading、接口错误和空输入状态，避免用户重复点击导致重复扣费。

4. 为生产环境补上成本与安全控制

• 限制输入：在服务端限制 message 长度，例如最多 6000 字符，防止异常长请求扩大 Token 成本。
• 验证身份：将 Route Handler 与 NextAuth、Clerk 或自有登录系统结合，避免公开接口被滥用。
• 设置频率限制：按用户 ID 或 IP 限制每分钟请求数，生产环境可使用 Redis 实现。
• 记录用量：保存模型、耗时、状态码和 Token 用量，方便发现高成本提示词并优化。
• 切换模型：把模型选择集中在服务端配置中，按任务复杂度选择更经济的模型。

5. 何时使用流式输出

长回答建议启用 stream: true，并把上游响应转换为 ReadableStream 返回给浏览器。流式输出不能降低模型总 Token 消耗，但能显著缩短用户看到首个字符的等待时间。首版应用可先使用上面的 JSON 响应验证链路，再升级为流式接口，排查问题会更直接。

完成上述结构后，你的 Next.js 应用已经具备可替换模型、保护密钥和可控成本的 LLM 接入基础。需要以较低按量成本接入 Claude 或 GPT，并保留 OpenAI SDK 开发体验时，可以注册 59API 账号创建密钥；其推荐返佣机制也适合团队或开发者社区持续使用。

Precios · Docs