Next.js提供api接口

看react官网在推Next.js,所以简单学习了解一下

DEMO

   使用cna官方脚手架（13+版本）初始化项目以后目录如下：

可以看出，初始项目只有一个根路由页面page.tsx,想要增加一个纯粹的api route可以在app/目录下创建api/xxx/route.ts。即可访问api/xxx接口

export async function GET() {
  return Response.json({ message: "Hello World" });
}

api接口类型

可以通过定义函数名直接指定接口类型

route.ts

export async function GET(request: Request) {}
 
export async function HEAD(request: Request) {}
 
export async function POST(request: Request) {}
 
export async function PUT(request: Request) {}
 
export async function DELETE(request: Request) {}
 
export async function PATCH(request: Request) {}
 
// If `OPTIONS` is not defined, Next.js will automatically implement `OPTIONS` and set the appropriate Response `Allow` header depending on the other methods defined in the Route Handler.
export async function OPTIONS(request: Request) {}

参数类型

接口函数支持两个入参

import type { NextRequest } from 'next/server'
 
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ team: string }> }
) {
  const { team } = await params
}

request

包括cookies、query、body等request对象信息

context

context: {params: Promise<[x: string]: any>}
params是一个Promise类型的动态路由参数对象

Example	URL	params
app/dashboard/[team]/route.js	/dashboard/1	Promise<{ team: ‘1’ }>
app/shop/[tag]/[item]/route.js	/shop/1/2	Promise<{ tag: ‘1’, item: ‘2’ }>
app/blog/[…slug]/route.js	/blog/1/2	Promise<{ slug: [‘1’, ‘2’] }>

详细配置参考

• https://nextjs.org/docs/app/building-your-application/routing/route-handlers
• https://nextjs.org/docs/app/api-reference/file-conventions/route