Cao Note

外观

NextJs 路由处理程序 ​

路由处理程序（Route Handlers）用于创建服务端 API，对应目录下创建 route.ts 文件即可。

基本用法 ​

ts
// app/api/user/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const data = [{ id: 1, name: 'A' }]
  return NextResponse.json({ data })
}

export async function POST(request: NextRequest) {
  const data = await request.json()
  return NextResponse.json(data)
}

export async function PUT(request: NextRequest) {}
export async function DELETE(request: NextRequest) {}
export async function PATCH(request: NextRequest) {}
// app/api/user/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const data = [{ id: 1, name: 'A' }]
  return NextResponse.json({ data })
}

export async function POST(request: NextRequest) {
  const data = await request.json()
  return NextResponse.json(data)
}

export async function PUT(request: NextRequest) {}
export async function DELETE(request: NextRequest) {}
export async function PATCH(request: NextRequest) {}

获取请求信息 ​

ts
export async function POST(request: NextRequest) {
  // URL 参数
  const searchParams = request.nextUrl.searchParams
  console.log(searchParams.get('orderId'))

  // Header
  const referer = request.headers.get('myHeader')

  // JSON 请求体
  const data = await request.json()

  // FormData
  // const formData = await request.formData()

  return NextResponse.json(data)
}
export async function POST(request: NextRequest) {
  // URL 参数
  const searchParams = request.nextUrl.searchParams
  console.log(searchParams.get('orderId'))

  // Header
  const referer = request.headers.get('myHeader')

  // JSON 请求体
  const data = await request.json()

  // FormData
  // const formData = await request.formData()

  return NextResponse.json(data)
}
ts
import { cookies } from 'next/headers'

export async function POST() {
  // 获取 Cookie
  const cookieStore = cookies()
  const token = cookieStore.get('test')

  // 设置 Cookie
  return new Response('OK', {
    status: 200,
    headers: { 'Set-Cookie': `myNewToken=123456` },
  })
}
import { cookies } from 'next/headers'

export async function POST() {
  // 获取 Cookie
  const cookieStore = cookies()
  const token = cookieStore.get('test')

  // 设置 Cookie
  return new Response('OK', {
    status: 200,
    headers: { 'Set-Cookie': `myNewToken=123456` },
  })
}

重定向 ​

ts
import { redirect } from 'next/navigation'

export async function POST(request: NextRequest) {
  redirect('https://www.baidu.com')
}
import { redirect } from 'next/navigation'

export async function POST(request: NextRequest) {
  redirect('https://www.baidu.com')
}

GET 请求的缓存 ​

默认情况下，使用 NextResponse 的 GET 请求会被缓存（仅生产模式，开发模式不会）：

ts
export async function GET(request: NextRequest) {
  const data = [{ id: 1, date: new Date().getMilliseconds() }]
  return NextResponse.json({ data })
  // 生产模式下时间戳不会变化（被缓存）
}
export async function GET(request: NextRequest) {
  const data = [{ id: 1, date: new Date().getMilliseconds() }]
  return NextResponse.json({ data })
  // 生产模式下时间戳不会变化（被缓存）
}

退出缓存的方式 ​

ts
// 1. 使用 Request 对象（依赖参数）
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  // 返回结果依赖于 request 参数
}

// 2. 使用动态函数（cookies、headers）
export async function GET(request) {
  const token = request.cookies.get('token')
}

// 3. 声明为动态模式
export const dynamic = 'force-dynamic'
// 1. 使用 Request 对象（依赖参数）
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  // 返回结果依赖于 request 参数
}

// 2. 使用动态函数（cookies、headers）
export async function GET(request) {
  const token = request.cookies.get('token')
}

// 3. 声明为动态模式
export const dynamic = 'force-dynamic'

控制缓存时效 ​

ts
export const revalidate = 10 // 缓存有效期 10 秒
export const revalidate = 10 // 缓存有效期 10 秒

Copyright © 2024-present xiaocao