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

はじめに

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

NEXT_PUBLIC_ありとなしの違い

NEXT_PUBLIC_PER_PAGE=5
PER_PAGE=5

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

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

NEXT_PUBLIC_無しでクライアント側で参照する方法

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

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