APIキーを使う関数を lib/data.ts に書いていたら、それが Client Component から import されていました。何が起きますか。
公式が環境の汚染と呼ぶ状態です。関数がクライアントバンドルに入り、接頭辞の無い環境変数は空文字列に置き換わるため、値は漏れない代わりに動かなくなります。既定では落ちません。
面接官が見ているのはenvironment poisoning。実際に踏む事故。
これは「APIキーのような秘密情報は、どう扱いますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- その関数がクライアントバンドルに入り、キーは空文字列に置き換わって動かなくなる
正確です。公式が environment poisoning として説明している状態です。 - APIキーがそのままクライアントに露出する
危機感としては正しいのですが、事実としては少し違います。NEXT_PUBLIC_ が無い変数は空文字列に置き換えられるので、値そのものは出ません。ただし関数の中身（エンドポイントや組み立て方）はクライアントに送られます。 - Next.js がエラーを出してビルドが落ちる
既定では落ちません。だからこそ気づきにくいのです。落とすようにする方法はあります。次の設問がまさにそれです。 - サーバー側で実行されるので、何も起きない
Client Component から import された時点で、そのモジュールはクライアント扱いになります。「元がサーバー用だから」では守られません。
面接官は何を見ているか
- その関数がクライアントバンドルに入ると気づいた
- キーの値自体は空文字列になる、と正確に言えた
- 結果として「動かない」形で表面化すると説明できた
模範解答
公式が「環境の汚染（environment poisoning）」と呼んでいる状態です。
起きることは2段階です。まず、その関数は Client Component のモジュールグラフに入るので、コードそのものはクライアントバンドルに含まれます。次に、process.env.API_KEY は NEXT_PUBLIC_ が付いていないため空文字列に置き換わります。
結果として「キーが漏れる」のではなく「キー無しでリクエストが飛んで失敗する」形で出ます。認証エラーになるので、キーの設定ミスだと誤診しやすいのが厄介なところです。
ただし安心はできません。空文字列になるのは値だけで、関数の中身、つまりエンドポイントのURLやリクエストの組み立て方はそのままクライアントに送られます。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
それを仕組みで防ぐには、どうしますか。レビューで気をつける、以外の方法で。