web

FIrebase v9 + Next.js + Vercelの初期化でハマったところ

公開日:2021年11月14日
最終更新日:2021年11月27日

Firebaseがv9になり、必要なものだけをインポートするようになり、パフォーマンスやサイズが改善されたようです。
ただ、書きかたが少し変わったことで、初期化にちょっとハマったところがありました。

ちなみにCOMPATというv8の書き方のままv9にアップデートする方法もありますが、この方法だとパフォーマンスやサイズの恩恵が受けられないですし、将来的には完全に使えなくなる予定なので、できれば今のうちにv9の書き方にしておきたいです。

v8での初期化

以下のように書いてました。windowについては、Next.jsのサーバーサイド処理で、ブラウザ側にしかないグローバルオブジェクトのwindowが参照できないとエラーになるため条件に書いています。firebase.apps.length === 0 は、複数回初期化してエラーになるのを防ぎます。

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

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  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 (typeof window !== 'undefined' && firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig)
  firebase.analytics()
}


v9での書き方

以下のように変えました。v8でやっていた複数回初期化エラーの回避のために何を使ったらいいのか分かりませんでしたが、getAppsでいけました。

import { initializeApp, getApps, FirebaseApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, Firestore } from 'firebase/firestore'
import {
  getAuth,
  Auth,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  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,
};

let firebaseApp: FirebaseApp;
let auth: Auth;
let firestore: Firestore

if (typeof window !== "undefined" && !getApps().length) {
  firebaseApp = initializeApp(firebaseConfig);
  auth = getAuth();
  firestore = getFirestore()
}
export { firebaseApp, auth, firestore };


参考サイト

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記