Next.js 13 App Router动态路由实现问题求助

一、正确的动态路由文件夹结构 #

要实现/:section?/:subsection?这种两级可选动态路由，不能用固定的section文件夹，得遵循Next.js App Router的动态路由命名规则：

• 一级动态参数文件夹命名为[section]
• 二级动态参数文件夹嵌套在[section]下，命名为[subsection]
• 为每一级路由创建对应的page.tsx，处理不同层级的访问请求

最终结构如下：

src/app/
├── [section]/
│   ├── [subsection]/
│   │   └── page.tsx  # 匹配 /:section/:subsection
│   └── page.tsx      # 匹配 /:section
├── post/
│   └── page.tsx      # 固定路由，匹配 /post（优先级高于动态路由）
└── page.tsx          # 匹配根路径 /

这样既满足了动态路由需求，又能保留你想要的固定路由（比如/post），Next.js会优先匹配固定路由，不会和动态路由冲突。

二、获取路由参数的方法 #

1. 服务器组件获取参数 #

在各级page.tsx（默认是服务器组件）中，直接通过props的params对象获取：

// src/app/[section]/page.tsx
export default function SectionPage({ params }: { params: { section?: string } }) {
  return <div>当前Section：{params.section}</div>;
}

// src/app/[section]/[subsection]/page.tsx
export default function SubsectionPage({ params }: { params: { section?: string; subsection?: string } }) {
  return (
    <div>
      Section：{params.section}<br/>
      Subsection：{params.subsection}
    </div>
  );
}

2. 客户端组件获取参数 #

客户端组件需要使用next/navigation提供的useParams钩子，必须先声明'use client'指令：

'use client';

import { useParams } from 'next/navigation';

export default function ClientComponent() {
  const params = useParams<{ section?: string; subsection?: string }>();
  
  return (
    <div>
      客户端获取Section：{params.section}<br/>
      客户端获取Subsection：{params.subsection}
    </div>
  );
}

之前拿不到参数大概率是路由结构不符合动态路由规则，导致useParams无法识别对应参数。

三、替代rewrites的方案 #

你之前尝试用next-config.js的rewrites没成功，其实没必要用rewrites——正确的动态路由结构已经能实现需求。如果一定要通过rewrites映射到你理想的section文件夹结构，可以这样配置：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:section?/:subsection?',
        destination: '/section/:section?/:subsection?',
      },
    ];
  },
};

module.exports = nextConfig;

然后在src/app/section/下创建动态路由结构：

src/app/section/
├── [section]/
│   ├── [subsection]/
│   │   └── page.tsx
│   └── page.tsx
└── page.tsx

但这种方式多了一层嵌套，不如直接在根目录配置动态路由简洁。

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