NextJS: How to correctly add firebase analytics to NextJS app

user_5989199 0
Viewed 3794

I have a react/nextjs app and I have firebase.js as follow:

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/firestore'

const firebaseConfig = {
  apiKey: '...'
}
try {
  firebase.initializeApp(firebaseConfig)
  firebase.analytics()
} catch (err) {
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack)
  }
}

export default firebase

I kept getting

Firebase initialization error ReferenceError: navigator is not defined

after adding analytics to the firebase.js file. What is the correct way to add analytics to the app?

google-cloud-firestore vue.js next.js reactjs javascript
5 Answers
import { getAnalytics, isSupported } from "firebase/analytics";

const analytics = isSupported().then(yes => yes ? getAnalytics(app) : null);
user_118575170

Try this one

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import "firebase/storage"
import "firebase/analytics"

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
}
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

// Auth export
export const auth = firebase.auth()

// Firestore exports
export const firestore = firebase.firestore()
export const serverTimestamp = firebase.firestore.FieldValue.serverTimestamp
export const fbTimestamp = firebase.firestore.Timestamp
export const fromMillis = firebase.firestore.Timestamp.fromMillis
export const increment = firebase.firestore.FieldValue.increment

// Storage exports
export const storage = firebase.storage()

export const analytics = () => {
  if (typeof window !== "undefined") {
    return firebase.analytics()
  } else {
    return null
  }
}
export default firebase
user_132652290

ReferenceError: navigator is not defined because there is no window object present during the server-side rendering of the Nextjs application.

Try:

if(typeof window != undefined){
     firebase.analytics()
}
user_154220110

Try this configuration

import firebase from 'firebase/app';

const config = {
 ...your firebase config
};

const initializeFirebaseApp = () => {
  if (!firebase.apps.length) {
    return firebase.initializeApp(config);
  }

  return firebase.app();
};

const firebaseApp = initializeFirebaseApp();

export { firebaseApp };
user_44206610

I just updated my firebase to version 9 and this error is not seen.

Update to version 9 could be a solution to this.

But for version 9, there are some changes in firebase declaration.

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
user_59891990
Related