I am working on a next js project. I want to use firestore in my project. So as the process I am initializing firebase app and firestore in one of my file and using them in another service file. But If I use env variable to initialize my firebase app, then it's not working.

Here is my project file structure:

On firebase/firebaseClient.js, I am initializing my firebase app. If I use the value directly then it's working. If I use env variable then It's not working.

firebase/firebaseClient.js:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// This not working. Value in the env file is the same
const firebaseConfig = {
  apiKey: process.env.FIREBASE_CLIENT_API_KEY,
  authDomain: process.env.FIREBASE_CLIENT_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_CLIENT_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_CLIENT_MESSAGIN_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_CLIENT_MEASUREMENT_ID,
};

// This is working
const firebaseConfig = {
  apiKey: "MY_API_KEY",
  authDomain: "MY_AUTHDOMAIN",
  projectId: "MY_PROJECT_ID",
  storageBucket: "MY_STORAGE_BUCKET",
  messagingSenderId: "MY_MESSAGIN_SENDER_ID",
  appId: "MY_APP_ID",
  measurementId: "MY_MEASUREMENT_ID",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

And then in service/appContent.js I am fetching data using this code:

import { initializeApp } from "firebase/app";
import { collection, getDocs } from "firebase/firestore";
import { db } from "../firebase/firebaseClient";

export const getAppContent = async () => {
  const contentQuery = collection(db, "/shop/app-design/content");
  const contentData = await getDocs(contentQuery);
  const data = contentData.docs.map((doc) => doc.data());
  return data;
};

When using env variable to initialize firebase app, I am getting this error: