Next.jsの環境変数は本当にprefixをつけるかつけないかで参照範囲が変わるのか

はじめに

公式が言っていることを検証してみようの会です。

Basic Features: 環境変数 | Next.js

検証

pages router、typescriptで Next.jsのアプリを作成してあること前提で行います。

pages配下に下記を記載

pages/hoge.tsx

export default function Hoge() {
  return (
    <div>
      <p>PRIVATE_EXAMPLE: {process.env.PRIVATE_EXAMPLE || "not found"}</p>
      <p>NEXT_PUBLIC_EXAMPLE: {process.env.NEXT_PUBLIC_EXAMPLE}</p>
    </div>
  );
}

pages/api/hoge.ts

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({
    message: process.env.PRIVATE_EXAMPLE,
    nextPublicMessage: process.env.NEXT_PUBLIC_EXAMPLE,
  });
}

env

PRIVATE_EXAMPLE=PRIVATE_INFO
NEXT_PUBLIC_EXAMPLE=NEXT_PUBLIC_INFO

pages routerでは それぞれ /hogeと /api/hogeとしてアクセス可能であるのでみてみると

/hoge

/api/hoge

以上です。

終わりに

公式の言う通りでした。疑ってすいませんでした。