'NextJS: How to correctly add firebase analytics to NextJS app

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?

Solution 1:^[1]

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

Solution 2:^[2]

import { getAnalytics, isSupported } from "firebase/analytics";

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

Solution 3:^[3]

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()
}

Solution 4:^[4]

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 };

Solution 5:^[5]

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'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Muhammad Shahzad Ali
Solution 2	even0
Solution 3	Travis
Solution 4	Kaushik
Solution 5	Daryl Wong

'NextJS: How to correctly add firebase analytics to NextJS app

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]