【Next.js】環境変数にNEXT_PUBLICが必要か不要か

はじめに

Next.jsで環境変数を設定した時、読み込まれなかったり、読み込まれなかったり、NEXT_PUBLIC_がついたりついていなかったりして混乱したので調べてみました。

環境変数の設定

ルート配下に.envファイルを設置し、環境変数を記載します。

NEXT_PUBLIC_USERNAME=test1234
USERNAME=test1234

環境変数の使用

環境変数を参照する場合は以下のように記載します。

console.log(process.env.NEXT_PUBLIC_USERNAME);
console.log(process.env.USERNAME);

NEXT_PUBLIC_ありとなしの違い

NEXT_PUBLIC_がない場合はサーバー側でのみ参照可能です。
クライアント側で参照したい場合はNEXT_PUBLIC_を付与する必要があります。

それぞれの場所でconsole.logに出力した結果です。

	ミドルウェア	サーバーコンポーネント	クライアントコンポーネント
NEXT_PUBLIC_USERNAME	test1234	test1234	test1234
USERNAME	test1234	test1234	undefined

このようにクライアント側ではNEXT_PUBLIC_がない場合に参照することができませんでした。
ただし、例外があります。

NEXT_PUBLIC_がなくてもクライアント側で参照する方法

next.config.jsにある記載を追加するとNEXT_PUBLIC_がなくてもクライアント側で参照することができます。

next.config.js

module.exports = {
  env: {
    USERNAME: process.env.USERNAME,
  },
};

クライアントコンポーネントでも参照することができました。

	ミドルウェア	サーバーコンポーネント	クライアントコンポーネント
NEXT_PUBLIC_USERNAME	test1234	test1234	test1234
USERNAME	test1234	test1234	test1234

標準の.envファイルの読み込みとは別にNext.jsの設定ファイルで環境変数を設定するenvという機能があるそうです。

https://nextjs.org/docs/app/api-reference/next-config-js/env

Next.jsでは、next.config.js内のenvキーに定義された環境変数は、クライアント側とサーバー側の両方で使用できるようにビルドプロセス中にインライン化されます。
これにより、process.env.USERNAMEに設定された値が、アプリケーション全体で利用可能になります。
しかし、クライアント側でも参照されるためセキュリティの観点で機密データを含めないように注意が必要です。
したがって、クライアント側で必要なものはNEXT_PUBLIC_をつけ、サーバー側でのみ必要な機密データはNEXT_PUBLIC_をつけずに管理するのが良さそうです。

まとめ

process.envで参照できたりできなかったりしたのが気になったのでまとめてみましたが、意外と知らなかったです。