Sebastian Gomez

Feb 21, 2022

Updated: Jun 24, 2026

Crea tu API REST con Next.js

Crear una API REST con Next.js es muy fácil. Simplemente sigue estos pasos:

1. Crea una carpeta para tu ruta dentro de la carpeta app/api.
2. Define los métodos HTTP de tu API como funciones exportadas.
3. Usa el estándar web Request/Response para manejar la comunicación entre cliente y servidor.

A continuación, te presento un ejemplo detallado de cómo hacerlo.

Vigente en Next.js 16: Este post usa el App Router, que es el camino por defecto y recomendado desde Next.js 13. Las APIs viven en app/api/<ruta>/route.js mediante Route Handlers. Si vienes de un tutorial antiguo con pages/api/*, ese modelo (Pages Router) sigue funcionando, pero hoy se considera heredado; más abajo te muestro la equivalencia.

Estructura de archivos

app
  api
    hello
      route.js

Recuerda que las rutas de API de Next.js no son lo mismo que las Serverless API Functions que Vercel ofrece en su plataforma, aunque comparten algunas similitudes.

Ejemplo de endpoint

En el App Router, cada método HTTP es una función exportada con su propio nombre (GET, POST, PUT,...). Se usa el estándar web Request/Response:

// app/api/data/route.js
// Maneja la solicitud HTTP GET para la ruta '/api/data'
export function GET(request) {
  // Response.json() crea una respuesta JSON con el Content-Type correcto y código 200
  return Response.json({ estamosEn: "Medellín JS" });
}

Fíjate en lo simple que es comparado con el viejo pages/api: ya no necesitas tocar res.statusCode, res.setHeader ni JSON.stringify a mano, Response.json() se encarga de todo.

Varios métodos en una misma ruta

Una de las grandes ventajas del App Router: no necesitas ninguna librería de enrutamiento (como next-connect). Cada método es simplemente otra función exportada en el mismo route.js:

// app/api/saludo/route.js

export function GET() {
  return new Response("Hola Medellín JS");
}

export function POST() {
  return Response.json({ hola: "MedellinJS" });
}

export function PUT() {
  return new Response("Hola Amigos");
}

Si necesitas CORS, puedes añadir las cabeceras directamente en la Response (headers: { "Access-Control-Allow-Origin": "*" }) o gestionarlas en el middleware.js del proyecto, sin dependencias extra.

CRUD de comentarios para un blog

Rutas:

• Crear comentario: POST /api/comment
• Actualizar comentario: PATCH /api/comment/:id
• Eliminar comentario: DELETE /api/comment/:id
• Obtener un comentario: GET /api/comment/:id
• Obtener todos los comentarios: GET /api/comment

En el App Router, las rutas dinámicas usan carpetas [id], y cada route.js agrupa los métodos de ese recurso:

app
  api
    comment
      route.js          // POST /api/comment  ·  GET /api/comment
      [id]
        route.js        // GET/PATCH/DELETE /api/comment/:id

El parámetro dinámico llega en el segundo argumento del handler:

// app/api/comment/[id]/route.js
export async function GET(request, { params }) {
  const { id } = await params;
  // ...busca el comentario por id...
  return Response.json({ id });
}

export async function DELETE(request, { params }) {
  const { id } = await params;
  // ...elimina el comentario...
  return new Response(null, { status: 204 });
}

Conclusión

En este post aprendimos cómo:

• Crear una API REST con Next.js usando los Route Handlers del App Router.
• Definir varios métodos HTTP como funciones exportadas, sin necesidad de next-connect.
• Implementar un CRUD básico para administrar comentarios en un blog con rutas dinámicas [id].

Ejercicios propuestos

1. Practica creando una API REST para administrar usuarios en una aplicación.
2. Implementa autenticación y autorización en tu API REST.
3. Integra tu API REST con una base de datos real.

Resumen

• Crear una API REST con Next.js es muy fácil siguiendo las convenciones del App Router.
• Los Route Handlers (app/api/<ruta>/route.js) nos permiten manejar rutas y métodos de manera eficiente, usando el estándar web Request/Response y sin librerías extra.
• Puedes aplicar estas técnicas para implementar un CRUD de comentarios en un blog o cualquier otro proyecto que tengas en mente.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente. No dudes en dejar un comentario si te fue útil, si tienes alguna duda o si deseas añadir algo más. ¡Buena suerte!