Next.js

【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_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型として呼び出されるので注意

ABOUT ME
ytakeuchi
都内在住のフロントエンドエンジニア。2016年からフリーランスとして活動中。座右の銘は「昨日よりも楽に」。好きな言葉は「効率化」。こんな性格なのでプライベートではGoogle Apps Scriptばかり触っています。