【環境変数】NEXT_PUBLICあるのとないの何が違うん？

はじめに

Next.jsで扱う環境変数に2つの種類あるのはお気付きですか？

この記事では2つの違いと使い分けの方法を解説します！

環境変数とは

コード内で定義する変数や定数ではなく、プログラムを動かす環境側(.envファイルや.env.localファイル)で定義する定数のことです。

環境変数はすべて大文字のスネークケースで定義します。
スクリーミングスネークケースと言うみたいです。
例)APP_BASE_URL=http://localhost3000

使い方

process.env.[環境変数名]

で取得できます。

例えば、APP_BASE_URLと定義している環境変数を取得する場合、

process.env.APP_BASE_URL

で取得することができます。

ちなみに、環境変数が必ずしも設定されているとは限らないため、取得した値の型はstring | undefinedになります。

使用する際はas string(型アサーション)で強制的に文字列として扱うか、||””をつけてundefinedの場合は空の文字列になるようにするといいと思います。

実際に設定されているのが前提です。強制的に型を設定するので値がundefinedでも文字列として扱ってしまうというリスクもあります。

2つのパターン

NEXT_PUBLICがつく場合とつかない場合があります。

これらには大きな違いがあります。

NEXT_PUBLICあり

クライアントサイド側からでもサーバーサイド側からでも参照できる

NEXT_PUBLICなし

サーバーサイド側からしか参照できない

NEXT_PUBLICが付いていない環境変数をクライアントサイド側で取得しようとしたら、必ず「undefinde」になっちゃいますのでお気をつけください。

気を付けること

見えてはいけないAPIキーや、データベースのURL等にはNEXT_PUBLICを付けてはいけません！！

NEXT_PUBLICが付いていていると、ブラウザから悪意あるユーザーに見られるリスクがあります。

別の表現でまとめ

Next.jsは「”use client”」が付いていない限り、サーバーサイドでレンダリングされるため、use clientが付いているコンポーネントで取得できる環境変数は、NEXT_PUBLICが付いているものだけということになります。

サーバーサイドではついていてもついていなくても取得可能なのでどちらでもOKです。

ですので、環境変数を設定する際は、悪意ある人に見えても問題ないかつ、クライアントサイドで使用する場合はNEXT_PUBLICをつける、それ以外はつけないという判断で良いと思います！

おわりに

適切に使い分けする必要があるので、理解して環境変数の設定してみてください！！

このあたりをしっかり理解したら、このコンポーネントはどっちでレンダリングされるか(SSR？CSR？)も意識してコーディングが出来るようになってくるのかなと思います！！

シリーズ化したばかりなのにすでにリクエスト尽きてるので、ネタください・・・