[小ネタ]Next.jsのクライアントサイドで環境変数を使う場合の注意点

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

Next.jsでは環境変数を利用できる機能が組み込みサポートされています。

.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のようなサーバーサイドで処理される場合には以下のように利用ができます。

setupAnalyticsService(process.env.ANALYTICS_ID)

const varName = 'ANALYTICS_ID'
setupAnalyticsService(process.env[varName])

これは直感的にわかりやすいですね。

クライアントサイドでの利用について

次に、クライアントサイドで処理されるコードで環境変数を利用したい場合には、以下のように環境変数の接頭辞にNEXT_PUBLIC_を付与する必要があります。

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

すると以下のようなコードで環境変数を利用することができます。

setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

この利用時の注意点として、以下のようなコードでは環境変数を取得することができません。

const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])

NEXT_PUBLIC_接頭辞を付けた環境変数は、ビルド時に変数値をJavaScriptにインライン化してくれているそうなので、動的な参照処理は利用できないそうです。

下記の公式ドキュメントの「Exposing Environment Variables to the Browser」の項にも詳しく記載されていました。

まとめ

以上、Next.jsのクライアントサイドで環境変数を使う場合の注意点でした。

最初はどうして環境変数が取得できないのか理解できなかったのですが、しっかりと公式ドキュメントに記載されていました。反省しています。

どなたかのお役に立てば幸いです。それでは！