🚒

Next.js で Firebase セットアップ

2021/06/29に公開

毎度のFirebaseセットアップをこのアウトプット覚える or あとでわからないときにググる代わりに自分で参照するための記事 📝

step1 登録

プロジェクトの作成

プロジェクト名を入力
( . は使用不可)

続行

今のところアナリティクスを使う予定はないので無効にする

プロジェクトを作成

続行

今のところsparkプランのまま使用する

web アプリなら </>

アプリのニックネームを入力

このアプリの Firebase Hosting を設定します vercel がおきになので設定しない

アプリを登録

Firebase SDK の登録 後で貼り付けるために text memo に保存しておく
次へ

コンソールへ進む

step2 Authentication

始める

使いたいログインプロバイダを選択
有効にする
プロジェクトのサポートメールを入力
保存

自分のリポジトリ内 ディレクトリ トップレベル(階層)に.env.localを作成
内容は以下の通り
自分が使用するのは Auth と firestore だけなので内容は以下=の後に値を添付
,""は不要

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

#step3 vercel の Environment Variables を設定する
自分はついでにこのタイミングでデプロイ先の vercel にも同じ値を入力しておく
Overview

対象プロジェクト名をクリック

Setting

Environment Variables

各名前、値ごとに登録
= は不要)
vercel へデプロイするにあたり、 PROJECT_ID APP_ID が必要かどうかは未確認
ひょっとしたら使われないかもしれない

step4

自分のプロジェクトディレクトリに firebase SDK Module をインストール
npm i firebase

以下のディレクトリとファイルを作成
src/service/firebase.js

以下のコードを記述

import firebase from "firebase/app";
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,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);

Discussion