Next.jsでFirebase Local Emulatorを使う

Firebase Local Emulator Suiteを使うとローカルでFirestoreやAuthが使えるようになる。

公式ドキュメントのサンプルだと location.hostname の値を元に useEmulator の切り替えを行っていたが、よりシンプルにして NEXT_PUBLIC_USE_FIREBASE_EMULATOR 環境変数がtrueの場合はEmulatorを利用するようにした。

• lib/firebaseHelpers.ts

import 'firebase/firestore'

import firebase from 'firebase/app'

const isEmulator = () => {
  const useEmulator = process.env.NEXT_PUBLIC_USE_FIREBASE_EMULATOR
  return !!(useEmulator && useEmulator === 'true')
}

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_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,
}

export function getApp() {
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)

    if (isEmulator()) {
      firebase.firestore().useEmulator('localhost', 8080)
    }
  } else {
    firebase.app()
  }

  return firebase
}

export function getFirestore() {
  return getApp().firestore()
}

export function getFunctions() {
  const region = isEmulator() ? undefined : 'asia-northeast1'
  return getApp().functions(region)
}

• export NEXT_PUBLIC_USE_FIREBASE_EMULATOR=true を設定し、別ターミナルでEmulatorを起動しておけばFirestore Emulatorに接続される

yarn run firebase emulators:start