使用Next.js和Vercel隐藏API密钥的最简方案

核心思路 #

利用Next.js自带的API路由作为轻量后端层，前端仅调用这个内部接口，由接口代发请求到OpenAI API，密钥通过Vercel环境变量存储，完全不会暴露在浏览器中。

步骤1：配置Vercel环境变量 #

1. 打开你的Vercel项目后台，进入「Settings」→「Environment Variables」
2. 添加变量OPENAI_API_KEY，值为你的OpenAI密钥
3. 点击「Save」，部署时Vercel会自动将这个变量注入到后端环境

步骤2：创建Next.js API路由 #

在项目根目录的pages/api文件夹下新建文件（比如openai.js），这就是你的后端接口：

import { OpenAI } from "openai";

export default async function handler(req, res) {
  // 仅允许POST请求
  if (req.method !== "POST") {
    return res.status(405).json({ error: "仅支持POST请求" });
  }

  // 初始化OpenAI客户端，使用环境变量中的密钥
  const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  });

  try {
    // 转发前端请求参数到OpenAI API
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: req.body.messages,
    });

    // 返回OpenAI的响应给前端
    res.status(200).json(response);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

步骤3：前端调用内部API #

在你的React组件中，直接调用这个内部接口，无需接触OpenAI密钥：

async function sendChatMessage(userInput) {
  try {
    const response = await fetch("/api/openai", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        messages: [{ role: "user", content: userInput }],
      }),
    });

    const data = await response.json();
    // 处理返回的AI回复
    console.log(data.choices[0].message.content);
  } catch (error) {
    console.error("请求失败:", error);
  }
}

为什么这是超轻量方案？ #

• 无需额外搭建独立后端服务，Next.js API路由直接部署在Vercel，和前端同域，无跨域问题
• 环境变量由Vercel安全管理，仅后端代码可访问，前端完全接触不到密钥
• 代码量极少，逻辑清晰，无需复杂配置

注意事项 #

• 绝对不要在前端组件、getStaticProps等前端可访问的代码中使用process.env.OPENAI_API_KEY，这类代码会被打包到前端资源中，导致密钥暴露
• 如果需要使用其他OpenAI接口（比如图片生成），只需修改API路由中的请求逻辑即可

内容的提问来源于stack exchange，提问作者William Jin