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
    }
  }
}