Next.js 9.3+和所有路由

问题描述

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想要的数组。我敢肯定，我只需要仔细研究一下结果，但是找不到任何示例可以帮助我弄清楚。（比单层方案更实际的大多数示例似乎都涉及从数据库中获取数据，也许是因为我试图找到的方案被认为过于简单。对于非初学者来说可能是这样，但是...）

解决方法

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

Next.js 9.3+和所有路由

问题描述

解决方法

相关问答