如何在Next.js中创建/users/:id/verify/:token路由

根据你使用的Next.js路由体系，分两种方案实现：

方案一：Pages Router（传统页面路由） #

按照Next.js的文件路由规则，基于你已有的/users/:id结构扩展即可：

• 进入你已有的pages/users/[id]目录
• 创建verify子文件夹
• 在verify文件夹内新建[token].js（或.tsx）文件，这个文件就是对应/users/:id/verify/:token路径的渲染组件

最终目录结构示例：

pages/
└── users/
    └── [id]/
        ├── index.js  # 对应/users/:id路径
        └── verify/
            └── [token].js  # 对应/users/:id/verify/:token路径

在[token].js中，通过useRouter钩子获取动态参数并展示内容：

import { useRouter } from 'next/router';

export default function VerifyToken() {
  const router = useRouter();
  const { id, token } = router.query;

  return (
    <div>
      <h1>用户 {id} 验证页面</h1>
      <p>当前验证令牌：{token}</p>
      {/* 在这里添加你的验证逻辑和页面内容 */}
    </div>
  );
}

方案二：App Router（Next.js 13+ 新路由体系） #

如果你的项目使用App Router，按以下目录结构创建文件：

• 进入app/users/[id]目录
• 创建verify子文件夹
• 在verify内创建[token]子文件夹，然后在该文件夹下新建page.js（或.tsx）文件

最终目录结构示例：

app/
└── users/
    └── [id]/
        ├── page.js  # 对应/users/:id路径
        └── verify/
            └── [token]/
                └── page.js  # 对应/users/:id/verify/:token路径

在page.js中，直接通过组件参数获取动态值：

export default function VerifyTokenPage({ params }) {
  const { id, token } = params;

  return (
    <div>
      <h1>用户 {id} 验证页面</h1>
      <p>当前验证令牌：{token}</p>
      {/* 在这里添加你的验证逻辑和页面内容 */}
    </div>
  );
}

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