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

【问题标题】：Generate next.js static pages from folder of markdown从 markdown 文件夹生成 next.js 静态页面
【发布时间】：2021-01-05 18:25:23
【问题描述】：

我正在构建一个静态 next.js 站点，并希望从 Markdown 文档的文件夹中生成一组静态页面（但就这个问题而言，可以是任何东西 - 文本文件等）。想象一下我有这个 docs 文件夹：

/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 之类的路线，并且我知道我可以像在 this example 中一样在页面本身中获取 slug，但我不确定是否/如何可以我使用getStaticPaths 和getStaticProps 在这个文件中生成我需要的静态路径？

非常感谢任何帮助！

【问题讨论】：

标签： next.js

【解决方案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 将被上面的每个数组调用，我可以检索降价并将内容准备为页面组件的道具。

【讨论】：