[英]Next.js 9.3+ and catch-all routes
Next.js beginner here, hoping for pointers on using getStaticPaths
and getStaticProps
with catch-all routes. Next.js 初学者在这里,希望得到关于使用
getStaticPaths
和getStaticProps
指针。 Most Next.js 9.3+ blog starters seem to be based on just one level of blog posts (eg, /posts/post-1.md
, /posts/post-2.md
, etc.), but what I've tried vainly to find is a starter — or just a set of instructions — that addresses handling, say, /posts/yyyy/mm/postname.md
through /pages/posts/[...post].js
.大多数 Next.js 9.3+ 博客初学者似乎只基于一个级别的博客文章(例如,
/posts/post-1.md
、 /posts/post-2.md
等),但我已经尝试过徒劳地找到一个启动器 - 或者只是一组指令 - 解决处理,例如, /posts/yyyy/mm/postname.md
到/pages/posts/[...post].js
。
I did read the Next.js docs regarding these items, of course, but I find them just a little short of helpful in at least this particular case.当然,我确实阅读了有关这些项目的 Next.js 文档,但我发现它们至少在这种特殊情况下有点帮助。 I do realize they're written for more experienced Next.js devs.
我确实意识到它们是为更有经验的 Next.js 开发人员编写的。 This one item, from https://nextjs.org/docs/routing/dynamic-routes , gets me as close as I can get at the moment, but not quite far enough:
这一项来自https://nextjs.org/docs/routing/dynamic-routes ,让我尽可能接近目前,但还不够远:
If the page name uses catch-all routes, for example
pages/[...slug]
, thenparams
should containslug
which is an array.如果页面名称使用包罗万象的路由,例如
pages/[...slug]
,则params
应包含数组slug
。 For example, if this array is['foo', 'bar']
, then Next.js will statically generate the page at/foo/bar
.例如,如果这个数组是
['foo', 'bar']
,那么 Next.js 将在/foo/bar
静态生成页面。
I tried using fs-readdir-recursive
to read the /posts/
directory's various levels and that works, but what it gives me doesn't produce the array that getStaticPaths
wants.我尝试使用
fs-readdir-recursive
来读取/posts/
目录的各个级别并且有效,但是它给我的不会产生getStaticPaths
想要的数组。 I'm sure I just need to massage the result but can't find any examples to help me figure it out.我确定我只需要按摩结果,但找不到任何示例来帮助我弄清楚。 (Most examples that do go further than the one-level scenario seem to deal with fetching from DBs, perhaps because the scenario I'm trying to find is considered too simple. Probably is, for non-beginners, but...)
(大多数比一级场景更进一步的例子似乎处理从数据库中获取,也许是因为我试图找到的场景被认为太简单了。对于非初学者来说,可能是,但是......)
If your posts all follow the same URL patterns, I would rather use the following structure:如果您的帖子都遵循相同的 URL 模式,我宁愿使用以下结构:
pages/
└── posts/
└── [year]/
└── [month]/
└── [slug].js
Depending on how you're storing your posts, your getStaticPaths
will only have to list the posts and expose year
, month
and slug
for each post.根据您存储帖子的方式,您的
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
}
})
}
}
Then you'll have access to all the year
, month
and slug
parameters in getStaticProps
.然后您将可以访问
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
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.