Next.js 13中如何获取API路由的路径参数？

一、正确的文件结构 #

保持你最初的结构即可：

src/
└── app/
    └── api/
        └── image/
            └── [id]/
                └── route.ts

这个结构对应GET端点 /api/image/[id]（实际请求时替换[id]为具体值，比如/api/image/123）。

二、参数获取方法 #

动态路由参数不能用request.nextUrl.searchParams.get("id")，这个方法是用来获取URL查询参数（比如/api/image?id=123里的id）的。正确的方式是从路由上下文的params对象中提取：

import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  const imageId = params.id; // 请求/api/image/123时，imageId就是"123"
  
  return NextResponse.json({ id: imageId });
}

三、常见误区说明 #

• 重命名route.ts为[id].ts或者移动文件位置都是没必要的，App Router要求路由文件必须命名为route.ts/route.js。
• searchParams仅适用于?key=value形式的查询参数，和动态路由参数是完全不同的两种参数类型。

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