以下は、該当セクション 「Bundling Environment Variables for the Browser」 の内容を和訳し、Markdown形式で整理したものです。

---

Bundling Environment Variables for the Browser（ブラウザ向け環境変数のバンドル）

概要

NEXT_PUBLIC_ が付いていない環境変数は、Node.js（サーバー側）でのみ利用可能であり、ブラウザ（クライアント側）からはアクセスできません。 (Next.js)

---

ブラウザで環境変数を使う方法

ブラウザで環境変数を使いたい場合、Next.js は以下の仕組みを提供します：

• ビルド時に環境変数の値を JavaScriptバンドルへ埋め込む（インライン化）
• process.env.XXX の参照を 固定値に置き換える

そのためには、環境変数名に NEXT_PUBLIC_ プレフィックスを付けます。 (Next.js)

例

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

// コード内
const id = process.env.NEXT_PUBLIC_ANALYTICS_ID

👉 ビルド時に以下のように変換されるイメージ：

const id = "abcdefghijk"

---

ポイント

• NEXT_PUBLIC_ を付けた環境変数は：

  • クライアントコードでも利用可能
  • JavaScriptバンドルに含まれる（＝公開される）

• Next.js は以下を行う：

  • process.env.NEXT_PUBLIC_XXX を ビルド時に静的値へ置換
  • ブラウザに配信されるJSに埋め込む

---

注意点（重要）

1. ビルド後は値が変わらない

• 環境変数は ビルド時に固定される
• デプロイ後に環境変数を変更しても反映されない (Next.js)

👉 例：

• Dockerイメージを使い回す
• Herokuでビルド済みアーティファクトを昇格する

→ すべて同じ値のままになる

---

2. 機密情報は絶対に入れない

• NEXT_PUBLIC_ を付けた変数は 完全に公開される
• APIキーやDBパスワードはNG

---

3. 動的参照はインライン化されない

以下のような書き方はビルド時に置換されません：

const key = "NEXT_PUBLIC_ANALYTICS_ID"
process.env[key] // ❌

const env = process.env
env.NEXT_PUBLIC_ANALYTICS_ID // ❌

👉 必ず 直接参照する必要があります

---

まとめ

項目	内容
サーバー専用	NEXT_PUBLIC_ なし
クライアント利用可	NEXT_PUBLIC_ 付き
実行タイミング	ビルド時に埋め込み
値の変更	ビルド後は不可
セキュリティ	公開されるので注意

---