Next.js嵌套动态路由配置求助:实现category/[slug]/post/[slug]路径
核心问题解决
- 你碰到的
pages/category/[category]/post/[slug]404问题,本质是目录大小写不匹配:实际目录是Post(首字母大写),但代码里写的是小写post,Next.js文件系统路由对大小写敏感,导致路由无法匹配,把目录名改成小写post或者代码中路径改成Post就能解决。
关于动态路由与CMS的疑问解答
- 不需要用catch-all路由(
[...params]):你要实现的domain/category/[category]/post/[slug]是标准嵌套动态路由,直接用嵌套文件夹结构就行,正确结构如下:pages/ category/ [category]/ index.js # 对应路由 domain/category/[category] post/ [slug].js # 对应路由 domain/category/[category]/post/[slug] getCategoryPost(params.category)的正确性:只要CMS里分类的标识字段(比如slug或ID)和params.category对应,这个调用就没问题。不用改CMS里的slug字段为[category],[category]只是Next.js动态路由的占位符,实际会被CMS存储的分类slug值替换。- CMS结构无需改动:你只需要在
pages/category/[category]/index.js的getStaticPaths中,从CMS拉取所有分类的slug生成静态路径;在getStaticProps里根据params.category获取对应分类数据。而pages/category/[category]/post/[slug].js中,通过params.category和params.slug从CMS获取对应文章数据即可。
内容的提问来源于stack exchange,提问作者NotReallySure
相关产品推荐
相关产品推荐

