Next.js应用无法读取.env.local环境变量求助

问题根源 #

你的Invalid api-key错误主要来自.env.local文件的格式错误，以及部分配置未正确使用环境变量：

• .env.local中多个变量值末尾带了逗号，导致环境变量的值包含无效字符
• 注释格式错误（用了->而非#），可能干扰变量解析
• firebaseApp.ts中仅apiKey用了环境变量，其余配置仍硬编码，后续也可能出问题

修复步骤 #

1. 修正.env.local文件格式 #

把所有变量值末尾的逗号删掉，注释改用#开头，正确格式如下：

NEXT_PUBLIC_FIREBASE_API_KEY=AIkeffkjn-2429434 # some value
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain-value
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id-value
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket-value
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-sender-id-value
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id-value
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret-value
BASEPATH=http://localhost:3000
NEXT_PUBLIC_APP_URL=http://localhost:3000

2. 让firebaseApp.ts全量使用环境变量 #

替换硬编码的配置项，确保所有Firebase参数都从环境变量读取：

import { initializeApp } from '@firebase/app'
import { getAuth, GoogleAuthProvider } from '@firebase/auth'

const app = initializeApp({
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
})

export const auth = getAuth(app)
export const googleProvider = new GoogleAuthProvider()
export default app

3. 重启Next.js开发服务器 #

Next.js不会自动热加载.env.local的修改，必须停止当前服务器后重新运行npm run dev或yarn dev，确保新的环境变量生效。

4. 验证环境变量加载情况 #

可以在firebaseApp.ts中临时添加打印语句，确认环境变量是否正确读取：

console.log('Firebase API Key:', process.env.NEXT_PUBLIC_FIREBASE_API_KEY)

启动服务器后查看控制台输出，确保值是你设置的正确密钥，没有多余逗号或其他无效字符。

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