APIキーを .env に置くとき、変数名に NEXT_PUBLIC_ を付けるとどうなりますか。
クライアントバンドルに含まれ、ブラウザから読めるようになります。付けてよいのは公開して問題ない値だけです。APIキーに付けると配信されたJSの中から誰でも読めます。
面接官が見ているのは🔴 秘密情報の事故に直結する。基礎として外せない。
よくある答えと、面談でどう見られるか
- クライアントバンドルに含まれ、ブラウザから読めるようになる
公開してよい値にだけ付けます。APIキーに付けると丸見えです。 - サーバー側からも読めるようになる
接頭辞が無くてもサーバーからは読めます。付けると増えるのはクライアントへの露出です。 - ビルド時に埋め込まれるだけなので、実行時には見えない
埋め込まれるからこそ見えます。配信されたJSの中身は誰でも読めます。 - クライアントに含まれる。逆に接頭辞が無い変数はクライアントでは空文字列になる
正確です。undefined ではなく空文字列に置き換えられます。
模範解答
クライアントバンドルに含まれ、ブラウザから読めるようになります。Next.js では NEXT_PUBLIC_ で始まる環境変数だけがクライアントに渡されます。APIキーに付けると丸見えになるので、付けるのは公開してよい値だけです。
逆に、接頭辞の無い変数はクライアント側では読めません。公式によれば、接頭辞が無い変数はクライアント向けのコードでは空文字列に置き換えられます。undefined ではなく空文字列です。
もう1点、NEXT_PUBLIC_ の値はビルド時に埋め込まれます。ビルド後に環境変数を変えても反映されないので、1つのイメージを複数環境で使い回す運用では注意が要ります。サーバー側でだけ読む変数は実行時に読まれるので、この問題は起きません。