【Next.js】環境変数のNEXT_PUBLICについて

Contents

はじめに

Next.jsで環境変数でNEXT_PUBLIC_がついてないのにクライアント側で呼び出せているものがあり、混乱したので調べてみた

NEXT_PUBLIC_PER_PAGE=5
PER_PAGE=5

.envファイルに上記の環境変数を設定した場合、
NEXT_PUBLIC_がない場合はサーバー側でのみ参照可能。
クライアント側で参照したい場合はNEXT_PUBLIC_を付与する必要がある。

サーバーコンポーネント	クライアントコンポーネント
NEXT_PUBLIC_PER_PAGE	5	5
PER_PAGE	5	undefined

基本的にクライアント側ではNEXT_PUBLIC_がない場合に参照することができない。

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

next.config.js
module.exports = {
  env: {
    PER_PAGE: process.env.PER_PAGE,
  },
};

標準の.envファイルの読み込みとは別にNext.jsの設定ファイルで環境変数を設定するenvという機能があるみたい。
変数名もここで自由につけられてしまうので、.envにない変数名をprocess.env.で呼び出してる場合はこの辺をチェックしてみると良いかも

.envで指定した環境変数は全て文字列で返ってくる
数値を指定していても呼び出すときはnumber型ではなくstring型として呼び出されるので注意