【Next.js】firebase.jsやNEXT_PUBLIC_, process.env.とは何か？.env.localの環境変数を読み込む方法

Next.jsでFirebaseを導入する場合に必ず必要になるのが「環境変数の設定」です。

その際、firebase.jsというファイルを使います。みなさんこのファイルに直接環境変数の値を記述していませんか？実はそれはかなり危険です。

アプリのセキュリティを守るために、.env.localにAPIキーを書き、process.env.で呼び出し、さらに接頭辞としてNEXT_PUBLIC_をつけるというルールがあります。

本記事では、Next.jsでFirebaseを接続するためのfirebase.jsの役割から、環境変数を安全に扱うための仕組みまでを、わかりやすく解説しています。

「なぜ直接APIキーを書いてはいけないのか？」「なぜ接頭辞が必要なのか？」といった疑問を解消し、自信を持って初期設定を完了できるようになります。

firebase.jsとは何か？
なぜ.env.localを使うか？
1. セキュリティ対策
2. .env.localの書き方（NEXT_PUBLIC_）
firebase.jsでの読込み（process.env.）

firebase.jsとは何か？

firebase.jsの役割

FirebaseはGoogleのサーバー上にあります。

このため作成したNext.jsアプリからそのサーバーを操作するためには、「APIキー」を伝えたり、「どの機能（ログインやデータベース）を使うか」を宣言したりする必要があります。

それを一箇所にまとめたのが firebase.jsファイルです。

ファイルの保存場所

firebase.jsは「lib」というディレクトリ（libraryの略）を作成しその中に配置することが一般的です。

他にもsrcディレクトリの中に配置することもあります。

プロジェクトの起動時に自動で読み込むわけではなく、各コンポーネントなどでimportの記述があったときに読み込みます。

firebase.jsの中身

中身は大きく分けて3つのステップで構成されています。

道具のインポート
Firebaseの公式ライブラリから必要な機能（ログイン用、データベース用など）を取り出す。
環境変数の準備
.env.local から読み込んだAPIキーなどをまとめる。
初期化とエクスポート
Firebaseを起動し、他のファイルでも使えるように export（貸し出し）する。

例えば、Firebaseの認証 Authenticationを使いたい場合は以下のように記述します。

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Firebaseの設定を環境変数から読み込む
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,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// サーバーサイドでの二重初期化を防ぐための記述
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

const auth = getAuth(app);

export { app, auth };

ログインページ（pages/logoin.js）など認証機能を使いたいページで対象の変数をimportします。

import { auth } from "../lib/firebase";

必要な環境変数

firebaes.jsには以下の6つの環境変数を記述します。

# すべてに NEXT_PUBLIC_ をつける（※後述）
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

変数名	必須	概要
API_KEY	必須	どの「プロジェクト」にアクセスするかを証明する通行証。
PROJECT_ID	必須	Firebase内でのあなたのプロジェクト固有の名前。
AUTH_DOMAIN		ログイン機能（Auth）を使う場合。認証用ドメイン。
STORAGE_BUCKET		Storageを使う場合。画像やファイルを保存する「倉庫」の住所。
MESSAGING_SENDER_ID		通知機能（Cloud Messaging）を使う場合。送信者識別子。
APP_ID	必須	プロジェクト内の「Webアプリ」を特定するID。

各値の確認方法

Firebaseにログインして対象のアプリを開きます。

左上の「歯車アイコン＞プロジェクトの設定」をクリックします。

ウェブアプリの中にコードがあり、その中に各値が設定されています。

なぜ.env.localを使うか？

セキュリティ対策

Next.jsで環境変数を安全かつ正しく扱う方法は、開発を進める上で非常に重要です。特にFirebaseのような外部サービスを使う場合、設定値をfirebase.jsに直接入力（ハードコード）せず、.env.localファイルで管理するのが標準的なルールです。

.env.localとは何か？

.env.localとは何かについては下記をご参照ください。

＞ .envと.env.localの違い｜どちらを使うべきか？環境変数の優先順位や書き方・使い方を実例で分かりやすく解説(env.example, .env.development, .env.production)

.env.localの書き方（NEXT_PUBLIC_）

ルートディレクトリに.env.localと言う名前のファイルを作成します。

なお、Next.jsで環境変数を定義する際、ブラウザ（クライアント側）で読み込みたい変数には必ず NEXT_PUBLIC_ という接頭辞をつける必要があります。

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

Next.jsはセキュリティのため、デフォルトでは環境変数をサーバーサイドでしか読み取れないようにしています。

しかし、FirebaseのSDKは通常ブラウザ（クライアント）で動作するため、この接頭辞をつけることで「これはブラウザに公開しても良い変数ですよ」とNext.jsに教えてあげる必要があります。

firebase.jsでの読込み（process.env.）

コード実例

.env.localファイルに記述した環境変数を読み込むには process.env.変数名 という形式で記述します。

例えば、Firebase Authentication（認証）とFirestore（NoSQLデータベース）を使いたい場合は、冒頭でimportします。

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Firebaseの設定を環境変数から読み込む
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,
};

// サーバーサイドでの二重初期化を防ぐための記述
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

const auth = getAuth(app);
const db = getFirestore(app);

export { app, auth, db };