React/Next.js环境变量不使用getServerSideProps及NEXT_PUBLIC_的解决办法

排除getServerSideProps、添加NEXT_PUBLIC_前缀两种方案外，共有4种可落地的实现方案，你提到的静态文件存储思路也完全可行：

方案1：接口代理（最推荐，无需暴露baseURL给客户端） #

直接在next.config.js中配置rewrites规则，将客户端发起的本地接口请求统一代理到真实API服务地址，全程不需要把baseURL暴露给前端代码：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        // 直接读取服务端环境变量，不需要暴露给客户端
        destination: `${process.env.API_BASE_URL}/:path*`
      }
    ]
  }
}

• 优点：无baseURL泄露风险，前端代码直接调用/api/xxx即可，不需要额外处理配置读取逻辑，支持多环境运行时动态修改，无需重新构建
• 适用场景：所有不需要前端直接跨域调用第三方接口的业务场景

方案2：publicRuntimeConfig 注入 #

使用Next.js内置的运行时配置能力，把服务端环境变量注入到公共配置中，前端直接从内置工具读取即可，不需要加NEXT_PUBLIC_前缀：

// next.config.js
module.exports = {
  publicRuntimeConfig: {
    apiBaseUrl: process.env.API_BASE_URL
  }
}

前端调用方式：

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()
const apiBaseUrl = publicRuntimeConfig.apiBaseUrl

• 注意：该方案不支持next export静态导出场景，仅支持next start启动的服务端渲染/SSG场景
• 优点：无额外编码成本，符合Next.js原生规范

方案3：构建/启动时生成静态配置文件 #

可以将配置存储在公开静态文件中，分两种实现方式：

构建时固定配置 #

写一个预构建脚本，在打包阶段把环境变量写入到public目录下的静态文件中：

// 脚本 write-config.js
const fs = require('fs')
fs.writeFileSync(
  './public/api-config.json',
  JSON.stringify({ apiBaseUrl: process.env.API_BASE_URL })
)

修改package.json的构建命令：node write-config.js && next build
前端直接fetch静态文件读取：fetch('/api-config.json').then(res => res.json())

运行时动态配置 #

部署时（比如Docker容器启动、静态资源服务启动前）生成public/config.js文件，内容写入全局变量：

// public/config.js 动态生成的内容
window.__API_CONFIG__ = {
  apiBaseUrl: "你的实际接口地址"
}

在_document.js中引入该脚本，前端直接读取window.__API_CONFIG__.apiBaseUrl即可

• 优点：运行时可修改配置，不同环境部署不需要重新构建代码，适合多环境频繁切换的场景

方案4：Edge Runtime 中间件注入 #

如果使用Next.js 12+版本，也可以在中间件（middleware.ts）中给请求头注入baseURL，或者通过中间件统一转发接口请求，逻辑和rewrites代理类似，适合需要额外做权限校验等逻辑的场景。

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