route.js

路由處理器 (Route Handlers) 允許您使用 Web Request 和 Response API 為指定路由建立自訂請求處理器。

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

參考資料

HTTP 方法

路由檔案允許您為指定路由建立自訂請求處理器。支援以下 HTTP 方法：GET、POST、PUT、PATCH、DELETE、HEAD 和 OPTIONS。

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) {}

// 如果未定義 `OPTIONS`，Next.js 會自動實作 `OPTIONS` 並根據路由處理器中定義的其他方法設定適當的 Response `Allow` 標頭。
export async function OPTIONS(request: Request) {}

參數

`request` (選填)

request 物件是一個 NextRequest 物件，擴展自 Web Request API。NextRequest 讓您能進一步控制傳入的請求，包括輕鬆存取 cookies 和擴展後的解析 URL 物件 nextUrl。

import type { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const url = request.nextUrl
}

`context` (選填)

params: 一個解析為物件的 Promise，包含當前路由的動態路由參數。

export async function GET(
  request: Request,
  { params }: { params: Promise<{ team: string }> }
) {
  const { team } = await params
}

範例	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'] }>`

範例

處理 cookies

import { cookies } from 'next/headers'

export async function GET(request: NextRequest) {
  const cookieStore = await cookies()

  const a = cookieStore.get('a')
  const b = cookieStore.set('b', '1')
  const c = cookieStore.delete('c')
}

版本歷史

版本	變更
`v15.0.0-RC`	`context.params` 現在是一個 Promise。提供 codemod 可用
`v15.0.0-RC`	`GET` 處理器的預設快取行為從靜態改為動態
`v13.2.0`	引入路由處理器 (Route Handlers)

On this page