咨询：Next.js静态导出应用的标准配置方案

针对静态导出（next export）场景的多环境配置，有以下几种成熟方案，适配不同的部署需求：

1. 构建时注入环境变量（预定义环境首选） #

静态导出的核心是构建阶段生成最终静态文件，因此可以通过构建脚本绑定不同环境的配置文件，将变量直接注入到静态资源中。

• 步骤：
  1. 为每个环境创建对应的.env文件，比如.env.production、.env.staging，所有需要在客户端访问的配置必须以NEXT_PUBLIC_为前缀（比如NEXT_PUBLIC_API_BASE_URL=https://staging.example.com/api）。
  2. 在package.json中添加分环境的构建脚本，借助env-cmd工具加载对应配置：

     {
       "scripts": {
         "build:prod": "env-cmd -f .env.production next build && next export",
         "build:staging": "env-cmd -f .env.staging next build && next export"
       }
     }
     

  3. 部署对应环境时，执行对应的构建命令即可，生成的静态文件会自动替换为该环境的配置值。

2. 运行时加载独立配置文件（动态切换环境首选） #

如果需要部署后无需重新构建即可切换环境，可以将配置文件放在public目录下，通过运行时逻辑加载对应配置：

• 步骤：
  1. 在public目录下创建多环境配置文件，比如config.prod.json、config.staging.json：

     // public/config.staging.json
     {
       "apiBaseUrl": "https://staging.example.com/api",
       "appTitle": "Staging App"
     }
     

  2. 在自定义_app.js中添加加载逻辑，根据域名、URL参数等判断环境并拉取配置：

     import { useEffect, useState } from 'react';
     
     function MyApp({ Component, pageProps }) {
       const [config, setConfig] = useState(null);
     
       useEffect(() => {
         // 根据当前域名判断环境
         const env = window.location.hostname.includes('staging') ? 'staging' : 'prod';
         fetch(`/config.${env}.json`)
           .then(res => res.json())
           .then(data => setConfig(data));
       }, []);
     
       if (!config) return <div>Loading...</div>;
       return <Component {...pageProps} config={config} />;
     }
     
     export default MyApp;
     

  • 注意：这种方式的配置文件是公开可访问的，不能存放敏感信息，仅适用于公开的业务配置。

3. 部署平台环境变量注入（云部署首选） #

主流静态部署平台支持在部署流程中直接配置环境变量，无需本地维护多个.env文件：

• 操作方式：
  1. 在平台控制台为不同环境（生产、预发布等）创建环境变量，所有客户端需要的变量依然以NEXT_PUBLIC_开头。
  2. 配置部署触发规则，比如对应分支触发对应环境的构建，平台会自动在构建阶段将配置注入到静态文件中。

关键注意事项 #

• 静态导出模式下，只有NEXT_PUBLIC_前缀的环境变量会被编译到客户端代码中，非前缀的变量仅能在服务端构建逻辑中使用，无法在静态页面访问。
• 敏感配置（如密钥、私钥）绝对不能通过静态配置暴露，若必须使用，需通过后端接口代理请求，结合服务器的环境变量处理。

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