Next.js でアプリケーションを開発していると、クライアントで参照する設定値を環境変数で扱いたいケースは多々あると思います。Next.js では NEXT_PUBLIC_ という接頭辞の環境変数はビルド時に解決され、ビルド成果物に埋め込まれるためクライアントから参照できるようになります (参考: Configuring: Environment Variables | Next.js)。
ただし、この環境変数はビルド時に埋め込まれるため、当然ビルド時のものです。つまり、たとえばクライアントから参照する API の URL を環境変数で埋め込みたく、かつ API の URL はアプリケーションの環境(production, staging, development など)ごとに変わるというケースにおいて、環境ごとにビルドをする必要があるということになります。ビルド成果物をバージョンごとに世代管理したい場合、バージョン x 環境ごとに成果物が増えるため、管理も煩雑化します。
そこで、ビルド時ではなく実行時の環境変数をどうにかクライアントから参照できないかということを考えます。
三行で
- Server Components は実行時の
process.envにアクセスできる - Server Components から Client Components である Context Provider に環境変数を props として渡す
- 他の Client Components は
useContext経由で実行時の環境変数にアクセスできるようになる
