APIキーのような秘密情報は、どう扱いますか。
NEXT_PUBLIC_ を付けずに .env に置き、サーバー側でだけ読みます。この接頭辞を付けた時点でクライアントバンドルに含まれ、配信されたJSから誰でも読めるようになります。
面接官が見ているのはNEXT_PUBLIC_ の意味を正しく理解しているか。
よくある答えと、面談でどう見られるか
- NEXT_PUBLIC_ を付けずに .env に置き、サーバー側でだけ読む
正解です。接頭辞を付けた時点でクライアントバンドルに入ります。 - NEXT_PUBLIC_ を付けて、どこからでも読めるようにしておく
それは公開してよい値に付けるものです。APIキーに付けるとブラウザから丸見えになります。 - .env に置き、必要なところで process.env から読む
置き場所は正しいのですが、「必要なところ」がクライアント側だと機能しません。サーバー側に閉じる設計まで言えると通ります。 - ビルド時に埋め込まれるだけなので、実行時には見えない
埋め込まれるからこそ見えます。バンドルされたJSは配信されるので、中に入っている文字列は誰でも読めます。
面接官は何を見ているか
- NEXT_PUBLIC_ を付けない、と答えた
- 付けるとクライアントバンドルに入ると説明できた
- サーバー側でだけ使う、という設計に触れた
模範解答
NEXT_PUBLIC_ を付けずに .env に置き、サーバー側でだけ読みます。
Next.js では、NEXT_PUBLIC_ で始まる環境変数だけがクライアントバンドルに含まれます。裏を返すと、この接頭辞を付けた時点でブラウザから丸見えになります。「ビルド時に埋め込まれるだけだから見えない」ということはありません。
逆に、接頭辞の無い変数はクライアント側では読めません。公式によれば、接頭辞が無い変数はクライアント向けのコードでは空文字列に置き換えられます。undefined ではなく空文字列です。
なお .env はリポジトリに入れません。create-next-app の既定テンプレートも .env 系を .gitignore に入れています。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
一部しか触れられなかった場合
NEXT_PUBLIC_ を付けた変数は、いつクライアントに入りますか。触れられなかった場合
NEXT_PUBLIC_ を付けた変数は、いつクライアントに入りますか。