NextJS：如何正确地将 Firebase 分析添加到 NextJS 应用程序答案

【问题标题】：NextJS: How to correctly add firebase analytics to NextJS appNextJS：如何正确地将 Firebase 分析添加到 NextJS 应用程序
【发布时间】：2021-06-23 00:27:31
【问题描述】：

我有一个 react/nextjs 应用程序和 firebase.js 如下：

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

我一直得到

Firebase 初始化错误 ReferenceError: navigator is not defined

将分析添加到 firebase.js 文件后。向应用添加分析的正确方法是什么？

【问题讨论】：

我找到了一些可能与您面临的问题相关的社区答案，您能否尝试实施这些答案并检查它是否解决了您面临的问题？这是他们：Community Answer #1，Community Answer #2。
我尝试了#1，但没有成功
#2 怎么样？我相信在 useEffect() 中初始化分析将解决问题。

标签： javascript reactjs vue.js google-cloud-firestore next.js

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

ReferenceError: navigator is not defined 因为在 Nextjs 应用程序的服务器端渲染过程中不存在窗口对象。

试试：

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

【讨论】：

如果这对你有用，我发现一篇文章更深入地讨论了它。 medium.com/wesionary-team/…
我刚试过这个，还是报错。

【解决方案3】：

试试这个配置

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

【讨论】：

我试过了，没能成功。

【解决方案4】：

我刚刚将我的 firebase 更新到版本 9，并且没有看到此错误。

更新到版本 9 可能是解决此问题的方法。

但是对于版本 9，firebase 声明有一些变化。

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

【讨论】：