route.js

Los Route Handlers (Manejadores de Ruta) permiten crear manejadores de solicitud personalizados para una ruta específica utilizando las APIs web Request y Response.

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

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

Un archivo route permite crear manejadores de solicitud personalizados para una ruta específica. Se admiten los siguientes métodos HTTP: GET, POST, PUT, PATCH, DELETE, HEAD y 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` no está definido, Next.js implementará automáticamente `OPTIONS` y establecerá el encabezado `Allow` apropiado en la Response según los otros métodos definidos en el Route Handler.
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` no está definido, Next.js implementará automáticamente `OPTIONS` y establecerá el encabezado `Allow` apropiado en la Response según los otros métodos definidos en el Route Handler.
export async function OPTIONS(request) {}

Parámetros

`request` (opcional)

El objeto request es un objeto NextRequest, que extiende la API web Request. NextRequest proporciona mayor control sobre la solicitud entrante, incluyendo acceso fácil a cookies y un objeto URL extendido y parseado 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` (opcional)

params: una promesa que se resuelve en un objeto que contiene los parámetros de ruta dinámica para la ruta actual.

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
}

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

Ejemplos

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

Historial de versiones

Versión	Cambios
`v15.0.0-RC`	`context.params` ahora es una promesa. Hay disponible un codemod
`v15.0.0-RC`	El almacenamiento en caché predeterminado para los manejadores `GET` cambió de estático a dinámico
`v13.2.0`	Se introducen los Route Handlers.

Referencia

Métodos HTTP