从markdown文件夹生成next.js静态页面

Question

我已经构建了一个静态的next.js站点，并希望从一个标记文档文件夹中生成一组静态页面（但这个问题的目的可能是任何东西--文本文件等）。假设我有这个文档文件夹：

/docs/foo/bar.md
/docs/foo/baz.md
/docs/bar/foo.md
...
/docs/foobar.md

发现完整URL slug的唯一方法是在构建时，在构建时可以递归文档文件夹并发现以下路径：

/docs/foo/bar
/docs/foo/baz
/docs/bar/foo
...
/docs/foobar

通常情况下,如果我知道diff子路由,我可以像这样添加文件：

pages/docs/foo/[page].js
pages/docs/bar/[page].js

...然而，我不知道这些子文件夹在代码时能够做到这一点，只有在构建时当我递归文档。

我能找到的最接近的东西是一条包罗万象的路线，像这样：

pages/docs/[...slug].js

我知道我可以很容易地在应用程序中链接到诸如/docs/foo/bar之类的路由，并且我知道我可以像本例中那样在页面本身中获得slug，但是我不确定是否/如何使用GetStaticPaths和GetStaticProps在这个文件中生成我需要的静态路径？

非常感谢任何帮助！

Answer 1

我刚才设法解决了一个对我来说并不明显的问题...

在getStaticPaths中，由于[...slug].js，next.js期望提供的slug是路径部分的数组，因此构建数组的数组解决了这个问题：

export async function getStaticPaths() {
  // Load the docs from the file system and convert their relative docs paths to arrays
  const docs = [["foo", "bar"], ["foo", "baz"], ["bar", "foo"], ["foobar"]];

  return {
    paths: docs.map((doc) => {
      return {
        params: {
          slug: doc,
        },
      };
    }),
    fallback: false,
  };
}

...然后将根据上面的数组调用getStaticProps，我可以检索标记并准备内容作为page组件的道具。