You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js嵌套动态路由配置求助:实现category/[slug]/post/[slug]路径

核心问题解决
  • 你碰到的pages/category/[category]/post/[slug] 404问题,本质是目录大小写不匹配:实际目录是Post(首字母大写),但代码里写的是小写post,Next.js文件系统路由对大小写敏感,导致路由无法匹配,把目录名改成小写post或者代码中路径改成Post就能解决。
关于动态路由与CMS的疑问解答
  1. 不需要用catch-all路由([...params]):你要实现的domain/category/[category]/post/[slug]是标准嵌套动态路由,直接用嵌套文件夹结构就行,正确结构如下:
    pages/
      category/
        [category]/
          index.js       # 对应路由 domain/category/[category]
          post/
            [slug].js    # 对应路由 domain/category/[category]/post/[slug]
    
  2. getCategoryPost(params.category)的正确性:只要CMS里分类的标识字段(比如slug或ID)和params.category对应,这个调用就没问题。不用改CMS里的slug字段为[category],[category]只是Next.js动态路由的占位符,实际会被CMS存储的分类slug值替换。
  3. 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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.09 16:05:33