Vercelで環境変数を設定する

環境変数を使っているNext.jsのサイトをVercelにデプロイする場合、事前に管理画面から環境変数を設定します。Nuxt.jsで環境変数を使っている場合など、他のフレームワークも同様の設定が必要です。

Next.jsの場合、.env.localでの管理、.env.developmentと.env.productionでの管理など、様々なパターンがあるため、開発環境で定義している変数をVercelでも環境ごとに漏れなく設定する必要があります。でないと、変数を参照した場合にundefinedになります。

設定場所は、SettingsメニューにあるEnvironment Variablesのページです。

NAMEに変数名、VALUEに値をそれぞれ入力し、「Add」のボタンを押して完了です。

この場合、開発用（Development）のデプロイでも、本番用（Production）のデプロイでも、process.env.CONFIDENTIAL_INFOを参照することで「ものすごく重要な情報」の文字列が返ってきます。

環境別に.envファイルを用意している場合は、ここのENVIRONMENT項目のチェックボックスを適宜変更してください。