如何在Firebase Hosting中使用Next.js的.env环境变量？

核心问题 #

Firebase Hosting不会自动读取本地的.env文件，必须通过Firebase配置系统注入环境变量，或在构建Next.js时主动传入变量。

方法一：通过Firebase CLI配置项目环境变量 #

• 确保已安装Firebase CLI并完成登录：

  npm install -g firebase-tools
  firebase login
  

• 进入项目根目录，逐个配置环境变量（替换引号内的实际值）：

  firebase functions:config:set next.env.NEXT_PUBLIC_MONGO_URI="你的MongoDB地址"
  firebase functions:config:set next.env.NEXT_PUBLIC_MORALIS_API_KEY="你的Moralis密钥"
  firebase functions:config:set next.env.NEXT_PUBLIC_ALCHEMY_API_KEY="你的Alchemy密钥"
  firebase functions:config:set next.env.NEXT_PUBLIC_NEXTAUTH_SECRET="你的NextAuth密钥"
  firebase functions:config:set next.env.NEXT_PUBLIC_FIREBASE_STORAGE_URL="你的Firebase存储地址"
  

• 在项目根目录创建/修改next.config.js，添加代码读取Firebase配置：

  const { getFirebaseConfig } = require('firebase-functions/v1/config');
  
  module.exports = async () => {
    const firebaseConfig = await getFirebaseConfig();
    return {
      env: {
        NEXT_PUBLIC_MONGO_URI: firebaseConfig.next.env.NEXT_PUBLIC_MONGO_URI,
        NEXT_PUBLIC_MORALIS_API_KEY: firebaseConfig.next.env.NEXT_PUBLIC_MORALIS_API_KEY,
        NEXT_PUBLIC_ALCHEMY_API_KEY: firebaseConfig.next.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
        NEXT_PUBLIC_NEXTAUTH_SECRET: firebaseConfig.next.env.NEXT_PUBLIC_NEXTAUTH_SECRET,
        NEXT_PUBLIC_FIREBASE_STORAGE_URL: firebaseConfig.next.env.NEXT_PUBLIC_FIREBASE_STORAGE_URL,
      },
    };
  };
  

• 重新构建并部署：

  npm run build
  firebase deploy
  

方法二：构建时直接注入环境变量 #

若不想依赖Firebase配置系统，可在构建Next.js时手动传入环境变量：

• 修改package.json中的build命令，将环境变量前置：

  "scripts": {
    "build": "NEXT_PUBLIC_MONGO_URI='你的MongoDB地址' NEXT_PUBLIC_MORALIS_API_KEY='你的Moralis密钥' NEXT_PUBLIC_ALCHEMY_API_KEY='你的Alchemy密钥' NEXT_PUBLIC_NEXTAUTH_SECRET='你的NextAuth密钥' NEXT_PUBLIC_FIREBASE_STORAGE_URL='你的Firebase存储地址' next build",
    "deploy": "npm run build && firebase deploy"
  }
  

• 执行npm run deploy完成构建与部署。

注意事项 #

• NEXT_PUBLIC_前缀的变量会被嵌入客户端代码，不要将敏感信息（如NEXTAUTH_SECRET）加入此前缀，建议改为服务端专属变量（去掉前缀）仅在服务端逻辑中使用。
• 禁止将.env文件上传至版本控制系统，始终通过上述方式注入变量。

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