route.js

Les gestionnaires de route (Route Handlers) vous permettent de créer des gestionnaires de requête personnalisés pour une route donnée en utilisant les API Web Request et Response.

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

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

Un fichier route vous permet de créer des gestionnaires de requête personnalisés pour une route donnée. Les méthodes HTTP suivantes sont prises en charge : GET, POST, PUT, PATCH, DELETE, HEAD et 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) {}

// Si `OPTIONS` n'est pas défini, Next.js implémentera automatiquement `OPTIONS` et définira l'en-tête de réponse `Allow` approprié en fonction des autres méthodes définies dans le gestionnaire de route.
export async function OPTIONS(request: Request) {}

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

// Si `OPTIONS` n'est pas défini, Next.js implémentera automatiquement `OPTIONS` et définira l'en-tête de réponse `Allow` approprié en fonction des autres méthodes définies dans le gestionnaire de route.
export async function OPTIONS(request) {}

Paramètres

`request` (optionnel)

L'objet request est un objet NextRequest, qui étend l'API Web Request. NextRequest vous donne un meilleur contrôle sur la requête entrante, notamment un accès facile aux cookies et un objet URL étendu et analysé nextUrl.

import type { NextRequest } from 'next/server'

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

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

`context` (optionnel)

params : une promesse qui se résout en un objet contenant les paramètres de route dynamique pour la route actuelle.

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

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

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

Exemples

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

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

Historique des versions

Version	Changements
`v15.0.0-RC`	`context.params` est maintenant une promesse. Un codemod est disponible
`v15.0.0-RC`	La mise en cache par défaut pour les gestionnaires `GET` a été changée de statique à dynamique
`v13.2.0`	Introduction des gestionnaires de route (Route Handlers).

Référence

Méthodes HTTP