[Next.js] クライアント側のコンポーネントで環境変数を参照する方法

はじめに

Next.jsは、Reactベースのフレームワークとして、開発者に対してサーバーサイドとクライアントサイドの両方でアプリケーションを構築するための強力な機能を提供しています。その中でも、環境変数を利用する機能は、開発者が異なる環境（開発、テスト、本番など）でアプリケーションの挙動を簡単にカスタマイズできるようにする重要なサポート機能の一つです。

環境変数の使い方

環境変数を利用するには、まず.env.local、.env.development、.env.productionといったファイルをプロジェクトのルートに作成します。これらのファイル名は、それぞれローカル開発環境、開発環境、本番環境用の環境変数を定義するためのものです。

参考：
Environment Variables | Next.js

環境変数を定義する際は、ファイル内にキー=値の形式で記述します。例えば、APIのエンドポイントを設定する場合は、以下のように記載します。

API_URL=https://your-api.com

Next.jsアプリケーションでは、これらの環境変数はサーバーサイドでのみデフォルトで利用可能です。しかし、環境変数をクライアントサイドで利用する必要がある場合は、特定のネーミングルールに従う必要があります。

クライアントコンポーネントで環境変数を使う

クライアントサイドのコンポーネントで環境変数を参照するには、環境変数の名前をNEXT_PUBLIC_で始める必要があります。このプレフィックスをつけることで、Next.jsは該当する環境変数をビルド時にクライアントサイドのJavaScriptバンドルに含めることを許可します。例えば、公開可能なAPIキーをクライアントサイドで利用する場合、環境変数は以下のように定義されます。

NEXT_PUBLIC_API_KEY=your_public_api_key

そして、この環境変数はクライアントサイドのコンポーネント内で次のように参照できます。

const apiKey = process.env.NEXT_PUBLIC_API_KEY;

// apiKeyを使用して何かを行う

この機能を利用することで、開発者はセキュリティを保ちつつ、異なる環境でのアプリケーションの挙動を簡単にカスタマイズできます。ただし、NEXT_PUBLIC_プレフィックスが付いた環境変数は公開情報として扱われるため、秘密情報やセキュリティに関わる情報をこの方法で扱うべきではありません。