如何修复NextJS+Firebase应用中的FirebaseError: auth/invalid-api-key错误

在尝试将Firebase集成到NextJS应用时，我遇到了错误。为让您更好了解情况，提供以下细节：项目用.env文件存储Firebase配置，但即使正确添加配置，错误仍出现。

.env文件配置内容 #

NEXT_API_KEY='AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxvKyKqZtM'
NEXT_AUTH_DOMAIN='tixxxxxxxxxxxxxxxcom'
NEXT_PROJECT_ID='tixxxxxxxxxxx'
NEXT_STORAGE_BUCKET='tixxxxxxxxxxxxcom'
NEXT_MESSAGING_SENDER_ID='3855xxxxxxxx91'
NEXT_APP_ID='1:385xxxxxxxabf6'
NEXT_MEASUREMENT_ID='GxxxxxF'

集成代码 #

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";


const firebaseConfig = {
    apiKey: process.env.NEXT_API_KEY,
    authDomain: process.env.NEXT_AUTH_DOMAIN,
    projectId: process.env.NEXT_PROJECT_ID,
    storageBucket: process.env.NEXT_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_APP_ID,
    measurementId: process.env.NEXT_MEASUREMENT_ID,
};

console.log(firebaseConfig);
const firebase = initializeApp(firebaseConfig);
export const auth = getAuth(firebase);

export const googleProvider = new GoogleAuthProvider();

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