ReactやNext.js(バージョン9.4から使えるようです。)には標準で環境変数機能が備わっています。
環境変数設定ファイル
変数の定義方法
環境変数の反映にはアプリの再起動が必要になります。なお、クライアントに送られるバンドルの中に環境変数は組み込まれるので完全にシークレットにすることはできないです。（逆に言えば、シークレットでないからクライアントサイドレンダリング時に読み込むことができる。）
もし、React18やNext.js13以降をお使いでサーバーコンポーネントの機能をお使いになられるのであれば、REACT_APP_やNEXT_PUBLIC_などの接頭辞がなくても読み込むことが可能になります。（その場合、クライアント側からは完全にシークレットな情報になり読み込めなくなります。）
React
|
1 |
REACT_APP_(変数名)=値 |
Next.js
|
1 |
NEXT_PUBLIC_(変数名)=値 |
.env
毎回読み込まれます。汎用的な環境変数ファイルです。process.envに取り込むことができます。プロジェクトのルートディレクトリに配置します。
.env.local
毎回読み込まれます。優先度的にはdevelopmentやproductionよりも先に読み込まれることになります。
.env.development
next devで起動する際に読み込まれます。
開発環境だけで使える環境変数ファイルです。.envとあわせて二つ用意しても問題ないです。
.envと二つ用意した場合はこちらの方が優先して呼び出されます。
.env.production
next start時に読み込まれます。
本番環境のみで使える環境変数ファイルになります。
ただ、あくまでnext startとnext devのどちらかの場合しか環境変数を使い分けることができないのでさらに環境変数を使い分けたい場合などはもうNext.js標準の環境変数機能だけでは対応できない点には注意です。
個人的にには
「.env.development」と「.env.production」の二つのファイルのみを用意する形がわかりやすいと思います。環境別に.envを用意する形だと環境ごとにリネームして別途保管しないといけないですし大変だからです。
運用
.env.localだけシークレット情報を保管するようにして、.envや.env.development、.env.productionは普通にgit管理してしまうような方針にしている環境もあるようです。環境変数の数があまりにも多いようなプロジェクトであればそちらの方が良いかもしれません。
.envファイルの保管方法
gitで管理するのはセキュリティ上無理なので別途社内のみんながアクセスできるようなプライベートな環境などに保存しておくようにしましょう。（Googleドライブなど）
Reactプロジェクトからの呼び出し方
以下の方法で呼び出せます。
|
1 |
process.env.(変数名) |
Next.jsプロジェクトからの呼び出し方法
以下のように「NEXT_PUBLIC_」と先頭につけて呼び出します。（Reactとは少し違うので注意です。）
|
1 |
process.env.NEXT_PUBLIC_(変数名) |
この記事へのコメントはありません。