Next.js 39: Route Handlers — Construyendo una API
easy⏱ 5 mincoursenextjs
Una función por método HTTP
Un archivo Route Handler puede exportar GET, POST, PUT, PATCH, DELETE y más — una función async por verbo, todas en el mismo route.ts. Cada una recibe el Request entrante y debe devolver un Response. NextResponse.json(data, { status }) es el atajo habitual para APIs JSON.
// app/api/todos/route.ts
import { NextResponse } from 'next/server';
let todos = [{ id: 1, text: 'Learn Route Handlers' }];
export async function GET() {
return NextResponse.json(todos);
}
export async function POST(request: Request) {
const body = await request.json();
const todo = { id: Date.now(), text: body.text };
todos.push(todo);
return NextResponse.json(todo, { status: 201 });
}
Construye el inspector del endpoint
Conecta el botón GET para llamar a la función local GET() y el botón POST para llamar a POST(text) con el valor del input. Muestra la respuesta JSON — incluyendo su código de estado — en el panel de abajo. Mantén export default App.
Los Route Handlers nunca llegan al cliente
A diferencia de un componente de página, el código dentro de un Route Handler corre solo en el servidor y nunca se incluye en el JavaScript del cliente. Por eso es el lugar correcto para consultas a bases de datos, claves de API y todo lo que no debe llegar al navegador.