Next.js：getStaticPaths读取文件名后数组为空，push无效原因

核心问题是异步代码执行顺序不匹配：fs.readdir默认是异步回调API，你在回调函数外声明的fileNames数组，会在回调还没执行（也就是还没读取到文件列表）的时候就被你使用/返回，因此输出为空；而forEach内部能看到文件名，是因为forEach是在回调执行阶段（已经拿到文件列表）才运行的。

解决方法 #

推荐使用fs.promises.readdir（Promise异步版本）配合async/await，确保代码按预期顺序执行：

import fs from 'fs/promises';
import path from 'path';

export async function getStaticPaths() {
  // 拼接public文件夹的绝对路径
  const publicDir = path.join(process.cwd(), 'public');
  // 读取public目录下的所有文件
  const allFiles = await fs.readdir(publicDir);

  // 过滤JSON文件并去除后缀
  const fileNames = allFiles
    .filter(file => file.endsWith('.json'))
    .map(file => file.slice(0, -5)); // 去掉".json"后缀（长度为5）

  // 生成Next.js需要的静态路径格式
  const paths = fileNames.map(id => ({
    params: { id }
  }));

  return {
    paths,
    fallback: false
  };
}

额外注意事项 #

• 确保process.cwd()指向项目根目录，Next.js项目中该值默认正确，无需额外调整。
• 必须过滤.json文件，避免将public目录下的图片、HTML等其他资源纳入路径生成逻辑。
• 若使用低版本Node.js，fs.promises可能需通过require('fs').promises导入，ES模块环境下直接用import fs from 'fs/promises'即可。

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