💭

[NextJS]クライアントサイドで環境変数を読み込むときはNEXT_PUBLICをつけよう

2024/05/05に公開

Next.js

React

env

tech

はじめに

環境変数周りでよくエラーを発生させてしまったので記事にしました。
クライアントサイドで実行するときは、NEXT_PUBLIC_というPREFIXを付けないといけません。という内容です。

発生したエラー

環境変数を作成

.env.localというファイルをrootに作成するだけでOKです

.env.local

TEST=test
NEXT_PUBLIC_TEST=test-public

サーバーサイドでの実行

page.tsxに環境変数を両方書きました。(App Router)

page.tsx

import { NextPage } from "next";

const Page: NextPage = () => {
  return (
  <>
    <h1>ENV TEST</h1>
    <p>{process.env.TEST}</p>
    <p>{process.env.NEXT_PUBLIC_TEST}</p>
  </>
  )
}

export default Page

サーバーサイドで実行したので、どちらも実行されて表示されることを確認しました。

クライアントサイドで実行

先程の1行目にuse clientを追加します

'use client'
import { NextPage } from "next";

const Page: NextPage = () => {
  return (
  <>
    <h1>ENV TEST</h1>
    <p>{process.env.TEST}</p>
    <p>{process.env.NEXT_PUBLIC_TEST}</p>
  </>
  )
}

export default Page

process.env.TESTのみ表示されず、エラーが発生しました。

おわりに

NextJSで環境変数を使うときの注意でした。