はじめに
Next.jsで環境変数でNEXT_PUBLIC_
がついてないのにクライアント側で呼び出せているものがあり、混乱したので調べてみた
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_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型として呼び出されるので注意