Next.js で Firebase セットアップ

毎度の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);