Next 13白标应用如何在构建时获取非路由类静态配置数据？

以下是几种适合在构建时处理多客户端静态配置的方案，替代杂乱的.env文件：

方案1：结构化客户端配置文件 + 构建时动态选择 #

1. 在项目中创建客户端专属配置目录，每个客户端对应一个TypeScript文件：

   // src/config/clients/client-a.ts
   export const clientConfig = {
     appName: "客户A门户",
     featureFlags: {
       enableAnalytics: true,
       enableChat: false
     },
     apiBaseUrl: "https://api.client-a.com"
   };
   

2. 编写主配置文件，根据环境变量加载对应客户端的配置：

   // src/config/index.ts
   const clientId = process.env.NEXT_PUBLIC_CLIENT_ID || "default";
   
   let selectedConfig;
   switch (clientId) {
     case "client-a":
       selectedConfig = require("./clients/client-a").clientConfig;
       break;
     case "client-b":
       selectedConfig = require("./clients/client-b").clientConfig;
       break;
     default:
       selectedConfig = require("./clients/default").clientConfig;
       break;
   }
   
   export const config = selectedConfig;
   

3. 构建时指定客户端ID：

   NEXT_PUBLIC_CLIENT_ID=client-a next build
   

Next.js会在构建时摇树优化，仅打包选中的客户端配置，无冗余代码。

方案2：预构建脚本注入配置 #

1. 编写Node.js脚本，将指定客户端的配置复制到项目固定路径：

   // scripts/set-client-config.js
   const fs = require("fs");
   const path = require("path");
   
   const clientId = process.env.CLIENT_ID;
   const sourcePath = path.join(__dirname, "../src/config/clients", `${clientId}.ts`);
   const targetPath = path.join(__dirname, "../src/config/current-client.ts");
   
   if (!fs.existsSync(sourcePath)) {
     throw new Error(`未找到${clientId}的配置文件`);
   }
   
   fs.copyFileSync(sourcePath, targetPath);
   console.log(`已设置客户端配置为${clientId}`);
   

2. 在package.json中添加预构建脚本：

   "scripts": {
     "prebuild": "node scripts/set-client-config.js",
     "build": "next build"
   }
   

3. 执行构建命令：

   CLIENT_ID=client-a npm run build
   

项目中直接导入src/config/current-client.ts即可使用当前客户端的配置。

方案3：环境变量 + 配置Schema校验 #

如果仍偏好使用环境变量，可通过Schema将零散的env变量组织为结构化对象：

1. 使用Zod等工具定义配置校验Schema：

   // src/config/index.ts
   import { z } from "zod";
   
   const configSchema = z.object({
     NEXT_PUBLIC_APP_NAME: z.string(),
     NEXT_PUBLIC_ENABLE_ANALYTICS: z.coerce.boolean(),
     NEXT_PUBLIC_ENABLE_CHAT: z.coerce.boolean(),
     NEXT_PUBLIC_API_BASE_URL: z.string()
   });
   
   export const config = configSchema.parse(process.env);
   

2. 创建客户端专属环境文件（如.env.client-a、.env.client-b），包含该客户端的所有配置项。
3. 使用dotenv-cli加载对应环境文件后构建：

   "scripts": {
     "build": "dotenv -e .env.$CLIENT_ID next build"
   }
   

4. 执行构建：

   CLIENT_ID=client-a npm run build
   

注意事项 #

• 若配置包含敏感数据，请勿使用NEXT_PUBLIC_前缀，仅在Server Components中导入使用。
• 所有方案均为构建时处理，配置会被打包进应用，无运行时加载开销。

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