この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。
Next.jsでは環境変数を利用できる機能が組み込みサポートされています。
.env.localというファイルを用意して下記のように環境変数を記載します。
.env.local
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijkすると、この環境変数をprocess.envを通じて利用することができます。
一方で、環境変数の使い方にはクライアントサイド（ブラウザ）とサーバーサイドで違いがあり、少しハマってしまったので書き残しておきたいと思います。
結論
まず結論からですが、クライアントサイドでは以下のような利用方法はできません。
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])一方で、こちらならOKです。
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)サーバーサイドでの利用について
例として環境変数を以下のように定義したとします。
ANALYTICS_ID=abcdefghijkこの環境変数を利用する場合、getStaticPropsのようなサーバーサイドで処理される場合には以下のように利用ができます。
パターンA
setupAnalyticsService(process.env.ANALYTICS_ID)パターンB
const varName = 'ANALYTICS_ID'
setupAnalyticsService(process.env[varName])これは直感的にわかりやすいですね。
クライアントサイドでの利用について
次に、クライアントサイドで処理されるコードで環境変数を利用したい場合には、以下のように環境変数の接頭辞にNEXT_PUBLIC_を付与する必要があります。
.env.local
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijkすると以下のようなコードで環境変数を利用することができます。
パターンA
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)この利用時の注意点として、以下のようなコードでは環境変数を取得することができません。
パターンB
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])NEXT_PUBLIC_接頭辞を付けた環境変数は、ビルド時に変数値をJavaScriptにインライン化してくれているそうなので、動的な参照処理は利用できないそうです。
下記の公式ドキュメントの「Exposing Environment Variables to the Browser」の項にも詳しく記載されていました。
まとめ
以上、Next.jsのクライアントサイドで環境変数を使う場合の注意点でした。
最初はどうして環境変数が取得できないのか理解できなかったのですが、しっかりと公式ドキュメントに記載されていました。反省しています。
どなたかのお役に立てば幸いです。それでは！
2
