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

在App Router体系下，原pages/api的路由模式已被Route Handlers替代，无需再通过判断req.method来区分请求类型，直接导出对应HTTP方法的函数即可完成处理。下面分两种常见场景说明实现方式：

一、创建对外的DELETE API接口（Route Handler） #

这是替代旧API路由的标准方案，用于提供可被前端或外部调用的DELETE接口。

1. 创建路由文件
   在app/api目录下按请求路径创建对应结构，比如要处理DELETE /api/items/[id]请求，就新建app/api/items/[id]/route.ts（或route.js）。

2. 编写DELETE处理逻辑
   直接导出DELETE函数，通过context.params获取URL中的动态参数，无需再从req.query提取：

import { NextResponse } from 'next/server';

// 模拟数据库删除操作，替换为你的实际业务逻辑
async function deleteItem(id: string) {
  if (!id) throw new Error('缺少待删除资源的ID');
  // 这里可以写数据库删除、第三方API调用等逻辑
  return true;
}

export async function DELETE(
  _request: Request,
  { params }: { params: { id: string } }
) {
  try {
    const { id } = params;
    await deleteItem(id);
    return NextResponse.json({ message: '删除成功' }, { status: 200 });
  } catch (error) {
    const errMsg = error instanceof Error ? error.message : '删除操作失败';
    return NextResponse.json({ error: errMsg }, { status: 400 });
  }
}

• 无需手动判断请求方法，Next.js会自动根据请求的HTTP方法匹配对应的导出函数。
• 动态路由参数通过context.params直接获取，类型可明确定义，比旧版req.query更直观。
• 用NextResponse返回响应，用法和旧的NextAPIResponse类似，适配App Router的服务器环境。

二、前端发起DELETE请求 #

在客户端组件中，用fetch或其他HTTP库调用上述接口即可：

// 客户端组件示例
async function handleDelete(id: string) {
  try {
    const res = await fetch(`/api/items/${id}`, {
      method: 'DELETE',
    });
    if (!res.ok) throw new Error('请求失败');
    const data = await res.json();
    console.log(data.message);
    // 这里可以添加UI更新逻辑，比如刷新列表
  } catch (error) {
    console.error('删除出错:', error);
  }
}

额外场景：Server Component内直接处理删除 #

如果是在Server Component中操作，无需走API路由，可直接调用后端逻辑减少网络请求：

// Server Component示例
async function ItemList() {
  // 模拟获取数据列表
  const items = await fetchItems();

  async function deleteItem(id: string) {
    // 直接调用删除逻辑，无需发起网络请求
    await deleteItem(id);
    // 重新获取更新后的列表
    const updatedItems = await fetchItems();
    // 渲染更新后的列表
  }

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.title}
          <button onClick={() => deleteItem(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

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