【モジュール版】Next.js用Firebase v9の初期化方法

プログラミング

v8用の初期化方法を掲載しているサイトが多いため、自分用のメモを残しておきます。たぶんこれでOK。

firebaseモジュール版の利点

firebaseがv9になり、未使用コードを削除することでコンパイルした時のアプリサイズが最大80%縮小され、パフォーマンスが劇的に向上しました。アプリサイズを抑えるため、アプリをまるっとインポートするのではなく必要なコンポーネントを一つ一つ取得するよう仕様が結構変わっているようです。

コード

import firebase, { initializeApp, getApps } from "firebase/app";
import { getFirestore, collection, getDocs } from "firebase/firestore/lite";
import {　getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const apps = getApps();
if (!apps.length) {
  const app = initializeApp(firebaseConfig);
} else {
  const app = apps[0];
}
const db = getFirestore();
const auth = getAuth();

ネットではv8の記事が多いので、firebase/compat/appでv8の方式で構築した方が楽そうです。

まとめ

ドキュメントを読んでさまざまなプラットフォームに対応できるようにならないとですね（汗）

参考：ウェブサイトで Firebase Authentication を使ってみる（公式ドキュメント）
参考：Firebase 9 & Nuxt.js 🔥
参考：Why the New Firebase Web v9 Modular SDK is a Game-Changer

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事