Next.js项目构建后修改环境变量的可行方案问询

注意：所有NEXT_PUBLIC_前缀的环境变量会在Next.js构建阶段直接硬编码注入到客户端打包产物中，原生不支持构建后直接修改，也无法在前端运行时直接修改process.env下的变量值，以下为可落地的实现方案：

测试场景点击切换的实现方案（匹配你的需求） #

你需要把原有直接调用process.env.NEXT_PUBLIC_CURRENCY的逻辑统一收口，封装成可读写的全局配置即可：

• 新建统一配置文件，比如src/config/currency.ts，代码如下：

// 初始值取构建时注入的环境变量
let currentCurrency = process.env.NEXT_PUBLIC_CURRENCY ?? 'USD'

// 对外暴露取值方法，业务代码全用这个方法代替直接取process.env
export const getCurrentCurrency = () => currentCurrency

// 对外暴露修改方法，支持切换值
export const setCurrentCurrency = (newVal: 'USD' | 'CAD') => {
  currentCurrency = newVal
  // 可选：存入localStorage，页面刷新后配置依然生效
  window.localStorage.setItem('test_currency', newVal)
}

// 客户端初始化时优先读取本地存储的测试配置
if (typeof window !== 'undefined') {
  const savedCurrency = window.localStorage.getItem('test_currency')
  if (savedCurrency) currentCurrency = savedCurrency as 'USD' | 'CAD'
}

• 按钮点击逻辑直接调用setCurrentCurrency('CAD')即可完成切换，所有业务代码只要是通过getCurrentCurrency()取值，都会同步生效。

通用构建后修改全局配置方案 #

如果需要部署完成后无需重新构建就修改全局默认配置，可以用静态配置文件方案：

• 在public目录下新建runtime-config.json，写入默认配置：{"NEXT_PUBLIC_CURRENCY": "USD"}
• 在应用根组件（比如_app.tsx/app/layout.tsx）的初始化逻辑中请求/runtime-config.json，把返回的配置值存入上述的全局配置模块
• 构建完成后，直接修改public目录下的runtime-config.json内容即可更新全局配置，不需要重新打包项目。

避坑提示 #

• 不要尝试直接修改process.env.NEXT_PUBLIC_CURRENCY的值，process是Node端的对象，客户端运行时不存在原生的process对象，就算手动模拟也不会全局生效。
• 测试场景如果需要和后端联动切换，也可以把该配置值存在后端接口，应用初始化时拉取即可。

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