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

## 目次
1. [環境変数を .env ファイルなしで設定する理由](#1-環境変数を-env-ファイルなしで設定する理由)
2. [Firebase の環境変数設定](#2-firebase-の環境変数設定)
   1. [apphosting.yaml の設定](#21-apphostingyaml-の設定)
3. [Next.js のフロントエンドで環境変数を取得](#3-nextjs-のフロントエンドで環境変数を取得)
4. [まとめ](#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` に環境変数を設定します。

![img](/mosaic-code.jpg)

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

---

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

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

![img](/mosaic-code.jpg)

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

---

## 4. まとめ

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

✅ **Firebase の環境変数管理を使うメリット**
- **セキュア** に環境変数を管理
- **ローカルと本番環境で一貫した管理が可能**

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


[cv:issue_marketplace_engineer]



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

## 目次
1. [環境変数を .env ファイルなしで設定する理由](#1-環境変数を-env-ファイルなしで設定する理由)
2. [Firebase の環境変数設定](#2-firebase-の環境変数設定)
   1. [apphosting.yaml の設定](#21-apphostingyaml-の設定)
3. [Next.js のフロントエンドで環境変数を取得](#3-nextjs-のフロントエンドで環境変数を取得)
4. [まとめ](#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` に環境変数を設定します。

```yaml
env:
  - variable: NEXT_PUBLIC_API_KEY
    value: "your-api-key"
```

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

---

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

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

```javascript
// pages/index.js
export default function HomePage() {
  console.log('API Key:', process.env.NEXT_PUBLIC_API_KEY);
  return <h1>Home</h1>;
}
```

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

---

## 4. まとめ

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

✅ **Firebase の環境変数管理を使うメリット**
- **セキュア** に環境変数を管理
- **ローカルと本番環境で一貫した管理が可能**

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


[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)



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

目次

続きを読むには単価診断を受けてください 30秒