【Next.js+Firebase】Firebase Confingの読み込みに苦労していませんか

firebase config

firebaseでwebアプリを作成する際、設定値として以下のスニペットでSDKを初期化すると思います。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

ただ、これかなり面倒です。
クライアントに露出するキーなのでセキュリティ上の懸念は少ないですが、環境ごとに異なる値なので直書きすることは行儀がよくないです。
そのため、環境変数を使用して渡すことになりますが、以下のような設定方法はあまりスマートに見えません。

NEXT_PUBLIC_FIREBASE_APIKEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STRAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MASSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...

これを回避するために、JSONとして渡す方法があり、この方法を使用している方も多いのではないでしょうか。

NEXT_PUBLIC_FIREBASE_WEBAPP_CONFIG='{"apiKey":"...","appId":"...","authDomain":"...","databaseURL":"","messagingSenderId":"...","projectId":"...","storageBucket":"..."}'

これなら楽そうです。
環境変数として管理する値は一つになりました。

しかし、Firebase App Hostingを使用する場合はまた別の方法があります。

App Hostingのビルド変数を使用する

Firebase App Hostingでは内部的にcloud buildを使用しています。
その際のログを見てみると、FIREBASE_WEBAPP_CONFIGがビルド時のみ有効になっています。
つまり、これを読み込むことができれば、デプロイ環境でのシークレット管理をゼロにできます。

2025/03/27 00:00:00 Final build schema:
runConfig:
  cpu: 1
  memoryMiB: 512
  concurrency: 80
  maxInstances: 1
  minInstances: 0
  vpcAccess: null
env:
- variable: FIREBASE_CONFIG
  value: '{"databaseURL":"","projectId":"...","storageBucket":"..."}'
  availability:
  - BUILD
  - RUNTIME
- variable: FIREBASE_WEBAPP_CONFIG
  value: '{"apiKey":"...","appId":"...","authDomain":"...","databaseURL":"","messagingSenderId":"...","projectId":"...","storageBucket":"..."}'
  availability:
  - BUILD
metadata:
  adapterPackageName: '@apphosting/adapter-nextjs'
  adapterVersion: 14.0.12
  framework: nextjs
  frameworkVersion: 15.2.3

この機能については公式でもほとんど言及されていません。

NEXT_PUBLICでない環境変数をクライアントサイドで利用する

next.config.tsを変更する。

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  env: {
    FIREBASE_WEBAPP_CONFIG: process.env.FIREBASE_WEBAPP_CONFIG,
  },
};

export default nextConfig;

呼び出し例（クライアントコード）
ローカル開発をしないと割り切っている場合はinitializeAppを引数なしで呼び出せます

import { initializeApp } from "firebase/app";
const firebaseConfig = JSON.parse(process.env.FIREBASE_WEBAPP_CONFIG || "");
export const app = initializeApp(firebaseConfig);

まとめ

• Firebaseの設定値を .env に NEXT_PUBLIC_ 付きで並べるのは管理が大変
• JSON形式で1つの環境変数にまとめるとスッキリする
• Firebase App Hosting を使う場合は FIREBASE_WEBAPP_CONFIG をそのまま使うのがベスト
• next.config.ts に FIREBASE_WEBAPP_CONFIG をセットすれば、クライアント側でも利用可能