Next.js无法获取服务端环境变量问题求助

为什么.env文件有效，系统环境变量无效？ #

Next.js对NEXT_PUBLIC_前缀的环境变量处理逻辑是：

• 使用.env文件时，Next.js会在构建阶段自动读取这些变量，并将其硬编码到客户端打包代码中，因此客户端能正常获取到值。
• 若直接在系统环境变量中设置NEXT_PUBLIC_TEST_URI，但启动Next.js时未确保进程读取到该变量，或是先构建应用再设置环境变量，客户端打包代码里的publicRuntimeConfig.external_uri仍会是构建时的旧值（或undefined）——因为publicRuntimeConfig依赖的process.env.NEXT_PUBLIC_TEST_URI在客户端是构建时注入的，并非运行时动态读取。

实现“重启Node服务即生效，无需重建”的方案 #

方案1：用API路由作为中间层（推荐） #

该方案完全依赖运行时环境变量，无需修改页面逻辑，重启服务即可更新值：

1. 在pages/api目录下创建get-api-uri.js：

export default function handler(req, res) {
  const apiUri = process.env.NEXT_PUBLIC_TEST_URI;
  res.status(200).json({ apiUri });
}

2. 修改api-helper.js，改为客户端运行时请求API路由获取URI：

let apiUri;

export async function getApiUri() {
  if (apiUri) return apiUri;
  const res = await fetch('/api/get-api-uri');
  const data = await res.json();
  apiUri = data.apiUri;
  return apiUri;
}

3. 调用时使用异步方式：

// 组件中调用示例
const fetchData = async () => {
  const uri = await getApiUri();
  const res = await fetch(`${uri}/your-endpoint`);
  // 处理响应逻辑
};

方案2：通过getServerSideProps传递变量到页面 #

若不想新增API路由，可在页面的getServerSideProps中读取环境变量，再传递给页面组件及API helper：

1. 修改页面文件（如pages/index.js）：

export async function getServerSideProps() {
  const apiUri = process.env.NEXT_PUBLIC_TEST_URI;
  return {
    props: { apiUri }, // 传递给页面组件
  };
}

function Home({ apiUri }) {
  // 将apiUri传递给API helper或直接使用
  return <div>当前API地址：{apiUri}</div>;
}

export default Home;

2. 调整api-helper.js，改为接收外部传入的URI：

// 导出创建API客户端的函数，接收uri参数
export function createApiClient(apiUri) {
  return {
    get: (endpoint) => fetch(`${apiUri}/${endpoint}`),
    // 其他API方法可按需扩展
  };
}

在页面组件中初始化使用：

import { createApiClient } from '../path/to/api-helper';

function Home({ apiUri }) {
  const apiClient = createApiClient(apiUri);
  
  const fetchData = async () => {
    const res = await apiClient.get('your-endpoint');
    // 处理响应逻辑
  };
  
  return <button onClick={fetchData}>获取数据</button>;
}

关键注意点 #

• 不要依赖publicRuntimeConfig实现客户端环境变量的运行时动态更新——客户端的publicRuntimeConfig值是构建时固化的，无法通过重启服务改变。
• 确保启动Next.js服务时，系统环境变量NEXT_PUBLIC_TEST_URI能被Node进程读取到：
  • Linux/macOS终端启动前，执行export NEXT_PUBLIC_TEST_URI="你的API地址"
  • Windows命令行启动前，执行set NEXT_PUBLIC_TEST_URI="你的API地址"
  • 若使用PM2等进程管理器，需在配置文件中明确设置环境变量

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