如何为部署在IIS上的静态Next.js应用设置动态环境变量

因为Next.js编译时会把import的静态资源（包括JSON、env变量）直接嵌入bundle，所以要实现动态配置必须用运行时获取的方式，以下是几个可行方案：

方案一：public目录静态JSON + 运行时异步加载 #

这是最直接的方式，通过异步请求读取独立的JSON文件，避免编译时嵌入：

1. 在public目录下保留static-env.json文件：

{
  "apiURL" : "http://192.168.1.12:8080/api"
}

2. 不要用import引入，而是在代码中通过fetch异步加载：
   • 可以封装一个工具函数：

   export async function getApiBaseUrl() {
     try {
       const res = await fetch('/static-env.json');
       const envData = await res.json();
       return envData.apiURL;
     } catch (err) {
       // 加载失败时的默认值
       return 'http://default-api-url/api';
     }
   }
   

   • 在组件或API请求中使用：

   import { useState, useEffect } from 'react';
   
   function ApiCallComponent() {
     const [apiUrl, setApiUrl] = useState('');
   
     useEffect(() => {
       getApiBaseUrl().then(url => setApiUrl(url));
     }, []);
   
     // 确保apiUrl加载完成后再发起请求
     const fetchData = async () => {
       if (!apiUrl) return;
       const res = await fetch(`${apiUrl}/your-endpoint`);
       // 处理响应
     };
   
     return <button onClick={fetchData}>获取数据</button>;
   }
   

3. 部署后修改public/static-env.json的内容，刷新页面即可生效。

方案二：IIS自定义响应头 + 前端读取 #

利用IIS的响应头传递配置，无需修改前端文件，直接在IIS后台调整：

1. 打开IIS管理器，找到你的Next.js静态站点，点击HTTP响应头。
2. 点击添加，设置响应头名称为X-API-URL，值为你的API地址（如http://192.168.1.12:8080/api）。
3. 前端代码中通过请求当前页面的HEAD信息读取响应头：

   export async function getApiUrl() {
     const res = await fetch(window.location.origin, { method: 'HEAD' });
     const apiUrl = res.headers.get('X-API-URL');
     // 兜底默认值
     return apiUrl || 'http://default-api-url/api';
   }
   

4. 后续修改API地址时，直接在IIS里更新响应头值即可，无需改动前端文件。

方案三：全局JS配置文件 + 挂载window对象 #

通过独立的JS文件暴露全局变量，完全脱离编译打包流程：

1. 在public目录创建env-config.js：

window.appConfig = {
  apiURL: 'http://192.168.1.12:8080/api'
};

2. 在pages/_document.js中手动引入这个JS文件（确保在Next脚本之前加载）：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class CustomDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script src="/env-config.js" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default CustomDocument;

3. 前端代码直接使用全局变量：

// 发起API请求
const fetchData = async () => {
  const res = await fetch(`${window.appConfig.apiURL}/your-endpoint`);
  // 处理响应
};

4. 部署后修改public/env-config.js中的apiURL值，刷新页面即可生效。

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