Next.js与Firebase配置中.env环境变量失效问题求助

核心原因：Next.js客户端环境变量的命名规则 #

Next.js中，客户端组件可访问的环境变量必须以NEXT_PUBLIC_为前缀，普通变量仅能在服务端代码中读取。你的变量前缀为FIREBASE_或FBASE_，客户端组件无法获取到这些值，导致返回undefined。

具体解决步骤 #

1. 修改.env变量命名
   给所有需要在客户端使用的Firebase配置变量加上NEXT_PUBLIC_前缀，示例.env文件内容：

   NEXT_PUBLIC_FIREBASE_APIKEY=你的apiKey值
   NEXT_PUBLIC_FBASE_AUTH_DOMAIN=你的authDomain值
   NEXT_PUBLIC_FBASE_PROJECT_ID=你的projectId值
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=你的storageBucket值
   NEXT_PUBLIC_FBASE_MESSAGING_SENDER_ID=你的messagingSenderId值
   NEXT_PUBLIC_FBASE_APP_ID=你的appId值
   

   • 注意：变量名和值之间不要加空格，不需要给值加引号（除非值包含特殊字符）。

2. 更新代码中的变量引用
   将firebase配置文件里的process.env变量名同步修改为带前缀的版本：

   import { initializeApp } from "firebase/app";
   
   const firebaseConfig = {
     apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
     authDomain: process.env.NEXT_PUBLIC_FBASE_AUTH_DOMAIN,
     projectId: process.env.NEXT_PUBLIC_FBASE_PROJECT_ID,
     storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
     messagingSenderId: process.env.NEXT_PUBLIC_FBASE_MESSAGING_SENDER_ID,
     appId: process.env.NEXT_PUBLIC_FBASE_APP_ID
   };
   
   const firebaseApp = initializeApp(firebaseConfig);
   
   export default firebaseApp
   

3. 重启开发服务器
   修改.env文件后，必须重启Next.js的开发服务器（停止当前npm run dev进程后重新启动），否则新的环境变量不会被加载。

4. 检查细节

   • 确认.env文件放在项目根目录（与package.json、next.config.js同级）；
   • 核对变量名的拼写和大小写，环境变量是严格区分大小写的；
   • 如果你的firebase配置文件被服务端组件单独使用，可保留无前缀变量，但只要被客户端组件导入，就必须使用NEXT_PUBLIC_前缀。

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