Firebase Hostingにデプロイする場合、環境変数をどのように設定したらよいでしょうか

Question

Next.jsで作ったアプリをFirebase Hostingにデプロイしようとしています。

Vercelにデプロイする際、下記のコードや設定でデプロイしたサイトで環境変数を表示できました。

コード

// .env.local
NEXT_PUBLIC_FOO=foo

const foo = process.env.NEXT_PUBLIC_FOO;
console.log(foo); // foo

Vercelでの設定
サイトの設定で環境変数を登録

↑
こんな感じでFirebase Hostingでもコードに書いた環境変数を表示できるようにしたいです。
ただ、Firebase Hostingのコンソールを見ても環境変数を登録するフォームを見つけられませんでした。

また、「Firebase 環境変数」で検索するとCLIで環境変数を設定できることが分かりました。
環境の構成  |  Firebase Documentation
ただ、ここで説明されている環境変数はCloud Functionsでしか使えないようでした。
私は環境変数をクライアント側で使用したいです。

また、環境変数の呼び出し方もprocess.envではなく独自の関数を使用しているように見受けられます。
可能であればprocess.env.○○みたいな形で環境変数を呼びたいです。

Answer 1

Firebase Hostingでは環境変数の設定はできないようです。
設定しようとしている環境変数がクライアント側で使用するような公開してよい情報であれば.env.productionファイルに設定することで本番環境で使用する環境変数とすることができます。
そうではなく、公開できない環境変数であれば挙げられているCloud Functionsなどを使用する方法がよいと思います。

Stack Overflowに同じ質問があったので参考情報として載せておきます。
How does one set private environment variables on Firebase hosting? - Stack Overflow