Netlifyで環境変数を設定する

Nuxt.jsの環境変数やNext.jsの環境変数をNetlifyで使うには、管理画面で定義した変数名と値をセットで設定します。基本的に.env系のファイルは.gitignoreで管理対象外になっているため、ここで設定しなければundefinedになって参照することができません。

環境変数の設定メニューはBuild & deployです。この画面を開き、「Edit variables」のボタンをクリックします。

「New variables」のボタンを押すと、入力項目が新規に追加されるので、変数名と値をそれぞれ入力した後に「Save」のボタンを押して完了です。

今回の例の場合、process.env.IMPORTANT_VALUEの値を参照すると「すごく重要な情報」の文字列が返ってきます。

定義済み変数について

Netlifyにはすでに定義されている変数（configuration variables）がいくつかありますが、同じ変数名を使えないことにご注意ください。

例えば、デプロイ用の変数の一覧に、URLやSITE_NAMEがありますが、これらと同じ環境変数名を設定しても上書きされずにNetlifyのものが使われます。