NextJS 14 App Router：如何从API端点获取slug参数？

在App Router的API路由里，你需要通过第二个路由上下文参数来获取[confirmationCode]这个动态slug，而非从req对象中提取。

具体实现方式 #

• 给PATCH函数添加第二个参数（一般命名为params）
• 从该参数中解构出confirmationCode，它会自动匹配路由文件中[confirmationCode]的命名

修正后的代码示例 #

import { NextResponse } from 'next/server';

export const PATCH = async (req: Request, { params }: { params: { confirmationCode: string } }) => {
  const data = await req.json();

  // 直接从params中获取slug值
  const confirmationCode = params.confirmationCode;

  // 执行后续业务逻辑
  // do something with confirmationCode

  return NextResponse.json({ success: true, confirmationCode });
};

补充说明 #

• TypeScript项目中添加参数类型定义可获得更好的代码提示，纯JavaScript项目可省略类型部分
• 若路由包含多个动态段（如/api/v1/[userId]/confirmation-codes/[confirmationCode]/route.ts），可从params中同时解构出多个slug值

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