← Back to all guides

在 Next.js 中低成本接入 LLM：从 API 到上线

在 Next.js 应用里集成 LLM，应该从哪里开始？

把大语言模型接入 Next.js，并不只是调用一个接口那么简单。你需要考虑 API 密钥放在哪里、请求从浏览器还是服务端发起、如何流式返回答案、怎样控制成本，以及上线后如何避免密钥泄露。本文用新手友好的方式，带你完成一个可落地的集成方案：在 Next.js App Router 中创建一个后端接口，通过 OpenAI SDK 兼容方式调用模型，并在前端展示结果。

如果你希望同时使用 GPT 和 Claude 系列模型，又不想为多个平台分别接入和充值，可以考虑使用 59API。它的 API Base URL 是 https://api.59api.com，兼容 OpenAI SDK，也兼容 Claude Code、Codex 等开发工具；模型为官方质量的原生模型，不做降级，并且按量付费，价格在同类中非常有竞争力，还提供推荐返利，适合个人开发者和早期产品控制成本。

第一步：准备 Next.js 项目与依赖

如果你还没有项目，可以先创建一个 Next.js 应用。推荐使用 App Router，因为它的 Route Handler 很适合封装 AI 请求。

你需要安装 OpenAI SDK。由于 59API 兼容 OpenAI SDK，所以不需要学习一套新的调用方式，只要修改 baseURL 即可。

• 创建项目：使用 create-next-app 初始化项目，并选择 TypeScript 或 JavaScript。
• 安装依赖：安装 openai 包，用于在服务端调用 LLM。
• 配置环境变量：在项目根目录创建 .env.local，写入 59API 的 API Key。

环境变量示例中建议使用类似 API_KEY 的名称，但在真实项目里最好命名为 LLM_API_KEY 或 FIFTYNINE_API_KEY，便于团队理解。注意不要把 .env.local 提交到 Git 仓库。

第二步：在服务端 Route Handler 中调用模型

不要在浏览器端直接调用大模型接口，因为这样会暴露 API Key。正确做法是在 Next.js 的 app/api 目录下创建一个接口，例如 app/api/chat/route.ts，让前端请求你的接口，再由服务端转发到 59API。

服务端代码的核心思路很简单：初始化 OpenAI 客户端，将 baseURL 设置为 https://api.59api.com，再读取用户传来的 prompt，发送到 chat completions 接口。你可以选择 GPT 模型，也可以使用 Claude Sonnet、Haiku、Opus 或 Fable 等模型，具体取决于你的任务复杂度和预算。

• 简单客服问答：可以优先选择更便宜、响应快的模型。
• 复杂推理或代码生成：可以选择能力更强的 Sonnet、Opus 或 GPT 高阶模型。
• 批量内容生成：建议限制最大输出 tokens，并做好重试与队列。

在 Route Handler 中，你还应该做基础校验。例如 prompt 不能为空，长度不能无限制；用户未登录时可以限制调用次数；接口错误时返回统一格式，避免把底层错误完整暴露给前端。

第三步：前端页面如何发送请求

前端只需要维护输入框、加载状态和返回内容。用户点击发送后，用 fetch 请求 /api/chat，把输入内容放在 JSON body 里。收到结果后渲染到页面即可。

对于第一个版本，你可以使用普通非流式返回，这样更容易调试。如果希望体验像 ChatGPT 一样逐字显示，可以在后续改成流式响应。Next.js 支持 ReadableStream，OpenAI SDK 也支持 stream 模式。流式输出的好处是用户不用等待完整答案生成完毕，体感速度会更快。

第四步：提示词设计与上下文管理

很多新手以为接入 LLM 就是把用户输入原样发给模型，但实际产品中通常需要加系统提示词。系统提示词可以定义模型身份、回答风格、输出格式和边界。例如你可以要求模型用简体中文回答、避免编造、不确定时说明原因，或输出 JSON 结构。

如果你在做聊天应用，还需要管理历史消息。不要无限制把所有历史都传给模型，否则成本会快速上升。更好的策略是只保留最近几轮对话，或把长历史总结成摘要，再作为上下文传入。对于知识库问答，可以结合向量检索，只把最相关的文档片段传给模型。

第五步：成本、安全与上线建议

LLM 应用上线后，成本控制非常重要。59API 的优势在于低价、按量付费，并且兼容常见 SDK，迁移成本低。你可以先用便宜模型验证产品，再为高价值场景切换更强模型。对于创业项目或独立开发者，这种灵活性非常实用。如果你准备开始测试，可以注册 59API，先用少量预算跑通完整链路。

• 限制输入长度：防止用户提交超长文本导致费用异常。
• 设置 max_tokens：控制每次响应的最大输出。
• 增加频率限制：按 IP、用户 ID 或会话限制请求次数。
• 记录用量日志：保存模型、tokens、耗时和错误，便于优化。
• 密钥仅放服务端：不要把 API Key 写进前端代码或公开仓库。

最后，建议把模型调用封装成独立模块，而不是散落在多个接口里。这样当你需要从 GPT 切换到 Claude，或从测试模型切换到生产模型时，只需要改一个地方。Next.js 加上 59API 的组合，适合快速构建聊天机器人、代码助手、内容生成工具、数据分析助手和内部知识库等 AI 功能。先做一个简单、稳定、可监控的版本，再逐步增加流式输出、用户权限、知识库检索和多模型路由，会比一开始追求复杂架构更容易成功。

Pricing · Docs