如何解决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
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。