Skip to content

Next.js Route Handlers(API 接口)

route.ts 写 API 接口,相当于 Express 的 app.get/post,前后端放一个项目里。

文件约定

app/api/
  user/route.ts   → GET/POST /api/user
  login/route.ts  → POST /api/login

page.tsxroute.ts 不能放同一目录(Next.js 无法判断用哪个)。

支持的 HTTP 方法

ts
export async function GET(request) {}     // 查
export async function POST(request) {}    // 增
export async function PUT(request) {}     // 改
export async function PATCH(request) {}   // 部分改
export async function DELETE(request) {}  // 删
export async function HEAD(request) {}    // 仅返回头
export async function OPTIONS(request) {} // 预检

简单示例

ts
// app/api/user/route.ts
export async function GET() {
  return Response.json({ name: '小满', age: 18 })
}

export async function POST(request: Request) {
  const body = await request.json()
  return Response.json({ ok: true, data: body })
}

动态参数

ts
// app/api/user/[id]/route.ts
export async function GET(request, { params }) {
  const { id } = await params
  return Response.json({ userId: id })
}