Next.jsでは、環境変数名の前にプレフィックスNEXT_PUBLIC_を付けないとブラウザ側に公開されません。
By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. For example:
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
Configuring: Environment Variables | Next.js
正しい環境変数の命名
例えば今開発しているプロジェクトの状況ですが、以下の内容で環境変数を設定しています。本番環境（Vercel）に設定している例です。
GOOGLE_CLIENT_ID=google_client_id_sample.com GOOGLE_CLIENT_SECRET=google_client_secret_sample_1234 NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=google_maps_api_key_sample_1234 NEXT_PUBLIC_API_URL=https://outdoor-heart-sutra-backend.fly.dev NEXTAUTH_URL=https://outdoor-heart-sutra.vercel.app NEXT_SECRET=next_secret_sample_1234
ひとつひとつ取り上げていきます。
GOOGLE_CLIENT_ID
GoogleのOAuth2.0クライアントIDになります。過去のブログで取り上げたGoogle APIを設定した時に取得したIDになります。
GOOGLE_CLIENT_SECRET
GoogleのOAuth2.0クライアントシークレットです。上記クライアントIDと一緒に取得したクライアントシークレットです。
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
Google Maps の APIキーです。
NEXT_PUBLIC_API_URL
Rails APIのURLを設定します。Fly.ioにデプロイしています。
NEXTAUTH_URL
この環境変数は本番環境にデプロイする場合に必要なものです。Vercelから付与されるURLを設定します。
NEXT_SECRET
この値はNextAuth.jsのJWTを暗号化し、メール確認トークンをハッシュ化するために使用される秘密鍵です。
メール確認トークンのハッシュ化は、NextAuth.jsがユーザーのメールアドレスを確認するプロセスをより安全にするための方法で、秘密鍵NEXT_SECRETがこのハッシュ化に使用されます。
あらかじめデフォルト値で設定しておかないと本番環境でエラーが発生します。
Not providing any secret or NEXTAUTH_SECRET will throw an error in production.
秘密鍵の作成にはopensslコマンドが便利です。
$ openssl rand -base64 32
誤った環境変数の命名
前置きが長くなりましたがここからが本題です。
正しい環境変数名を設定する前、以下のように設定していました。
# Google MapsのAPIキー GOOGLE_MAPS_API_KEY=google_maps_api_key_sample_1234 # Rails APIのURL API_URL=https://outdoor-heart-sutra-backend.fly.dev # 他、環境変数は問題なし
このように環境変数名にプレフィックスNEXT_PUBLIC_を付与していない状態でした。
上記の環境変数名の場合、Google MapsのAPIキーもRails APIのパスもフロント側で使用していたため、本番環境で環境変数が反映されずにエラーが発生していました。
Next.jsでは、環境変数にNEXT_PUBLIC_を付けないとブラウザ側に公開されない仕様になっています。
サーバーサイドだけでの使用であれば付与せずに問題ないですが、ブラウザ側で使用したい場合は、プレフィックスNEXT_PUBLIC_の付与が必須になります。
