FirebaseError：firebase.initializeApp (NextJS) 中未提供“projectId”

Question

I'm building a web app with NextJS, NextAuth and Firebase/Firestore, and I'm getting an error:

error - [FirebaseError: "projectId" not provided in firebase.initializeApp.] { code: 'invalid-argument', customData: undefined, toString: [Function (anonymous)]

This is my JS file:

import NextAuth from "next-auth/next";
import TwitterProvider from "next-auth/providers/twitter";
import { FirestoreAdapter } from "@next-auth/firebase-adapter";

import { initializeApp, getApp, getApps } from "firebase/app";
import "firebase/auth";
import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";
// import { getAnalytics } from "firebase/analytics";
// import { getStorage } from "firebase/storage";

import nextConfig from "next.config";

const firebaseConfig = {
  apiKey: nextConfig.env.FIREBASE_API_KEY,
  authDomain: nextConfig.env.FIREBASE_AUTH_DOMAIN,
  projectId: nextConfig.env.FIREBASE_PROJECT_ID,
  storageBucket: nextConfig.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: nextConfig.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: nextConfig.env.FIREBASE_APP_ID,
  measurementId: nextConfig.env.FIREBASE_MEASUREMENT_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
//const analytics = getAnalytics(app);
const db = getFirestore(app);
//const storage = getStorage(app);

const dbInstance = collection(db, "bugs");

const getBugs = () => {
  getDocs(dbInstance).then((data) => {
    console.log(data);
  });
};

export default NextAuth({
  providers: [
    TwitterProvider({
      clientId: nextConfig.env.TWITTER_CLIENT_ID,
      clientSecret: nextConfig.env.TWITTER_CLIENT_SECRET,
      version: "2.0", // opt-in to Twitter OAuth 2.0
    }),
  ],
  adapter: FirestoreAdapter(db),
});

I can't find any solution on the inte.net.

Any idea?

Answer 1

In Nextjs, environment variables are only available in the Node.js environment by default, meaning they won't be exposed to the browser.

In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_

Change your firebase config as shown below and also change the firebase env variables in the .env file to use NEXT_PUBLIC_ prefix.

const firebaseConfig = {
  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,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};