如何將 nextjs 靜態 HTML 導出到多個文件夾？

Question

我有一個靜態的 nextjs 網站，它有 100 萬個頁面，問題是 nextjs 將頁面導出到同一個輸出文件夾中，這需要大量的 ram 來訪問文件。

有沒有辦法導出多個文件夾中的頁面，例如每個文件夾 100k 頁？

本站只有主頁和帖子頁兩個頁面：

index.js
[postPage].js

在主頁中我使用了這段代碼：

export async function getStaticProps() {
  const { db } = await connectToDatabase();

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

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

在帖子頁面中，我使用了這段代碼：

export async function getStaticPaths() {

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

  const paths = posts.map((data) => {
    return {
      params: {
        postPage: data.slug.toString(),
      }
    }
  })

  return {
    paths,
    fallback: 'blocking'
  }
}

export async function getStaticProps(context) {

  const postSlug = context.params.postPage;

  const { db } = await connectToDatabase();

  const posts = await db
    .collection("myCollection")
    .find({ slug: { $eq: postsSlug } })
    .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)),
    },
  };
}

Answer 1

您可以使用next export命令來生成靜態構建（我想您已經在這樣做了）。

要控制文件的輸出路徑，可以使用exportPathMap重新映射路由：

module.exports = {
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/postPage': { page: '/new/post/page' },},
    }
  },
}