如何在已部署的Next.js应用中动态加载配置？

Next.js 构建时会把 .env 文件里的变量编译打包进代码，导致部署后无法修改。下面是几种实用的解决方法：

方法1：客户端加载静态配置文件 #

• 把配置放在项目的 public 目录下，比如新建 public/config.json，这个目录下的文件不会被编译，部署后直接修改文件就能生效。
• 在组件里动态加载这个配置文件：

// 组件中加载动态配置的示例
async function fetchConfig() {
  const response = await fetch('/config.json');
  return response.json();
}

export default async function HomePage() {
  const config = await fetchConfig();
  return <div>当前API地址：{config.API_BASE_URL}</div>;
}

• 注意：这种方式的配置会暴露给前端，只适合放非敏感的配置项（比如页面标题、前端展示参数），敏感信息别用这个方法。

方法2：服务端运行时读取外部配置文件 #

• 针对敏感配置（比如数据库密钥、API密钥），可以在项目根目录放一个不纳入版本控制的配置文件（比如 config.prod.json），然后在服务端代码（API路由、getServerSideProps、getInitialProps）里读取：

// API路由中读取外部配置的示例
import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  const configFilePath = path.join(process.cwd(), 'config.prod.json');
  const configContent = fs.readFileSync(configFilePath, 'utf8');
  const config = JSON.parse(configContent);
  
  res.status(200).json({ apiSecret: config.API_SECRET });
}

• 部署时把这个配置文件放在项目根目录，修改后重启服务（比如用PM2托管的话重启PM2进程）就能生效。

方法3：运行时传递环境变量（容器化部署首选） #

• 如果用Docker或容器平台部署，运行容器时直接传递环境变量即可，Next.js的服务端代码可以直接读取 process.env 里的变量（服务端代码不会被编译，运行时实时读取）：

# Docker运行时传递环境变量的示例
docker run -e API_BASE_URL=https://new-api.example.com your-nextjs-image

• 在服务端代码中使用：

// getServerSideProps中使用运行时环境变量的示例
export async function getServerSideProps() {
  const apiUrl = process.env.API_BASE_URL;
  const data = await fetch(`${apiUrl}/user/list`);
  const userList = await data.json();
  
  return { props: { userList } };
}

• 这种方式不用修改文件，直接通过环境变量调整配置，适合容器化部署场景。

额外提醒 #

• 敏感配置必须通过服务端处理，绝对不能暴露给客户端。
• 如果是静态生成（SSG）的页面，因为构建时已经生成静态HTML，只能用客户端加载静态配置文件的方式，或者修改后重新触发静态生成。

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