Next.js单路径含两个动态分段时的路由机制疑问

1. 如何确定pipelineId的值 #

Next.js的文件系统路由会直接将URL路径与pages目录结构一一映射。对于你的页面路径./pages/pipelines/[pipelineId]/builds/[buildId].tsx：

• 方括号[xxx]是动态路由占位符，对应URL中该位置的实际参数值。
• 当用户访问类似/pipelines/1001/builds/2001的URL时，Next.js会自动解析路径的每一段：
  • URL里的1001会匹配[pipelineId]占位符，被存入router.query.pipelineId
  • URL里的2001会匹配[buildId]占位符，被存入router.query.buildId
• 你可以和获取buildId完全一样，通过router.query.pipelineId?.toString() || null;拿到pipelineId的值。

2. 为什么不会跳过前面的路径组件 #

Next.js的路由匹配是严格按层级顺序进行的，完全遵循pages目录的层级结构：

• 它会从pages根目录开始，逐段匹配URL的路径：
  1. 先匹配pipelines目录，对应URL的第一个路径段/pipelines
  2. 再匹配pipelines目录下的[pipelineId]动态目录，对应URL的第二个路径段（比如/1001）
  3. 接着匹配[pipelineId]目录下的builds子目录，对应URL的第三个路径段/builds
  4. 最后匹配builds目录下的[buildId].tsx文件，对应URL的第四个路径段（比如/2001）
• 只有当所有层级的路径段都一一对应匹配时，Next.js才会定位到这个页面组件，绝不会跳过任何前面的目录层级。

举个反例：如果用户访问/pipelines/builds/2001，因为缺少[pipelineId]对应的路径段，Next.js会直接返回404错误，这也印证了路径匹配的严格层级要求。

内容的提问来源于stack exchange，提问作者dstromberg