NextJS重叠动态路由优先级调整：让job-[pageId].tsx优先匹配

NextJS的文件系统路由遵循匹配精度优先的规则，但你当前的结构里，通用动态路由[pageId].tsx会捕获所有未被更具体路由覆盖的路径——包括job-xxx开头的URL，因为它会把整个job-xxx字符串当作pageId的值。下面提供两种可行的解决思路：

方法一：重构路由目录结构（推荐） #

把job-[pageId].tsx迁移到单独的子目录，让它成为更明确的路由规则，比如：

pages/
├─ jobs/
│  └─ [pageId].tsx  # 对应路由 /jobs/xxx
└─ [pageId].tsx     # 匹配其他所有非jobs开头的路由 /xxx

这样/jobs/123会优先命中jobs/[pageId].tsx，其余路径才会落到根目录的通用路由上。如果必须保留job-xxx格式的URL，可以配合路由重写实现：

在next.config.js中添加重写规则：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/job-:pageId',
        destination: '/jobs/:pageId',
      },
    ];
  },
};

用户访问/job-123时，URL会保持不变，但内部会重写到/jobs/123，实际渲染jobs/[pageId].tsx组件。

方法二：在通用路由内做判断转发 #

如果不想调整目录结构，可以在[pageId].tsx里手动判断路径前缀，转发到对应的组件：

// pages/[pageId].tsx
import { useRouter } from 'next/router';
import JobPage from './job-[pageId]';

export default function GenericPage() {
  const router = useRouter();
  const { pageId } = router.query;

  if (typeof pageId === 'string' && pageId.startsWith('job-')) {
    const jobId = pageId.replace(/^job-/, '');
    return <JobPage jobId={jobId} />;
  }

  // 通用页面的渲染逻辑
  return <div>通用页面内容：{pageId}</div>;
}

这种方式无需修改路由结构，但通用路由会先被触发，再做内部转发，可读性和性能略逊于第一种方案。

注：如果使用NextJS 13+的App Router，路由逻辑类似，只需把组件放到app目录对应结构下，重写规则仍在next.config.js中配置。

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