如何在Next.js的GitHub仓库隐藏API密钥，同时允许开发者开发时使用？

核心逻辑 #

Next.js的环境变量分两类：服务端专属和客户端可访问。不带NEXT_PUBLIC_前缀的变量仅在服务器端代码（服务端组件、API路由、Server Actions）中可用，不会暴露到浏览器；带前缀的会被打包进客户端代码，绝对不能用来存API密钥。我们要利用服务端变量的特性隐藏密钥，同时通过示例文件让贡献者快速配置开发环境。

步骤1：隐藏你的API密钥 #

1. 在项目根目录创建.env.local文件，写入你的API密钥：

   API_KEY=your_real_secret_key
   

2. 打开.gitignore文件，确保添加了.env.local（Next.js默认模板已包含，建议再检查一遍）：

   # Environment variables
   .env.local
   .env.development.local
   .env.test.local
   .env.production.local
   

   这样.env.local不会被提交到GitHub，其他贡献者看不到你的真实密钥。

步骤2：在代码中安全使用密钥 #

• 服务端代码（推荐）：在服务端组件、API路由或Server Actions中直接调用process.env.API_KEY，比如写一个代理API路由app/api/third-party/route.js：

  export async function GET() {
    const response = await fetch('https://third-party-api.com/endpoint', {
      headers: {
        Authorization: `Bearer ${process.env.API_KEY}`
      }
    });
    const data = await response.json();
    return Response.json(data);
  }
  

  客户端代码只需要调用你自己的/api/third-party接口，完全不需要接触真实密钥。

• 禁止直接在客户端用密钥：如果业务必须在客户端处理逻辑，也必须通过服务端中转，绝对不能直接写process.env.API_KEY，防止密钥被浏览器开发者工具捕获。

步骤3：让贡献者在开发环境正常使用 #

1. 创建.env.example文件，列出项目需要的所有环境变量（只写变量名，留空或加提示）：

   # 请复制此文件为.env.local并填入你的API密钥
   API_KEY=your_api_key_here
   

2. 把.env.example提交到GitHub，贡献者克隆仓库后，执行以下命令：

   cp .env.example .env.local
   

   然后在.env.local中填入自己的API密钥（或者你可以提供一个受限的测试密钥，仅限开发环境使用，避免滥用）。

额外注意事项 #

• 部署时（比如用Vercel、Netlify），直接在平台的项目设置里配置环境变量，不需要提交任何.env文件到仓库。
• 永远不要把真实的API密钥硬编码到代码里，哪怕是注释也不行，防止不小心提交泄露。
• 如果是团队协作，可通过加密的共享文档分发测试密钥，不要在GitHub Issues或公开聊天里发送。

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