NextJS多动态路由配置问题：[early].tsx未被正确识别

我通过NextJS的动态页面创建功能实现了[video].tsx动态页面，代码如下：

const Video = (props) => {
  const router = useRouter()
  const { video } = router.query
  const videoData = GeneralVideo.find((d) => d.link === video)
}

链接设置为：

<Link href={'/videos/' + item.link} passHref={true}>

生成的URL如http://localhost:3000/videos/100004_SF可正常匹配[video].tsx页面。

现在我希望新增一套[early].tsx动态页面，代码如下：

const Early = (props) => {
  const router = useRouter()
  const { early } = router.query
  const videoData = GeneralVideo.find((d) => d.linkEarly === early)
}

链接设置为：

<Link href={'/videos/' + item.linkEarly} passHref={true}>

生成的URL如http://localhost:3000/videos/100159_SF_early可正常生成，但[early].tsx组件未被正确识别，页面为空。请问我的配置哪里出错了？

原因与解决方案 #

问题原因 #

Next.js的文件路由规则中，同一目录下的动态路由文件（如[video].tsx和[early].tsx）会遵循先定义先匹配的优先级逻辑。所有/videos/xxx格式的URL都会被[video].tsx先捕获，导致[early].tsx永远不会被触发，所以页面显示为空。

解决方案1：调整路由目录结构 #

给early类型的页面单独设置子目录，让路由路径区分开：

1. 调整目录结构：

pages/
  videos/
    [video].tsx
    early/
      [early].tsx

2. 修改Link的跳转路径：

<Link href={`/videos/early/${item.linkEarly}`} passHref={true}>

这样访问http://localhost:3000/videos/early/100159_SF_early时，就会正确匹配[early].tsx组件。

解决方案2：在现有动态页面中兼容两种逻辑 #

如果不想修改路由结构，可以在[video].tsx中添加判断逻辑，区分普通视频和early视频：

const Video = (props) => {
  const router = useRouter()
  const { video } = router.query

  // 判断参数是否属于early类型
  if (video?.endsWith('_early')) {
    const earlyData = GeneralVideo.find((d) => d.linkEarly === video)
    // 渲染early视频的内容
    return (
      <div>
        <h1>Early视频：{earlyData?.title}</h1>
        {/* 其他early视频相关内容 */}
      </div>
    )
  }

  // 处理普通视频逻辑
  const videoData = GeneralVideo.find((d) => d.link === video)
  return (
    <div>
      <h1>普通视频：{videoData?.title}</h1>
      {/* 其他普通视频相关内容 */}
    </div>
  )
}

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