Next.js 9.3+ 和包罗万象的路线

Question

Next.js 初学者在这里，希望获得有关使用 getStaticPaths 和 getStaticProps 与包罗万象的路线的指针。大多数 Next.js 9.3+ 博客启动器似乎仅基于一个级别的博客文章（例如，/posts/post-1.md、/posts/post-2.md 等），但我徒劳地试图找到的是一个启动器——或者只是一个一组指令——地址处理，例如，/posts/yyyy/mm/postname.md 到 /pages/posts/[...post].js。

当然，我确实阅读了有关这些项目的 Next.js 文档，但我发现它们至少在这种特殊情况下有点帮助。我确实意识到它们是为更有经验的 Next.js 开发人员编写的。来自https://nextjs.org/docs/routing/dynamic-routes 的这一项让我现在尽可能接近，但还不够远：

如果页面名称使用包罗万象的路由，例如pages/[...slug]，则params 应包含slug，它是一个数组。例如，如果这个数组是['foo', 'bar']，那么 Next.js 会在/foo/bar处静态生成页面。

我尝试使用fs-readdir-recursive 来读取/posts/ 目录的各个级别，这很有效，但是它给我的东西并没有产生getStaticPaths 想要的数组。我确定我只需要按摩结果，但找不到任何示例来帮助我弄清楚。 （大多数确实比一级场景更进一步的例子似乎处理从数据库中获取，也许是因为我试图找到的场景被认为太简单了。对于非初学者来说可能是这样，但是......）

Answer 1

如果您的帖子都遵循相同的 URL 模式，我宁愿使用以下结构：

pages/
└── posts/
    └── [year]/
        └── [month]/
            └── [slug].js

根据您存储帖子的方式，您的getStaticPaths 只需列出帖子并为每个帖子公开year、month 和slug。

export async function getStaticPaths() {
  const posts = await getAllPosts()

  return {
    fallback: false,
    paths: posts.map(post => ({
      params: {
        year: post.year,
        month: post.month,
        slug: post.slug
      }
    })
  }
}

然后您将可以访问getStaticProps 中的所有year、month 和slug 参数。

export async function getStaticProps({params}) {
  // Retrieve blog post from year, month and slug
  const post = await getBlogPost({
    year: params.year,
    month: params.month,
    slug: params.slug
  })

  return {
    props: {
      post
    }
  }
}