Next.js如何在pages目录外获取并使用环境变量？

首先明确一个核心规则：Next.js 的环境变量是全局注入到项目所有文件的，能否读取和文件是否在pages目录无关，只和两个因素有关：

• 变量是否带有NEXT_PUBLIC_前缀
• 代码的运行环境是服务端（Node.js侧）还是浏览器端

你当前代码无法正常读取PROD_API、DEV_API的核心原因是这两个变量没有NEXT_PUBLIC_前缀，属于私有环境变量，只会注入到服务端执行环境，浏览器端运行的代码无法直接读取。根据你的业务场景可以选择以下两种解决方案：

方案1：API地址可公开给前端的场景 #

直接给两个私有环境变量加上NEXT_PUBLIC_前缀即可，不管代码在哪个目录、运行在服务端还是前端都可以直接读取，不需要在每个页面编写getStaticProps传递变量。
修改后的代码示例：

// utils/index.ts
export const apiAddress =
  process.env.NEXT_PUBLIC_CURRENT_ENV === 'PRODUCTION'
    ? process.env.NEXT_PUBLIC_PROD_API
    : process.env.NEXT_PUBLIC_DEV_API;

方案2：API地址为敏感信息、不可公开的场景 #

这种场景下本身就不允许将API地址暴露给前端，你可以通过服务端代理的方式实现需求，不需要前端接触真实API地址：

1. 工具函数不需要做任何修改，私有环境变量在服务端执行环境可以直接正常读取
2. 新增Next.js API路由做接口转发，前端所有请求都先走这个代理路由，由代理路由调用工具函数拿到真实API地址后转发请求
   代理路由代码示例（pages/api/proxy/[...path].ts）：

import { apiAddress } from '../../../utils/index';
import httpProxy from 'http-proxy';

const proxy = httpProxy.createProxyServer();

export default function handler(req, res) {
  // 移除代理前缀，拼接真实接口路径
  req.url = req.url.replace(/^\/api\/proxy/, '');
  proxy.web(req, res, {
    target: apiAddress,
    changeOrigin: true
  });
}

export const config = {
  api: {
    bodyParser: false,
  }
}

前端只需要请求/api/proxy/实际接口路径即可，完全不需要感知真实的API地址，也不用在页面层面编写getStaticProps传递变量。

内容的提问来源于stack exchange，提问作者kevin