Next.jsの環境変数の使い方の基本と、Vercelの環境変数との関係性について - Qiita

Next.jsの公式サイトDefault Environment Variables を参考に、Next.jsの環境変数の取り扱い方法と、Vercel上の環境変数との関係性について調べ、ユースケースをまとめてみました。 Next.jsの環境変数の取り扱い方法について 後述の通り、環境変数の設定ファイルにXXXXX=Yの形で環境変数を定義しておけば、プログラム中でprocess.env.XXXXX の形式で環境変数を参照できる。 ただし、普通に環境変数を定義した場合、これらはブラウザ上からは見えないので(サーバーサイドで実行されるコードでのみ見える)、ブラウザ上で環境変数を使えるようにしたい場合(例えば、クライアントサイドでHTTP Requestを送信したい場合に環境変数を使いたい場合)には、環境変数名をNEXT_PUBLIC_で始めるようにすれば(ex. NEXT_PUBLIC_XXXX