環境変数

アプリケーションを作っていると、「APIキー」や「データベースのパスワード」といった、 外部には絶対に漏らしたくない秘密の情報 や、「開発環境」と「本番環境」で切り替えたい設定値が出てきます。
これらを管理するために使われるのが 「環境変数 (Environment Variables)」 です。

環境変数とは？

コードの中に直接値（ハードコーディング）を書くのではなく、外部のファイル（.env）などに値を定義しておき、プログラムからその値を読み込んで使う仕組みのことです。

メリット:

セキュリティ : APIキーやパスワードなどをコードから分離できる（Gitにコミットしないようにできる）。
柔軟性 : 開発用、テスト用、本番用で異なる値に切り替えやすい。

Next.js での環境変数の使い方

Next.js では、プロジェクトのルートディレクトリに .env ファイルを作るだけで簡単に環境変数が使えます。

1. サーバーサイドでのみ使う（秘密情報）

APIキーやDBパスワードなど、サーバー側でのみ必要な情報は、そのまま変数名を定義します。

.env# サーバー側でのみ参照可能（安全）
API_SECRET_KEY=my_secret_password_123
DB_HOST=localhost

これらの値は、Next.js のコード（サーバーコンポーネントや API Routes）内から process.env.変数名 でアクセスできます。

app/page.tsxexport default function Page() {
  // サーバー側なので値が取れる
  console.log(process.env.API_SECRET_KEY);

  return <h1>Check Console</h1>;
}

注意:
クライアントコンポーネント（"use client"）やブラウザのコンソールで process.env.API_SECRET_KEY を見ようとしても、undefined になります。これは、秘密情報がブラウザに漏れないようにするための Next.js の安全装置です。

2. ブラウザ（クライアント）でも使う（公開情報）

Google Analytics の ID や、公開APIのURLなど、ブラウザ側（JavaScript）でも使いたい値には、 NEXT_PUBLIC_ という接頭辞を付けます。

.env# ブラウザ側にも公開される
NEXT_PUBLIC_ANALYTICS_ID=UA-12345678-9
NEXT_PUBLIC_API_URL=https://api.example.com

これで、NEXT_PUBLIC_ANALYTICS_ID は use client なコンポーネントを含め、どこからでも参照できるようになります。

app/analytics.tsx"use client";

export default function Analytics() {
  // NEXT_PUBLIC_ がついているのでブラウザでも参照可能
  const id = process.env.NEXT_PUBLIC_ANALYTICS_ID;

  return <div>Analytics ID: {id}</div>;
}

`.env` ファイルの使い分け

Next.js では、環境や用途に応じて複数の .env ファイルを読み込む優先順位が決まっています。

.env.local : 最優先 。個人の開発環境用。 Gitの管理外（.gitignore）にするべきファイル 。秘密情報はここに書くことが多いです。
.env.production : npm run build / start 時（本番環境）に使われる。
.env.development : npm run dev 時（開発環境）に使われる。
.env : すべての環境で共通のデフォルト値。Gitにコミットしても良い（秘密情報は書かない）。 おすすめの運用: - 共通の設定は .env に書く。

秘密のキーや、開発者ごとに変えたい設定は .env.local に書き、.gitignore に含める。

まとめ

process.env.変数名 : サーバーサイド専用（安全）。
process.env.NEXT_PUBLIC_変数名 : ブラウザにも公開（公開しても良い情報のみ）。
.env.local : 秘密情報を書く場所（Gitに上げない）。

適切に環境変数を使い分けて、安全で管理しやすいアプリケーションを作りましょう。
次章では、バックエンドの機能を作成できる「API Routes」について解説します。

更新履歴

2025-01-04 : ページのレイアウト崩れ・誤字を修正しました。