使用Next 13.5.6与App Router，如何获取动态路由参数？

在App Router的API路由体系里，动态路由参数（比如你创建的[id]）是通过请求处理函数的第二个参数直接获取的，不需要从NextRequest里提取，也不用客户端钩子。

正确实现方式 #

在app/api/products/[id]/route.ts文件中，你可以这样写：

import { NextResponse } from 'next/server';

// 定义参数类型，保证TypeScript类型安全
type Params = {
  params: { id: string };
};

export async function GET(request: Request, { params }: Params) {
  // 直接解构出动态路由中的id
  const { id } = params;
  
  // 这里就可以使用id做后续逻辑，比如查询数据库
  // const product = await getProductFromDB(id);
  
  return NextResponse.json({ productId: id });
}

关键说明 #

• App Router的API路由函数（GET/POST等）会接收两个参数：第一个是Request对象（对应NextRequest），第二个是包含动态路由参数的params对象。
• 动态参数名必须和你创建的文件夹名严格对应：比如文件夹是[id]，参数就是params.id；如果是[productId]，则用params.productId。
• 这种方式和你之前用Node+Express的req.params.id、Pages Router的req.query.id逻辑完全一致，只是获取方式做了调整。

常见误区 #

• 不要尝试从NextRequest里找路由参数：NextRequest仅包含请求头、URL查询参数（?后的部分）等信息，动态路由参数是单独传入的。
• 客户端钩子（useRouter/useSearchParams等）仅适用于客户端组件，服务端API路由不能使用，这是框架的正常设计。

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