Next.js 多级动态路由文件结构配置咨询

嘿，我来帮你搞定这个两级动态路由的需求！在Next.js的文件系统路由规则里，要实现area/[area]/[region]这种两级动态路径，其实有两种清晰的配置方式，我给你详细拆解：

方法一：嵌套动态文件夹结构（推荐） #

这是最符合Next.js路由直觉的方式，结构清晰且容易维护：

你需要在pages/area目录下创建一个动态命名的文件夹[area]，然后在这个文件夹里再创建一个动态文件[region].js。最终的文件结构看起来是这样的：

pages/
└── area/
    ├── [area].js       # 匹配单级路由：/area/texas
    └── [area]/
        └── [region].js # 匹配两级路由：/area/texas/houston

这种结构下，Next.js会自动将路径中的第一级动态值映射给area参数，第二级映射给region参数。你可以在[region].js组件里通过useRouter钩子或者数据获取方法拿到这些参数：

示例组件代码 #

import { useRouter } from 'next/router';

export default function RegionDetail() {
  const router = useRouter();
  // 从路由查询中获取动态参数
  const { area, region } = router.query;

  return (
    <div>
      <h1>地区：{area}</h1>
      <p>子区域：{region}</p>
    </div>
  );
}

如果是静态生成（SSG）或者服务端渲染（SSR）的场景，也可以通过getStaticProps/getServerSideProps的params参数获取：

export async function getStaticProps({ params }) {
  // params里包含area和region两个字段
  const { area, region } = params;
  // 这里可以根据参数获取对应的数据
  return {
    props: { area, region }
  };
}

export async function getStaticPaths() {
  // 提前生成所有可能的路由路径
  return {
    paths: [
      { params: { area: 'texas', region: 'houston' } },
      { params: { area: 'california', region: 'losangeles' } }
    ],
    fallback: false
  };
}

方法二：使用Catch-All路由（适合不确定层级的场景） #

如果未来可能需要扩展更多层级的路由，也可以用Catch-All路由来实现。你只需要在pages/area目录下创建一个[...params].js文件：

pages/
└── area/
    ├── [area].js       # 匹配单级路由
    └── [...params].js  # 匹配两级及以上路由：/area/texas/houston、/area/texas/houston/downtown等

这种方式下，router.query.params会是一个数组，比如访问/area/texas/houston时，params就是['texas', 'houston']，你可以通过数组索引来获取对应的层级值：

import { useRouter } from 'next/router';

export default function DynamicAreaPage() {
  const router = useRouter();
  const [area, region] = router.query.params || [];

  return (
    <div>
      <h1>地区：{area}</h1>
      {region && <p>子区域：{region}</p>}
    </div>
  );
}

注意事项 #

• 路由优先级：Next.js会优先匹配更具体的路由，所以[area]/[region].js会比[...params].js先匹配到两级路径，不用担心冲突。
• 不要尝试用[area-region].js或者[area][region].js这种命名方式，它们只会被识别为单个动态路由段，无法匹配两级路径。

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