如何将Next.js静态HTML导出至多个文件夹？

针对你100万篇文章页导出到同一文件夹导致内存占用过高的问题，可以通过修改路由结构+拆分路径参数的方式实现按每10万页一个文件夹导出，具体步骤如下：

1. 调整页面路由结构 #

将原来的单参数文章页路由[postPage].js，修改为嵌套参数路由：

• 在pages目录下新建嵌套结构：pages/[folder]/[postPage].js
• 把原[postPage].js的代码迁移到这个新文件中

2. 修改getStaticPaths逻辑，分配文件夹 #

在文章页的getStaticPaths中，给每篇文章计算对应的文件夹编号（按每10万篇一个分组），并将文件夹参数加入路由路径：

export async function getStaticPaths() {
  const { db } = await connectToDatabase();
  const posts = await db
    .collection("myCollection")
    .find({})
    .toArray();

  const paths = posts.map((data, index) => {
    // 按索引每10万篇分一个文件夹，folder编号从0开始
    const folder = Math.floor(index / 100000).toString();
    return {
      params: {
        folder,
        postPage: data.slug.toString(),
      }
    }
  })

  return {
    paths,
    fallback: 'blocking'
  }
}

注意：如果数据库查询结果的顺序可能变化，建议用文章的自增ID或有序字段（比如sequence）来计算文件夹，避免同一篇文章导出到不同文件夹：

// 假设每篇文章有自增id字段
const folder = Math.floor(data.id / 100000).toString();

3. 调整getStaticProps（核心逻辑无需修改） #

路由新增了folder参数，但实际查询文章只需要postPage（slug），所以仅需确保参数接收正确，核心查询逻辑保持不变：

export async function getStaticProps(context) {
  // 从params中获取slug，folder参数可忽略
  const postSlug = context.params.postPage;

  const { db } = await connectToDatabase();

  const posts = await db
    .collection("myCollection")
    .find({ slug: { $eq: postSlug } })
    .toArray();

  const postsFeed = await db
    .collection("myCollection")
    .aggregate([{ $sample: { size: 100 } }])
    .toArray();

  return {
    props: {
      posts: JSON.parse(JSON.stringify(posts)),
      postsFeed: JSON.parse(JSON.stringify(postsFeed)),
    },
  };
}

4. 导出后的结构效果 #

执行next export后，out文件夹结构会变成：

• out/index.html（首页）
• out/folder0/（包含第1-100000篇文章的html文件）
• out/folder1/（包含第100001-200000篇文章的html文件）
• ...
• out/folder9/（包含第900001-1000000篇文章的html文件）

这样每个文件夹下仅存10万个文件，能有效缓解单文件夹文件过多导致的内存占用问题。

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