Next.jsの環境変数の扱い方 — .env.localとNEXT_PUBLIC_の使い分け

はじめに

Next.jsでAPIキーやデータベースの接続情報を扱うとき、環境変数を使います。

重要なのは「どの環境変数がブラウザに公開されるか」を正しく理解することです。誤って設定すると、APIキーが外部に漏れる可能性があります。

---

ファイルの種類と優先度

ファイル	用途	Gitにコミットするか
.env.local	ローカル開発用（最優先）	しない（.gitignoreに追加）
.env.development	開発環境用	してもOK（機密情報を除く）
.env.production	本番環境用	してもOK（機密情報を除く）
.env	全環境共通のデフォルト値	してもOK（機密情報を除く）

.env.localは.gitignoreに自動で追加されるため、APIキーなどの機密情報の保管場所として最適です。

---

NEXT_PUBLIC_の有無で公開範囲が変わる

# .env.local

# サーバーサイドのみ（ブラウザには公開されない）
DATABASE_URL=postgresql://...
SECRET_API_KEY=sk-xxxxxxxxxxxx

# サーバー・クライアント両方（ブラウザに公開される）
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
NEXT_PUBLIC_SITE_NAME=MyApp

プレフィックス	サーバーで使える	ブラウザで使える
NEXT_PUBLIC_あり	○	○
NEXT_PUBLIC_なし	○	✗（undefinedになる）

ルール: 外部に公開してもよい値にだけNEXT_PUBLIC_をつける。

---

サーバーサイドでの使い方

Server ComponentsやRoute HandlersではNEXT_PUBLIC_なしの環境変数も使えます。

// app/api/users/route.ts（サーバーサイド）
export async function GET() {
  const apiKey = process.env.SECRET_API_KEY; // ブラウザには渡らない

  const res = await fetch('https://external-api.com/data', {
    headers: { Authorization: `Bearer ${apiKey}` },
  });
  const data = await res.json();
  return NextResponse.json(data);
}

---

クライアントサイドでの使い方

'use client';

export default function Header() {
  // NEXT_PUBLIC_がついているものだけブラウザで使える
  const siteName = process.env.NEXT_PUBLIC_SITE_NAME;

  return <h1>{siteName}</h1>;
}

---

Vercelでの設定

本番環境（Vercel）では.env.localではなく、Vercelのダッシュボードから環境変数を設定します。

Settings > Environment Variables から追加するだけで、デプロイ時に自動で読み込まれます。

---

まとめ

やること	方法
機密情報の保管	.env.local（Gitにコミットしない）
ブラウザで使う変数	NEXT_PUBLIC_プレフィックスをつける
サーバー専用変数	プレフィックスなし
本番環境の変数設定	Vercelダッシュボードから設定

JavaのSpring Bootでいうapplication.propertiesや@Valueアノテーションに近い役割ですが、Next.jsでは「クライアントに公開するかどうか」を変数名で制御する点が特徴的です。