在Vercel部署Next.js ChatGPT机器人：NEXT_PUBLIC存密钥是否安全？

直接结论 #

用NEXT_PUBLIC_OPEN_API_KEY的方案完全不安全。Next.js中所有以NEXT_PUBLIC_开头的环境变量会被打包到客户端代码中，任何人都可以通过浏览器开发者工具查看前端代码获取你的ChatGPT API密钥，一旦泄露，他人可能滥用密钥产生高额费用。

为什么原来的OPEN_API_KEY不生效？ #

Next.js默认将不带NEXT_PUBLIC_前缀的环境变量限制在服务端运行环境中（比如API路由、服务端组件、getServerSideProps/getStaticProps）。如果你的代码是在客户端组件中直接调用ChatGPT API，客户端环境无法访问OPEN_API_KEY，就会出现找不到密钥的错误。

安全可行的解决方案 #

1. 把ChatGPT API调用移到Next.js服务端API路由 #

创建一个服务端API路由作为中间层，由这个路由负责调用ChatGPT API，前端只需要请求你自己的API路由，避免直接接触密钥。

示例（App Router 写法）

在app/api/chat/route.js中编写：

import { OpenAI } from 'openai';

export async function POST(request) {
  // 从服务端环境变量获取密钥，仅在服务端可见
  const openai = new OpenAI({
    apiKey: process.env.OPEN_API_KEY,
  });

  const { messages } = await request.json();
  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages: messages,
    });
    return Response.json(completion.choices[0].message);
  } catch (error) {
    return Response.json({ error: error.message }, { status: 500 });
  }
}

前端客户端组件中请求这个本地API：

async function sendMessage(messages) {
  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages }),
  });
  return res.json();
}

2. 确保Vercel环境变量配置正确 #

• 进入Vercel项目的Settings > Environment Variables，添加变量OPEN_API_KEY并设置为你的ChatGPT密钥。
• 注意：修改环境变量后需要重新部署项目，Vercel不会自动触发重新构建，旧的构建版本无法读取新的环境变量。

3. 确认环境变量的使用范围 #

• 仅在服务端运行的代码中使用process.env.OPEN_API_KEY，包括：API路由、服务端组件、getServerSideProps（Pages Router）、getStaticProps（Pages Router）。
• 客户端组件中绝对不能直接引用非NEXT_PUBLIC_前缀的环境变量，否则会返回undefined。

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