Firebase App Hosting 上の Next.js で環境変数を取得する方法（.env ファイルなし）

目次

1. 環境変数を .env ファイルなしで設定する理由
2. Firebase の環境変数設定
   1. apphosting.yaml の設定
3. Next.js のフロントエンドで環境変数を取得
4. まとめ

---

1. 環境変数を .env ファイルなしで設定する理由

Next.js では通常 .env ファイルを利用して環境変数を設定しますが、Firebase App Hosting を利用する場合、 .env ファイルを使わず Firebase の設定 を活用することで、よりシンプルに管理が可能です。

.env ファイルを使わないメリット

• 環境変数の漏洩リスクを低減
• Firebase の 環境変数設定 を利用して簡単に管理
• 環境変数の変更が簡単（Firebase に直接設定）

---

2. Firebase の環境変数設定

Next.js のプロジェクト内で Firebase に環境変数を適用するために、構成ファイルを設定します。

2.1 apphosting.yaml の設定

Firebase App Hosting の apphosting.yaml に環境変数を設定します。

この設定により、環境変数 NEXT_PUBLIC_API_KEY はフロントエンドで利用可能になります。

---

3. Next.js のフロントエンドで環境変数を取得

Next.js のフロントエンドでは、process.env.NEXT_PUBLIC_API_KEY を利用して環境変数を取得できます。

この方法により、フロントエンドで apphosting.yaml に設定された環境変数を利用できます。

---

4. まとめ

.env ファイルを使用せず、 Firebase App Hosting の apphosting.yaml を利用して Next.js の環境変数を管理する方法を解説しました。

✅ Firebase の環境変数管理を使うメリット

• セキュア に環境変数を管理
• ローカルと本番環境で一貫した管理が可能

Firebase App Hosting を活用する際は、 apphosting.yaml に NEXT_PUBLIC_ 接頭辞の環境変数を設定するのが推奨されます！

[cv:issue_marketplace_engineer]