NextJS 13.4 App Router中如何正确实现PUT请求？

App Router里的API路由改用Route Handlers实现，和之前pages/api的写法完全不同，下面直接上实操步骤和示例：

1. 带动态URL参数的PUT请求（最常见场景） #

比如要实现PUT /api/items/[id]来更新指定ID的条目：

第一步：创建路由文件 #

在app/api目录下创建对应结构的文件夹和文件：

app/
└── api/
    └── items/
        └── [id]/
            └── route.ts

第二步：编写PUT处理函数 #

直接导出PUT函数，通过context.params获取URL里的动态参数，用标准Request对象处理请求体，返回NextResponse：

// app/api/items/[id]/route.ts
import { NextResponse } from 'next/server';

export async function PUT(request: Request, { params }: { params: { id: string } }) {
  // 从动态路由获取ID参数
  const itemId = params.id;

  // 校验ID是否存在
  if (!itemId) {
    return NextResponse.json(
      { error: '必须提供条目ID' },
      { status: 400 }
    );
  }

  try {
    // 解析请求体的JSON数据
    const updatedItemData = await request.json();

    // 这里写你的业务逻辑：比如调用数据库更新条目
    // 示例：假设更新操作成功
    return NextResponse.json(
      {
        message: `条目 ${itemId} 更新成功`,
        updatedData: updatedItemData
      },
      { status: 200 }
    );
  } catch (error) {
    // 处理请求体解析失败的情况
    return NextResponse.json(
      { error: '请求体格式无效，请传入JSON数据' },
      { status: 400 }
    );
  }
}

2. 不带动态参数的简单PUT请求 #

如果只是全局的更新操作（比如批量更新），直接在app/api/items/route.ts里写：

// app/api/items/route.ts
import { NextResponse } from 'next/server';

export async function PUT(request: Request) {
  try {
    const batchData = await request.json();

    // 批量更新的业务逻辑
    return NextResponse.json(
      { message: '批量更新完成', data: batchData },
      { status: 200 }
    );
  } catch (err) {
    return NextResponse.json(
      { error: '请求处理失败，请检查请求数据' },
      { status: 500 }
    );
  }
}

关键差异点（和旧写法对比） #

• 不需要再判断req.method === 'PUT'：每个HTTP方法对应一个导出的函数（PUT、GET、POST等），路由会自动匹配
• 参数获取：动态路由参数从context.params拿，查询参数用new URL(request.url).searchParams.get('key')获取
• 响应方式：用NextResponse.json()替代旧的res.json()，状态码通过第二个参数设置
• 不再依赖NextAPIRequest/NextAPIResponse，改用标准Web API的Request对象

内容的提问来源于stack exchange，提问作者Octo Palm Tree