使用firebase创建NextJS应用程序在本地运行，但在vercel生产中失败

Question

我在NextJs本地使用firebase，所有都运行良好

.env.本地

NEXT_PUBLIC_FIREBASE_API_KEY="xxxxxxx"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="yyyyyyy"
NEXT_PUBLIC_FIREBASE_DATABASE_URL="zzzzzzzz"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="xxxxxxx"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="yyyyyyyy"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="zzzzzzzz"
NEXT_PUBLIC_FIREBASE_APP_ID="xxxxxxxx"

clientApp.js

import firebase from "firebase/app";
import "firebase/database";
const clientCredentials = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
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,
};
if (!firebase.apps.length) {
firebase.initializeApp(clientCredentials);
}
export default firebase;

然而，当我通过Vercel部署时，我会收到以下控制台错误：

@firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include  a Project ID when calling firebase.initializeApp(). 
Error: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include  a Project ID when calling firebase.initializeApp(). 

以前有人遇到过类似的错误吗？

Answer 1

您需要将env变量放在verce面板上https://vercel.com/USER-NAME/PROJECT-ID/settings/environment-variables

Answer 2

为了避免所有的麻烦，只需在项目的目录中创建一个.env文件并添加所有凭据。也在文件.firebaserc文件中检查内容是否保持为这样，

{
"projects": {
"default": "your firebase project ID",
"webapp": "your firebase project ID"
}
}

如果你还有什么麻烦，请调查一下https://github.com/vercel/next.js/discussions/14420#discussioncomment-29816