Next.js内でのFirebaseの初期化

【訂正： 2021/06/14】

初期化方法を訂正いたしました。
クライアント側で必要な初期化方法を掲載していましたが、
今回はSSGをするのでfirebase-adminでの初期化が必要でした。大変失礼いたしました。

詳しくはこちらで説明しています。
https://qiita.com/centerfield77/items/799f2840f48221c2f84d

初期化はfirebase-adminを使います。
firebase-admin は特権環境から Firebase を操作するため、自分で設定したFirestoreのルールに関係なくサーバー側から Firestore にアクセスできます。

firebase-admin を使用するにはまずプロジェクトの設定のサービスアカウントから新しい秘密鍵の生成をクリックし、秘密鍵（json ファイル）をダウンロードします。

※このファイルが外部に漏れたら事故です。

ダウンロードした json ファイルの中にproject_id, client_email, private_keyがあるので、それを.envに追加します。

.env

FIREBASE_PROJECT_ID="***************"
FIREBASE_CLIENT_EMAIL="***************"
FIREBASE_PRIVATE_KEY="***************"

初期化します。

/lib/db.js

import * as admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
    }),
  });
}

export const db = admin.firestore();

今回はfirestoreしか使わないのでfirestoreをdbとしてエクスポートしています。

getStaticProps()内でFirestoreのデータを取得する

Firestoreのデータはとてもシンプルなものを用意しました。

これをgetStaticProps()内で取得しtasksという変数で返して、
それを上に書いてあるfunction Firebase()で受け取りレンダリングします。

/pages/Firebase.js

import { db } from '../lib/db';
import Link from 'next/link';

export default function Firebase({ tasks }) {
  return (
    <>
      <h1>Firebaseのページ</h1>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
      <Link href={`/`}>
        <a>戻る</a>
      </Link>
    </>
  );
}

export async function getStaticProps() {
  const tasks = [];
  const ref = await db.collection('tasks').get();
  ref.docs.map((doc) => {
    const data = { id: doc.id, title: doc.data().title };
    tasks.push(data);
  });
  return {
    props: {
      tasks,
    },
  };
}

ブラウザで確認

問題なくFirestoreのデータが表示されてることを確認できました。

補足：Vercelでデプロイする場合

Vercel上でも環境変数の設定をする必要があります。

プロジェクトを選択 → Settings → Environment Variables
Plaintextにチェックを入れて一つずつ追加していきます。

これでVercel上でビルドする際にもFirebaseの情報を取得できるようになります。
デプロイ後に本番環境でも問題なく閲覧できていることを確認できました。

Next.jsでFirestoreのデータをSSGする

Next.js内でのFirebaseの初期化

【訂正： 2021/06/14】

getStaticProps()内でFirestoreのデータを取得する

ブラウザで確認

補足：Vercelでデプロイする場合