飽き性の頭の中
Next.jsでFirebaseクライアントの初期化、エミュレーターとの切り替えもできるようにのサムネイル

Next.jsでFirebaseクライアントの初期化、エミュレーターとの切り替えもできるように

2023-02-26に公開

IT技術メモ
# Next.js# Firebase

一部を除いて、Next.js に限らず他の構成でも使えるはず。

最終的なクライアントのコード

lib/firebase/client.ts
import { Analytics, getAnalytics } from "firebase/analytics";
import { FirebaseApp, getApp, getApps, initializeApp } from "firebase/app";
import { Auth, connectAuthEmulator, getAuth } from "firebase/auth";
import {
  Firestore,
  connectFirestoreEmulator,
  getFirestore,
} from "firebase/firestore";
import {
  Functions,
  connectFunctionsEmulator,
  getFunctions,
} from "firebase/functions";
import {
  FirebaseStorage,
  connectStorageEmulator,
  getStorage,
} from "firebase/storage";

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

export 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 (!getApps()?.length) {
  initializeApp(firebaseConfig);
}

export const firebaseApp = getApp();
export const firebaseAnalytics =
  typeof window !== "undefined" ? getAnalytics() : undefined;
export const firebaseStore = getFirestore();
export const firebaseStorage = getStorage();
export const firebaseAuth = getAuth();
export const firebaseFuncions = getFunctions();

// emulatorを使う場合はここで設定
if (isEmulator()) {
  connectAuthEmulator(firebaseAuth, "http://localhost:9099");
  connectFunctionsEmulator(firebaseFuncions, "localhost", 5001);
  connectFirestoreEmulator(firebaseStore, "localhost", 8080);
  connectStorageEmulator(firebaseStorage, "localhost", 9199);
}

type FirebaseClient = {
  firebaseApp: FirebaseApp;
  firebaseStore: Firestore;
  firebaseStorage: FirebaseStorage;
  firebaseAuth: Auth;
  firebaseFuncions: Functions;
  firebaseAnalytics?: Analytics;
};

export const firebaseClient: FirebaseClient = {
  firebaseApp,
  firebaseAnalytics,
  firebaseStore,
  firebaseStorage,
  firebaseAuth,
  firebaseFuncions,
};

注意点

  • 環境変数はクライアントサイドレンダリング時にも使えるように、名称をNEXT_PUBLIC_*にする
  • サーバーサイドレンダリング時に実行されるとエラーが出るものには、typeof window !== "undefined"で判定する
Profile picture

たわ / tawachan

1994年生まれ(29歳)

大学院修士課程(政治学)(2021-2023)

Web開発(2017-)

関連記事

タグ一覧

# 福岡:39# 東京:20# 大学院:13# 移住:10# エナジードリンク:9# Google:8# ブロックチェーン:8# Mac:7# Webエンジニア:7# Apple:6# Firebase:6# Sony:6# サントリー:6# Googleフォト:5# インドネシア:5# 埼玉:5# 英語:5# AWS:4# Canon:4# EOS 8000D:4# Kindle:4# Next.js:4# ZONe:4# ラーメン:4# 京都:4# 仮想通貨:4# 社会人:4# 鴨川シーワールド:4# Docker:3# EOS8000D:3# Lightroom:3# Markdown:3# Pixel:3# React Native:3# a7iii:3# d.school:3# iPad:3# iPad mini:3# アマルティア・セン:3# アメリカ:3# コワーキングスペース:3# セブンイレブン:3# デザイン思考:3# レッドブル:3# ワークショップ:3# 卒業旅行:3# 寿司:3# 紅葉:3# 長崎:3# API:2# ECR:2# ERC20:2# Expo.io:2# Firestore:2# Gatsby.js:2# GitHub Actions:2# Google Drive:2# Kindle Oasis:2# Kindle Paperwhite:2# LINE:2# MacBook Pro:2# NestJS:2# Notion:2# Oculus:2# Oculus Quest:2# Pixel Buds:2# React:2# TypeScript:2# Zotero:2# iPhone:2# pandoc:2# re:Invent:2# zsh:2# かき小屋:2# カフェ:2# ギグワーカー:2# サーチコンソール:2# ジャカルタ:2# スターバックス:2# ステーキ:2# スマートウォッチ:2# ソラマチ:2# チョコレート:2# ニューヨーク:2# バリ島:2# パンとエスプレッソと:2# ヒュッゲ:2# ビーチ:2# ブックスタンド:2# ブログ:2# マクドナルド:2# ミズマチ:2# モンスターエナジー:2# ワイヤレスイヤホン:2# 三千院:2# 両国:2# 修士論文:2# 兵庫:2# 千葉:2# 博多:2# 堀江貴文:2# 宮崎:2# 就活:2# 嵐山:2# 川越:2# 広島:2# 新宿御苑:2# 日米学生会議:2# 有馬温泉:2# 東寺:2# 東浩紀:2# 歴史:2# 民主主義:2# 江ノ島:2# 清澄白河:2# 独自ドメイン:2# 神奈川:2# 神戸:2# 転職:2

©2023 tawachan All Rights Reserved.