NextJS项目中无法从.env读取环境变量问题求助

1. 给环境变量添加NEXT_PUBLIC_前缀 #

NextJS规定，客户端代码可访问的环境变量必须以NEXT_PUBLIC_开头。你需要修改.env文件的变量名：

NEXT_PUBLIC_FIREBASE_API_KEY="<KEY>"

同步修改Firebase.js中的引用：

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    // 其他Firebase配置项
};

const app = initializeApp(firebaseConfig);

2. 修正.env文件格式 #

• 变量名与值之间不能有空格，比如原配置FIREBASE_API_KEY = "<KEY>"里的空格会导致读取失败，正确格式是NEXT_PUBLIC_FIREBASE_API_KEY="<KEY>"
• 若密钥本身无特殊字符，也可省略引号，直接写NEXT_PUBLIC_FIREBASE_API_KEY=<KEY>

3. 重启NextJS开发服务器 #

修改.env文件后，必须停止当前npm run dev进程并重新启动，否则新的环境变量不会被加载生效。

4. 确认.env文件位置 #

确保.env文件放在项目根目录（与package.json、next.config.js同层级）。如果是分环境配置（如开发环境用.env.development、生产环境用.env.production），同样要放在根目录下。

5. 验证环境变量加载状态 #

可在组件/页面中临时打印变量调试（生产环境请移除该代码）：

console.log(process.env.NEXT_PUBLIC_FIREBASE_API_KEY);

内容的提问来源于stack exchange，提问作者Roshith Krishna P