How to fetch data from Firebase in getServerSideProps with NextJs

Question

I am trying to figure out how to fetch data from Firebase inside GetServerSideProps in NextJs

Here is my db file

import admin from "firebase-admin";
import serviceAccount from "./serviceAccountKey.json";

if (!admin.apps.length) {
  try {
    admin.initializeApp({
      credential: admin.credential.cert(serviceAccount),
    });
  } catch (error) {
    console.log("Firebase admin initialization error", error.stack);
  }
}
export default admin.firestore();

Then inside getServerSideProps

export async function getServerSideProps(context) {
  const id = context.params.profileId;
  const doc = await db.collection("profile").doc(id).get();
  const profile = doc.data();
  return {
    props: { profile },
  };
}

Getting the following error

error - ./node_modules/@google-cloud/storage/build/src/bucket.js:21:0
Module not found: Can't resolve 'fs'

Is there another way to call firebase without using the Node Library that relies on the filesystem? Or is there a way around this?

Thanks.

Answer 1

If you are using firebase-admin, you can use only in api functions. you cannot even import it on the client side. It needs to access to fs module which is not available on client side. If you need firebase in client side use @firebase/app npm module.

import { initializeApp, getApps } from 'firebase/app'
import { getAnalytics } from 'firebase/analytics'
export const createFirebaseApp = () => {
  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,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
  }

  if (getApps().length <= 0) {
    const app = initializeApp(clientCredentials)
    // Check that `window` is in scope for the analytics module!
    if (typeof window !== 'undefined') {
      // Enable analytics. https://firebase.google.com/docs/analytics/get-started
      if ('measurementId' in clientCredentials) {
        getAnalytics()
      }
    }
    return app
  }
}

you can have two separate firebase config files. One for client side as above, another one is using firebase-admin as you defined