Next.js API路由能否读取getStaticProps的构建时输出？

当然可以实现，核心思路是在构建阶段把计算好的静态数据持久化到文件或环境变量中，让前端和API路由都能读取到。以下是几种实用的实现方式：

1. 写入静态JSON文件（最通用方案） #

在构建阶段通过脚本生成数据并写入JSON文件，前端和API路由分别通过不同方式读取：

步骤1：编写构建脚本生成数据 #

创建一个独立的Node.js脚本，计算并保存静态数据：

// scripts/generate-static-data.js
const fs = require('fs');
const path = require('path');

// 替换成你的构建阶段计算逻辑
const computedStaticData = {
  appVersion: 'v1.2.3',
  featureFlags: {
    enableNewUI: true,
    showBetaBanner: false
  },
  apiEndpoints: { /* 预计算的API配置 */ }
};

// 将数据写入项目目录（比如data文件夹，需提前创建）
const outputPath = path.join(process.cwd(), 'data/generated-static-data.json');
fs.writeFileSync(outputPath, JSON.stringify(computedStaticData, null, 2));

步骤2：配置构建命令 #

在package.json中添加预构建命令，确保脚本在项目构建前执行：

{
  "scripts": {
    "prebuild": "node scripts/generate-static-data.js",
    "build": "your-framework-build-command" // 比如next build、vite build等
  }
}

步骤3：前端读取数据 #

如果文件放在src目录下，可直接import：

// 前端组件中
import staticData from '../data/generated-static-data.json';

console.log(staticData.appVersion);

如果放在public目录，也可以通过fetch获取：

async function getStaticData() {
  const res = await fetch('/generated-static-data.json');
  return res.json();
}

步骤4：API路由读取数据 #

在API路由中用Node.js的fs模块读取文件：

// 示例：Next.js API路由 pages/api/info.js
const fs = require('fs');
const path = require('path');

export default function handler(req, res) {
  // 读取构建阶段生成的静态数据
  const dataPath = path.join(process.cwd(), 'data/generated-static-data.json');
  const staticData = JSON.parse(fs.readFileSync(dataPath, 'utf8'));
  
  // 使用数据处理请求
  res.status(200).json({
    version: staticData.appVersion,
    features: staticData.featureFlags
  });
}

2. 注入环境变量（适合小型非敏感数据） #

如果数据量不大，可以将构建阶段计算的结果写入环境变量，同时暴露给前端和API路由：

步骤1：构建脚本写入环境变量 #

// scripts/generate-env-data.js
const fs = require('fs');
const computedData = JSON.stringify({
  appVersion: 'v1.2.3',
  defaultTheme: 'dark'
});

// 写入.env.local文件（前缀规则依框架而定，Next.js用NEXT_PUBLIC_，Vite用VITE_）
fs.writeFileSync('.env.local', `NEXT_PUBLIC_STATIC_DATA=${computedData}`);

步骤2：前端和API路由读取 #

• 前端直接使用：

const staticData = JSON.parse(process.env.NEXT_PUBLIC_STATIC_DATA);

• API路由直接读取：

// pages/api/config.js
export default function handler(req, res) {
  const staticData = JSON.parse(process.env.NEXT_PUBLIC_STATIC_DATA);
  res.status(200).json(staticData);
}

注意事项 #

• 若数据包含敏感内容，不要放在public目录或暴露给前端的环境变量中，仅让API路由通过私有文件读取
• 大型数据优先用JSON文件方案，避免环境变量长度限制问题
• 确保构建脚本生成的文件路径正确，使用process.cwd()获取项目根目录，避免相对路径错误

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