APIキーを .env に置くとき、変数名に NEXT_PUBLIC_ を付けるとどうなりますか。
クライアントバンドルに含まれ、ブラウザから読めるようになります。付けてよいのは公開して問題ない値だけです。APIキーに付けると配信されたJSの中から誰でも読めます。
面接官が見ているのは🔴 秘密情報の事故に直結する。基礎として外せない。
よくある答えと、面談でどう見られるか
- クライアントバンドルに含まれ、ブラウザから読めるようになる
公開してよい値にだけ付けます。APIキーに付けると丸見えです。 - サーバー側からも読めるようになる
接頭辞が無くてもサーバーからは読めます。付けると増えるのはクライアントへの露出です。 - ビルド時に埋め込まれるだけなので、実行時には見えない
埋め込まれるからこそ見えます。配信されたJSの中身は誰でも読めます。 - クライアントに含まれる。逆に接頭辞が無い変数はクライアントでは空文字列になる
正確です。undefined ではなく空文字列に置き換えられます。
模範解答
クライアントバンドルに含まれ、ブラウザから読めるようになります。Next.js では NEXT_PUBLIC_ で始まる環境変数だけがクライアントに渡されます。APIキーに付けると丸見えになるので、付けるのは公開してよい値だけです。
逆に、接頭辞の無い変数はクライアント側では読めません。公式によれば、接頭辞が無い変数はクライアント向けのコードでは空文字列に置き換えられます。undefined ではなく空文字列です。
もう1点、NEXT_PUBLIC_ の値はビルド時に埋め込まれます。ビルド後に環境変数を変えても反映されないので、1つのイメージを複数環境で使い回す運用では注意が要ります。サーバー側でだけ読む変数は、動的にレンダリングされるページなら実行時に読まれます。ただし静的にプリレンダーされるページでは、サーバー側の変数もビルド時に読まれてHTML に固定されます。実行時の値を使いたい箇所は、動的にする必要があります。
対象: Next.js 16（App Router） 照合した一次資料: 公式ドキュメント 照合: 2026-10-25 最終更新: 2026-10-25
お使いの版で挙動が違う場合があります。誤りに気づいたらこの解説を報告するから教えてください。