route.js

Route-Handler ermöglichen es Ihnen, benutzerdefinierte Request-Handler für eine bestimmte Route mithilfe der Web Request und Response APIs zu erstellen.

route.ts

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

route.js

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

Eine Route-Datei ermöglicht es Ihnen, benutzerdefinierte Request-Handler für eine bestimmte Route zu erstellen. Die folgenden HTTP-Methoden werden unterstützt: GET, POST, PUT, PATCH, DELETE, HEAD und OPTIONS.

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) {}
 
// Wenn `OPTIONS` nicht definiert ist, implementiert Next.js automatisch `OPTIONS` und setzt den entsprechenden Response `Allow`-Header basierend auf den anderen im Route-Handler definierten Methoden.
export async function OPTIONS(request: Request) {}

route.js

export async function GET(request) {}
 
export async function HEAD(request) {}
 
export async function POST(request) {}
 
export async function PUT(request) {}
 
export async function DELETE(request) {}
 
export async function PATCH(request) {}
 
// Wenn `OPTIONS` nicht definiert ist, implementiert Next.js automatisch `OPTIONS` und setzt den entsprechenden Response `Allow`-Header basierend auf den anderen im Route-Handler definierten Methoden.
export async function OPTIONS(request) {}

Parameter

`request` (optional)

Das request-Objekt ist ein NextRequest-Objekt, eine Erweiterung der Web Request API. NextRequest bietet Ihnen weitere Kontrolle über den eingehenden Request, einschließlich einfachem Zugriff auf cookies und ein erweitertes, geparistes URL-Objekt nextUrl.

route.ts

import type { NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const url = request.nextUrl
}

route.js

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

`context` (optional)

params: Ein Promise, der ein Objekt mit den dynamischen Routenparametern für die aktuelle Route auflöst.

app/dashboard/[team]/route.ts

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

app/dashboard/[team]/route.js

export async function GET(request, { params }) {
  const team = (await params).team
}

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

Beispiele

Cookies verarbeiten

route.ts

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

route.js

import { cookies } from 'next/headers'
 
export async function GET(request) {
  const cookieStore = await cookies()
 
  const a = cookieStore.get('a')
  const b = cookieStore.set('b', '1')
  const c = cookieStore.delete('c')
}

Versionsverlauf

Version	Änderungen
`v15.0.0-RC`	`context.params` ist jetzt ein Promise. Ein Codemod ist verfügbar
`v15.0.0-RC`	Das standardmäßige Caching für `GET`-Handler wurde von statisch auf dynamisch geändert
`v13.2.0`	Route-Handler werden eingeführt.