環境ごとに.envを切り替える方法と注意点

開発・ステージング・本番などの環境ごとに設定を分けたいときに便利なのが .env ファイルです。Next.jsなどのフレームワークでは、環境変数の管理に.envファイルを活用することが一般的です。本記事では、環境ごとの.envファイルの切り替え方法と、運用時の注意点について解説します。

基本の.envファイル構成

Next.jsでは、以下のような命名の.envファイルを使い分けることができます。

• .env：すべての環境共通
• .env.local：ローカル開発用（Git管理から除外）
• .env.development：開発用
• .env.production：本番用
• .env.test：テスト用

Next.jsは起動時のNODE_ENVに応じて、以下の順序で読み込みます：

1.env.production.local
2.env.production
3.env.local
4.env
5

例えば、NODE_ENV=production の場合は、以下の順に読み込まれます：

• .env.production.local
• .env.production
• .env.local
• .env

設定例

1# .env.development
2NEXT_PUBLIC_API_URL=http://localhost:3000/api
3

1# .env.production
2NEXT_PUBLIC_API_URL=https://example.com/api
3

Next.jsでクライアントサイドに公開する環境変数は、NEXT_PUBLIC_ プレフィックスが必要です。

注意点

• 環境ごとの.envファイルを正しく分けないと、本番環境で誤った設定が使用される可能性があります。
• .env.localはGitに含めず、.gitignoreに追加しておきましょう。
• ビルド後に環境変数を変更しても、反映されないことがあります。再ビルドが必要な場合もあります。

まとめ

• .envファイルは、環境ごとに分けることで安全かつ柔軟に運用可能です。
• NEXT_PUBLIC_がつかない変数はサーバーサイド専用になります。
• 環境変数を切り替える際は、NODE_ENVに応じたファイルが使われる点に注意しましょう。

正しく.envファイルを使い分けることで、環境に応じた設定を安全に管理できます。プロジェクトの初期段階でしっかり整備しておきましょう。