Next.jsで環境変数を扱う

らくちん

環境変数を定義する

必要なのは1ファイルだけです。Next.jsアプリのルートに.env.localを追加します。
後述しますが、このファイル名によって適用先環境(開発環境とか本番環境)が指定できます。.env.localの場合は全ての環境に適用されます。

$ touch .env.local

envファイルの中身です。とりあえずこんな感じで環境変数を2つほど定義しておきます。

API_URL = https://api.sample.hoge/v1/
NEXT_PUBLIC_USER_NAME = halkyo

環境変数を呼び出す

定義した環境変数は、process.env.[環境変数名]で呼び出すことができます。

process.env.API_URL

定義した環境変数はnode.js内部でのみ参照できます。
つまり、htmlのなかに上記の「API_URL」を表示しようとしてもなにも見えません。console.logでも同様です。undefinedになります。

console.log(process.env.API_URL)
> undefined

しかし、出力に環境変数を利用したい場合もあります。
その場合は、NEXT_PUBLIC_ を環境変数名の頭につけて定義しておくことでブラウザ側に値を公開することができます。

console.log(process.env.NEXT_PUBLIC_USER_NAME)
> halkyo

環境ごとにenvファイルをわける

Next.jsの環境変数は.envのファイル名で適用先の環境を切り替えることができます。

.env.local・・・すべての環境に常に適用される

.env.development.local・・・開発環境にのみ適用される

.env.production.local・・・本番環境にのみ適用される

これらの環境変数は.gitignoreに定義を追加しておきましょう。
(create-next-app時にデフォルトで記載されているはず)

タグ
公開日