Next.jsでは、フロント側の環境変数とバックエンド（api）側の環境変数で呼び出し方が異なる。
フロント側では、NEXT_PUBLIC_ というプレフィックスをつけなくてはいけない。
.envに定義
バックエンド： HOST=xxxxxxx
フロントエンド： NEXT_PUBLIC_HOST=xxxx定義した環境変数の使い方
バックエンド： process.env.HOST
フロントエンド： proccess.env.NEXT_PUBLIC_HOSTまた、.envは種類別に管理することができる。
| ファイル名 | 概要(何を定義するか) | 読み込み | 優先順位 |
|---|---|---|---|
| .env | 環境（開発、本番)に依存しないデフォルト値 | 常に読み込まれる | 4 |
| .env.local | 環境に依存しないシークレットなもの (リポジトリに含めず.ignore定義しておく) | 常に読み込まれる | 2 |
| .env.development | 開発環境で使用するデフォルト値 | yarn dev実行時に読み込まれる | 3 (開発） |
| .env.development.local | 開発環境で使用するシークレットなもの (リポジトリに含めず.ignore定義しておく) | yarn dev実行時に読み込まれる | 1 (開発) |
| .env.production | 本番環境で使用するデフォルト値 | yarn start, next build実行時に読み込まれる | 3 (本番) |
| .env.production.local | 本番環境で使用するシークレットなもの (リポジトリに含めず.ignore定義しておく) | yarn start, next build実行時に読み込まれる | 1 (本番) |
個人的には、.env , .env.local , .env.development , .env.production の４つを使えばOKだと思う。
コメント