logoNext.js 繁體中文
文件部落格學習
介紹/API 參考文件/檔案慣例/route.js

route.js

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

HTTP 方法

route 檔案允許您為指定路由建立自訂請求處理器。支援以下 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) {}

須知：路由處理器 (Route Handlers) 僅在 app 目錄內可用。您不需要同時使用 API 路由 (pages) 和路由處理器 (app)，因為路由處理器應能處理所有使用情境。

參數

request (選用)

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

context (選用)

type Params = {
  team: string
}

export async function GET(request: Request, context: { params: Params }) {
  const team = context.params.team // '1'
}

// 根據您的路由參數定義 params 類型（請參閱下方表格）

目前，context 的唯一值是 params，它是一個包含當前路由的動態路由參數的物件。

範例URLparams
app/dashboard/[team]/route.js/dashboard/1{ team: '1' }
app/shop/[tag]/[item]/route.js/shop/1/2{ tag: '1', item: '2' }
app/blog/[...slug]/route.js/blog/1/2{ slug: ['1', '2'] }

NextResponse

路由處理器 (Route Handlers) 可以透過回傳 NextResponse 物件來擴充 Web Response API。這讓您能輕鬆設定 cookies、標頭、重新導向和改寫。查看 API 參考文件。

版本歷史

版本變更
v13.2.0引入路由處理器 (Route Handlers)。

page.js

關於 page.js 檔案的 API 參考文件。

路由區段設定

了解如何設定 Next.js 路由區段的選項。

On this page