1

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则应包含slugwhich 是一个数组。例如，如果这个数组是['foo', 'bar']，那么 Next.js 将在 处静态生成页面/foo/bar。

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

4

1 回答 1

6

如果您的帖子都遵循相同的 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
      }
    })
  }
}

然后你就可以访问所有year,month和中的slug参数了getStaticProps。

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
    }
  }
}
于 2020-08-26T17:46:18.193 回答