環境変数とNEXT_PUBLIC

なぜ学ぶか： 「あるキーはブラウザに見えてよく、あるキーは絶対に見えてはいけない」— Next.jsはこの区別をNEXT_PUBLIC_という名前の頭で行います。取り違えると即、秘密の漏えい事故。数少ない「事故直結ルール」なので、例で確実に覚えてください。

まずはこの例を見てみましょう

# .env.local（環境変数を書くファイル。Git には入れない）

API_SECRET=sk-xxxx             ← 無印 = サーバー専用（ブラウザから見えない）

NEXT_PUBLIC_APP_URL=https://…  ← NEXT_PUBLIC_ = ブラウザに埋め込まれる
                                  （＝世界中の誰でも見られる！）

NEXT_PUBLIC_を付ける＝「全世界に公開してよい」という宣言。秘密のキーには絶対に付けません。

コード例

// ===== .env.local（Git には入れない）=====
// API_SECRET=sk-very-secret-key
// NEXT_PUBLIC_APP_URL=https://learn.example.com

// ===== サーバー側（Route Handler など）=====
export async function GET() {
  const secret = process.env.API_SECRET; // ✓ サーバーでだけ読める
  console.log("キー設定済み:", Boolean(secret));
  return Response.json({ ok: true });
}

// ===== ブラウザ側（'use client'）=====
// const url = process.env.NEXT_PUBLIC_APP_URL; // ✓ 公開前提の値のみ OK
// const leak = process.env.API_SECRET;         // ✗ 読めない（かつ設計ミス）

迷ったら無印（サーバー専用）が安全側です。公開は後からでもできますが、漏れたキーは取り消せません。