【Next】環境変数のプレフィックス、NEXT_PUBLICの使い分け
はじめに
Nextにおける環境変数の書き方で躓いたので備忘録です。
NEXT_PUBLIC_HOGEとHOGEという環境変数の使い分けについて解説します。
そもそも環境変数とは
環境変数とは、アプリケーションが実行される環境（開発、テスト、本番など）ごとに異なる値を格納するための変数です。これにより、コードの変更なしに異なる環境で異なる設定を適用できます。
プレフィックスNEXT_PUBLIC_
Next.jsでは、NEXT_PUBLIC_で始まる環境変数はブラウザからアクセス可能です。これは、サーバーサイドだけでなく、クライアントサイドのJavaScriptからも参照できることを意味します。
設定方法
.env.localファイルをプロジェクトのルートに作成し、そこに環境変数を記述します。
NEXT_PUBLIC_HOGE=変数の値
使用方法
環境変数NEXT_PUBLIC_HOGEを使用するには、以下のようにコード内で参照します。
console.log(process.env.NEXT_PUBLIC_HOGE);
この方法で、クライアントサイドのJavaScriptから環境変数の値を安全に取得できます。
NEXT_PUBLIC_HOGEとHOGEの挙動の違い
Next.jsにおいて、環境変数にプレフィックスNEXT_PUBLIC_を付けるかどうかで、その変数の挙動が大きく変わります。
プレフィックスなしの場合
HOGEのようにプレフィックスNEXT_PUBLIC_を付けない環境変数は、サーバーサイドでのみアクセス可能です。これは、ビルド時やサーバーサイドのコード（例えばNext.jsのAPIルート）でのみ参照できるということです。
// サーバーサイドのコード例
console.log(process.env.HOGE);
この環境変数はクライアントサイドのJavaScriptからは参照できません。そのため、秘密情報やセキュリティに関わる値を格納するのに適しています。
プレフィックスNEXT_PUBLIC_ありの場合
一方、NEXT_PUBLIC_HOGEのようにNEXT_PUBLIC_プレフィックスを付けた環境変数は、サーバーサイドとクライアントサイドの両方でアクセス可能です。これにより、フロントエンドのコードで直接参照することができます。
// クライアントサイドのコード例
console.log(process.env.NEXT_PUBLIC_HOGE);
この挙動の違いは、特にセキュリティ上の理由から重要です。秘密情報はNEXT_PUBLIC_プレフィックスなしで保管し、公開しても安全な情報のみをNEXT_PUBLIC_プレフィックス付きの変数に格納することが推奨されます。
まとめ
環境変数のプレフィックスの有無による挙動の違いを理解することは、Next.jsアプリケーションのセキュリティと機能性を保つ上で重要です。適切な環境変数の使用法を身につけることで、より効果的なアプリケーション開発が可能になります。
参考
Discussion