This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

La Agencia de Nueva Generación ya está aquí. Únete a más de 3.000 profesionales de agencias en Agency Advantage 2026. Regístrate gratis→

Rutas de la API de Next.js: cómo funcionan y cómo crear puntos finales REST

Actualizado el Septiembre 22, 2026

18 min de lectura

Puntos clave

  • Código unificado: Las rutas de la API de Next.js te permiten crear y gestionar puntos finales del backend directamente desde tu proyecto frontend.
  • Métodos estándar: los puntos finales gestionan los datos asignando los métodos HTTP estándar (GET, POST, PUT, DELETE) a acciones específicas del backend.
  • Fiabilidad de la API: Independientemente de la base de datos o las herramientas que utilices, un punto final seguro requiere una validación estricta de las entradas y una gestión adecuada de los errores.

Las aplicaciones utilizan los puntos finales REST para conectar el frontend con el backend. Sea cual sea la aplicación web que uses, por ejemplo, Amazon, donde cargas datos, rellenas un formulario o actualizas los artículos de tu carrito de la compra, todas las acciones se realizan a través de una API.

Además, Next.js facilita mucho la creación de puntos finales mediante rutas de API. Lo que quiero decir es que no necesitas un proyecto de backend aparte. Todo queda dentro de la misma aplicación de Next.js, lo que simplifica las cosas, sobre todo si quieres desarrollar funcionalidades rápidamente.

En este blog, también te explicaré qué son las rutas de API y cómo funcionan. Después, crearé una pequeña API de tareas con cinco puntos finales. Además, le añadiré validación y un manejo básico de errores.

Al final, tendrás un ejemplo funcional que subiré a mi GitHub y que luego desplegaré en el alojamiento gestionado de Node.js de Cloudways (Velocity) para que puedas verlo en funcionamiento en un servidor real.

¿Qué son las rutas de la API de Next.js?

Las rutas de la API son simplemente archivos que gestionan las solicitudes entrantes en Next.js. Estos archivos de rutas se encuentran dentro de tu proyecto y cada uno actúa como un punto final del backend. Así, cuando una solicitud llega a una URL específica, Next.js ejecuta automáticamente el archivo correspondiente.

Así que, como te decía antes, no hace falta configurar un backend aparte.

Funciona de una forma bastante sencilla. Dentro de la carpeta de la app, creas un archivo route.ts dentro de una carpeta. El nombre de la carpeta pasa a formar parte de la URL.

Por ejemplo, el archivo «app/api/users/route.ts» gestiona las solicitudes a «/api/users».

¿Sigues ahí?

En nuestro archivo route.ts, exportamos funciones como GET, POST, PUT, PATCH o DELETE. Cuando llega una solicitud, Next.js ejecuta la función que coincide con el método HTTP. Y eso es todo.

¿Cuándo usar las rutas de la API de Next.js?

Las rutas de la API de Next.js son útiles en la mayoría de los casos, pero… no en todos. En mi opinión, aquí les presento cuándo tienen sentido y cuándo definitivamente no.

Tiene sentido cuando:

  • Estás desarrollando una aplicación full-stack y quieres mantener el frontend y el backend en un mismo proyecto
  • La API la usas principalmente para tu propio frontend y no como una API pública para terceros
  • quieres puntos de conexión rápidos para acciones como el envío de formularios, la lectura de bases de datos, etc.
  • Estás desplegando en Vercel o en cualquier otra plataforma sin servidor que ejecute Node.js

No tiene sentido cuando:

  • necesites tareas que tardan mucho en ejecutarse, como subidas de archivos grandes que pueden interrumpirse por agotarse el tiempo de espera
  • tu backend es pesado y funcionaría mejor en un servidor dedicado
  • necesitas WebSockets o conexiones en tiempo real (las rutas de la API no conservan estado)
  • estás creando una API pública que necesita más control sobre aspectos como la limitación de frecuencia, el almacenamiento en caché y el control de versiones

Para proyectos de pequeña y mediana escala, como aquellos en los que el frontend y el backend están estrechamente acoplados, merece la pena usar las rutas de API de Next.js.

Alojamiento de bases de datos y PHP de alto rendimiento para tus API

. Da soporte a las rutas de tu API de Next.js con un backend dedicado. Cloudways ofrece pilas de PHP optimizadas y bases de datos escalables para que tus datos estén disponibles al instante.

Métodos HTTP habituales

Cada método HTTP tiene una función específica cuando se usa con las API REST. Te explico rápidamente para qué sirve cada uno.

Método Para qué sirve Ejemplo de uso
GET Recoge datos de un servidor Recoge todas las tareas o una sola tarea
POST Crea nuevos datos en un servidor Añade una nueva tarea
PUT Actualiza los datos existentes (sustitución completa) Actualiza el título, el estado, etc., de una tarea
PARCHE Actualiza parte de los datos existentes (sustitución parcial) Marca una tarea como completada
BORRAR Elimina datos de un servidor Elimina una tarea

En el miniproyecto que voy a hacer a continuación, usaré GET, POST, PUT y DELETE. PATCH es más o menos como PUT, pero se usa para actualizaciones parciales. No lo voy a tratar por separado.

Cómo crear puntos finales REST usando las rutas de API de Next.js

Para enseñarte cómo funcionan los puntos finales REST usando las rutas de API de Next.js, voy a crear un miniproyecto. Básicamente, será el backend de una app tipo «lista de tareas» con cinco puntos finales que te permitirán:

  • recoger todas las tareas
  • recoger solo una tarea
  • crear una tarea
  • actualizarla
  • y borrar la tarea

Esto abarcará los principales métodos HTTP que usarías en cualquier API REST. Omitiré la creación de una interfaz de usuario para este proyecto y, en su lugar, te mostraré las solicitudes a la API ejecutándose a través de Postman.

Lo que voy a usar

  • Node.js
  • VS Code
  • Cartero
  • Next.js, Prisma y SQLite

Paso 1: Configuración del proyecto Next.js

Lo primero que necesito para empezar es un proyecto Next.js. Pero… antes de crearlo, necesito Node.js en mi máquina.

Instalando Node.js

Puedo entrar en nodejs.org y descargar la versión LTS. Voy a descargar la versión binaria independiente porque el portátil de la oficina tiene restricciones de TI.

Descargando la versión de soporte a largo plazo de Node.js o el instalador binario independiente.

Una vez descargado, descomprimiré el archivo en mi carpeta de descargas.

C:\Users\abdulrehman\Downloads\node-v24.15.0-win-x64\node-v24.15.0-win-x64

Vista en el explorador de archivos de la ruta de la carpeta del binario independiente de Node.js, ya descomprimida.

Abrir la carpeta del proyecto en la línea de comandos

Ahora ya puedo crear una nueva carpeta para mi proyecto. La llamaré: tasks-api.

A continuación, abriré la línea de comandos. Aquí es donde ejecutaré todos los comandos.

La ventana del símbolo del sistema está abierta y lista dentro del nuevo directorio del proyecto Next.js.

Una vez que se abra el símbolo del sistema, iré a la carpeta de mi proyecto:

cd C:\Users\abdulrehman\Desktop\tasks-api

Indicar al símbolo del sistema dónde está el binario de Node

Como he descargado la versión binaria independiente, el símbolo del sistema no sabe dónde está Node en mi ordenador. Así que tengo que indicárselo.

Para ello, voy a ejecutar este comando con la ruta donde descomprimí mi carpeta de Node:

set PATH=%PATH%;C:\Users\abdulrehman\Downloads\node-v24.15.0-win-x64\node-v24.15.0-win-x64

Para comprobar que todo me funciona bien, voy a ejecutar estos dos comandos uno tras otro:

node -v
npm -v

Como puedo ver los números de versión de Node y npm, todo va de maravilla.

Salida de la consola que confirma que los números de versión de Node y npm están instalados correctamente.

Crear el proyecto de Next.js

Ahora que ya tengo Node y npm listos, puedo crear mi proyecto de Next.js ejecutando este comando:

npx create-next-app@latest .

He añadido el punto al final del comando para indicarle a Next.js que configure el proyecto dentro de mi carpeta actual, la de «tasks-api», en lugar de crear una carpeta nueva.

Después de ejecutar el comando, solo tendré que pulsar Intro para aceptar unas cuantas indicaciones que aparecerán en pantalla.

Línea de comandos en la que se ejecuta el comando «npx create-next-app@latest .», con las indicaciones de configuración a la vista

Una vez hecho esto, Next.js empieza a instalar todas las dependencias. Cuando termina, aparece un mensaje que dice «¡Éxito!» para confirmar que el proyecto se ha creado.

 El mensaje «success» que aparece en la consola cuando Next.js termina de instalar las dependencias.

Abrir el proyecto en VS Code

Ahora voy a abrir nuestro proyecto en VS Code, voy a ir a Archivo > Abrir carpeta y voy a seleccionar la carpeta «tasks-api».

La carpeta «app/» es donde están todas las rutas. Más adelante crearé mis puntos finales de la API en esta misma carpeta.

El explorador de archivos de VS Code muestra la estructura del proyecto Next.js recién creado, con la carpeta «app» resaltada.

Ejecutar el proyecto

Ahora puedo volver al símbolo del sistema e iniciar el servidor de desarrollo ejecutando este comando:

npm run dev

Salida de la línea de comandos que muestra cómo «npm run dev» inicia el servidor de desarrollo de Next.js.

Una vez que se haya iniciado, puedo comprobarlo entrando en: http://localhost:3000. Como veo la página de bienvenida predeterminada de Next.js, eso significa que funciona.

Navegador web que muestra la página de bienvenida predeterminada de Next.js en localhost:3000.

Paso 2: Instalar y configurar Prisma con SQLite

Ahora necesito una base de datos para guardar mis tareas. Para este tutorial, usaré SQLite y Prisma.

Instalación de Prisma

Para instalar Prisma v6, primero tengo que detener el servidor de desarrollo que se está ejecutando. Para ello, pulsaré CTRL + C.

A continuación, en la misma ventana del símbolo del sistema, ejecutaré:

npm install prisma@^6 --save-dev

Consola en la que se muestra el comando para instalar la dependencia de desarrollo de Prisma.

Una vez instalada, también necesito Prisma Client. Esta será la biblioteca que usará mi código para consultar la base de datos. Para instalarla, usaré este comando:

npm install @prisma/client@^6

Consola en la que se muestra el comando para instalar el paquete del cliente de Prisma.

Inicializando Prisma

A continuación, voy a configurar Prisma en mi proyecto ejecutando:

npx prisma init --datasource-provider sqlite

En la línea de comandos, ejecuta «npx prisma init» para configurar Prisma utilizando SQLite como fuente de datos.

Este comando:

  • Crea una carpeta llamada «prisma/» que contiene un archivo llamado «schema.prisma».
  • También crea un archivo .env en la raíz del proyecto.

VS Code muestra la nueva carpeta «prisma» y el archivo .env generado en la raíz del proyecto.

Comprobación de los archivos generados

Ahora voy a abrir el archivo .env en VS Code y voy a buscar esta línea:

DATABASE_URL="file:./dev.db"

Vista en VS Code del archivo .env, donde se configura la URL de la base de datos como dev.db para SQLite.

Esto le dice a Prisma que cree una base de datos SQLite como un archivo llamado dev.db dentro de la carpeta prisma/.

También voy a abrir prisma/schema.prisma para asegurarme de que veo esto:

generator client {
  provider = "prisma-client-js"
}
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

VS Code muestra los bloques de generador y fuente de datos generados inicialmente en schema.prisma.

Todo está bien. Puedo seguir adelante sin problemas.

Paso 3: Definir el modelo de tareas y ejecutar la primera migración

Ahora le diré a Prisma que cada tarea de mi base de datos tendrá un ID, un título, una descripción, un estado de finalización y una marca de tiempo.

Añadir el modelo de tareas

Para ello, voy a abrir el archivo prisma/schema.prisma en VS Code y añadiré lo siguiente:

model Task {
  id          Int      @id @default(autoincrement())
  title       String
  description String?
  completed   Boolean  @default(false)
  createdAt   DateTime @default(now())
}

Vista de VS Code en la que se muestra el modelo de Prisma añadido para la definición de la tabla de la base de datos de tareas.

Ejecutar la primera migración

Como he añadido el modelo «Task», voy a ejecutar una migración para que Prisma pueda crear una tabla correspondiente en SQLite.

Para hacerlo, voy a ejecutar este comando en el CMD:

npx prisma migrate dev --name init

La parte «–name init» es solo un nombre para esta migración. Podría haberle puesto cualquier nombre.

Salida de la consola al ejecutar «npx prisma migrate dev» para crear el esquema de la base de datos.

Comprobación rápida

Para asegurarme de que todo va bien hasta ahora, debería ver los siguientes archivos en la carpeta prisma/ de VS Code:

El explorador de archivos de VS Code muestra el nuevo archivo de base de datos SQLite «dev.db» dentro de la carpeta «prisma».

Como veo los archivos que necesito en la carpeta de mi proyecto, puedo seguir adelante.

El archivo «dev.db» de la imagen de arriba es la base de datos SQLite que va a usar mi proyecto. Ahora mismo está vacía, pero ya tiene la tabla «Task» lista para recibir datos.

Paso 4: Crear los puntos finales GET y POST para /api/tasks

Ahora voy a crear dos puntos finales:

  • GET devolverá todas las tareas
  • y POST añadirá una nueva tarea

En Next.js, las rutas de la API en el App Router se definen mediante un archivo route.ts dentro de una carpeta. El nombre de la carpeta se convierte en la URL.

Configuración de Prisma Client

Antes de crear los endpoints, necesito una instancia de Prisma Client que el resto de la app pueda importar.

Dentro de la carpeta de la app, voy a crear una carpeta llamada «lib» y, dentro de ella, un archivo llamado «prisma.ts».

El explorador de archivos de VS Code muestra la ruta al nuevo archivo de configuración del cliente de Prisma en app/lib.

Luego, ahí dentro, pegaré este código:

import { PrismaClient } from "@prisma/client";
const globalForPrisma = global as unknown as { prisma: PrismaClient };
export const prisma = globalForPrisma.prisma || new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Este código evita que Prisma cree un nuevo cliente cada vez que se actualiza la página. Si no lo hago, mi servidor podría abrir varias conexiones, lo que podría provocar problemas de rendimiento.

Crear el archivo de rutas

`
`. Dentro de la carpeta «app», voy a crear una carpeta llamada «api». Dentro de «api», otra carpeta llamada «tasks». Dentro de «tasks», un archivo llamado «route.ts».

La ruta quedaría así:

app/api/tasks/route.ts

Representación visual de la estructura de rutas de los archivos para la nueva ruta de la API de Next.js.

El punto final GET

Ahora voy a abrir app/api/tasks/route.ts y añadiré:

import { NextResponse } from "next/server";
import { prisma } from "@/app/lib/prisma";
export async function GET() {
  const tasks = await prisma.task.findMany();
  return NextResponse.json(tasks);
}

VS Code mostrando el código TypeScript del punto final GET de la API de Next.js para recuperar todas las tareas.

prisma.task.findMany() me va a traer todas las tareas.

NextResponse.json() te los devolverá.

El nombre de la función «GET» es lo que le indica a Next.js que se trata de un controlador GET. POST, PUT y DELETE funcionan de la misma manera.

El punto final POST

En el mismo archivo, debajo de la función GET, voy a añadir el bloque de código de la función POST:

export async function POST(request: Request) {
  const body = await request.json();
  const task = await prisma.task.create({
    data: {
      title: body.title,
      description: body.description,
    },
  });
  return NextResponse.json(task, { status: 201 });
}

VS Code mostrando el código TypeScript para el punto final POST de la API de Next.js que sirve para crear una nueva tarea.

Probar los puntos finales

Para probarlo, voy a iniciar el servidor de desarrollo:

npm run dev

Abre la aplicación de escritorio de Postman.

GET /api/tasks

Voy a seleccionar el método GET, introducir http://localhost:3000/api/tasks en la barra de direcciones y hacer clic en «Enviar». Como mi base de datos está vacía, la respuesta que veré será:

[]

La aplicación de escritorio Postman muestra una solicitud GET al punto final «tasks» que devuelve un array vacío.

POST /api/tasks

A continuación, cambiaré el método a POST y mantendré la misma URL.

Además, selecciona «Cuerpo» > «Sin formato» > «JSON», pega este código y haz clic en «Enviar».

{
  "title": "Write the tutorial",
  "description": "Finish the Next.js API routes guide"
}

Interfaz de Postman en la que se muestra una solicitud POST con un cuerpo JSON sin formato que contiene el título y la descripción de la tarea.

Debería ver esta respuesta:

{
  "id": 1,
  "title": "Write the tutorial",
  "description": "Finish the Next.js API routes guide",
  "completed": false,
  "createdAt": "2026-05-12T10:32:14.000Z"
}

Postman muestra la respuesta 201, que indica que se ha realizado correctamente, y el objeto de tarea creado con el ID 1.

Como puedes ver en la captura de pantalla de arriba, ha funcionado.

Ahora voy a comprobar si la tarea se ha guardado en la base de datos. Para ello, voy a volver a cambiar el método a GET y haré clic en «Enviar».

En lugar de un array vacío, esta vez debería ver lo que se guardó antes.

[
  {
    "id": 1,
    "title": "Write the tutorial",
    "description": "Finish the Next.js API routes guide",
    "completed": false,
    "createdAt": "2026-05-12T10:32:14.000Z"
  }
]

Y genial, la captura de pantalla de abajo confirma que ambos puntos finales me funcionan. El POST está guardando las tareas en la base de datos y el GET las está recuperando.

Postman muestra una solicitud GET posterior que devuelve el array JSON con la única tarea guardada.

Ahora tengo que configurar las operaciones GET por ID, PUT y DELETE.

Paso 5: Crear los puntos finales GET, PUT y DELETE para /api/tasks/[id]

. Estos son los puntos finales que tengo que crear; operan sobre una sola tarea mediante su ID.

Crear el archivo de rutas dinámicas

Para ello, dentro de la carpeta app/api/tasks, voy a crear una nueva carpeta llamada [id]. Y dentro de esa carpeta, voy a crear un archivo llamado route.ts.

La ruta quedaría así:

app/api/tasks/[id]/route.ts

El [id] del nombre de la carpeta sirve como marcador de posición.

El punto final GET por ID

Ahora voy a abrir app/api/tasks/[id]/route.ts y añadiré este código:

import { NextResponse } from "next/server";
import { prisma } from "@/app/lib/prisma";
export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const task = await prisma.task.findUnique({
    where: { id: Number(id) },
  });
  if (!task) {
    return NextResponse.json({ error: "Task not found" }, { status: 404 });
  }
  return NextResponse.json(task);
}

El punto final PUT

. Debajo de la función GET, en el mismo archivo, voy a añadir esto:

export async function PUT(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const body = await request.json();
  const task = await prisma.task.update({
    where: { id: Number(id) },
    data: {
      title: body.title,
      description: body.description,
      completed: body.completed,
    },
  });
  return NextResponse.json(task);
}

El punto final DELETE

Y debajo de la función PUT, voy a añadir esto:

export async function DELETE(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  await prisma.task.delete({
    where: { id: Number(id) },
  });
  return NextResponse.json({ message: "Task deleted" });
}

Probar los puntos finales

Con el servidor de desarrollo en marcha, voy a abrir Postman y probar cada uno de los nuevos puntos finales que he creado.

GET /api/tasks/1

La respuesta debería ser la tarea que creé antes:

{
  "id": 1,
  "title": "Write the tutorial",
  "description": "Finish the Next.js API routes guide",
  "completed": false,
  "createdAt": "2026-05-12T10:32:14.000Z"
}

PUT /api/tasks/1

Ahora voy a cambiar a PUT con la misma URL http://localhost:3000/api/tasks/1. Y pega este código:

{
  "title": "Write the tutorial",
  "description": "Finish the Next.js API routes guide",
  "completed": true
}

Ahora la respuesta debería mostrar «completed: true»:

{
  "id": 1,
  "title": "Write the tutorial",
  "description": "Finish the Next.js API routes guide",
  "completed": true,
  "createdAt": "2026-05-12T10:32:14.000Z"
}

Postman muestra una actualización de una solicitud PUT, con la respuesta que confirma el estado «completed: true».

DELETE /api/tasks/1

Por último, voy a cambiar a DELETE, manteniendo la misma URL http://localhost:3000/api/tasks/1.

La respuesta debería ser:

{
  "message": "Task deleted"
}

Postman muestra que la solicitud de eliminación se ha realizado correctamente y el mensaje «tarea eliminada» en el cuerpo de la respuesta.

Y para comprobar si la función de eliminación ha funcionado, usaré el método GET con esta URL: /api/tasks.

El array debería volver a estar vacío, como también puedes ver en el GIF de abajo.

Postman muestra una solicitud GET final a /api/tasks que devuelve un array vacío después de que se haya eliminado la tarea.

Así que los 5 endpoints funcionan bien. Ahora voy a añadir validación de entradas para que mi API no acepte datos incorrectos.

Paso 6: Añadir validación de entrada con Zod

De momento, los métodos POST y PUT aceptan cualquier dato que introduzca. Eso es un problema. Para solucionarlo, voy a implementar la validación de entrada.

Para la validación voy a usar Zod, que me permitirá definir cómo deben ser los datos y luego comparar los datos que reciba con ese modelo.

Para instalar Zod

, voy a detener el servidor de desarrollo que ya está en marcha. Y luego, en la línea de comandos, voy a ejecutar este comando de instalación:

npm install zod

Salida de la consola que muestra el comando npm que se está ejecutando para instalar la biblioteca de validación zod.

Crear un esquema de validación

Dentro de la carpeta app/lib, voy a crear un archivo llamado validations.ts.

El explorador de archivos de VS Code muestra la ruta al archivo validations.ts recién creado.

Dentro del archivo, voy a añadir este código:

import { z } from "zod";
export const taskSchema = z.object({
  title: z.string().min(1, "Title is required"),
  description: z.string().optional(),
  completed: z.boolean().optional(),
});

Incorporar la validación a las solicitudes POST y PUT

Para ponerlo todo en marcha, voy a abrir el archivo route.ts en app/api/tasks/route.ts y añadiré esto debajo de las importaciones que ya hay:

import { taskSchema } from "@/app/lib/validations";

Vista en VS Code del archivo route.ts, donde se muestra la instrucción de importación del esquema de validación de tareas.

Y sustituye la función POST actual por este fragmento de código:

export async function POST(request: Request) {
  const body = await request.json();
  const result = taskSchema.safeParse(body);
  if (!result.success) {
    return NextResponse.json(
      { error: result.error.issues },
      { status: 400 }
    );
  }
  const task = await prisma.task.create({
    data: result.data,
  });
  return NextResponse.json(task, { status: 201 });
}

Ahora voy al otro archivo route.ts, en app/api/tasks/[id]/route.ts, y voy a usar el mismo método de validación para la función PUT. Añade la importación de taskSchema al principio y actualiza la función PUT:

export async function PUT(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const body = await request.json();
  const result = taskSchema.safeParse(body);
  if (!result.success) {
    return NextResponse.json(
      { error: result.error.issues },
      { status: 400 }
    );
  }
  const task = await prisma.task.update({
    where: { id: Number(id) },
    data: result.data,
  });
  return NextResponse.json(task);
}

Probando la validación

Para probarlo, voy a volver a iniciar el servidor de desarrollo y enviaré una solicitud POST a http://localhost:3000/api/tasks con un título vacío:

{
  "title": "",
  "description": "Trying to break the API"
}

Me sale un código 400 con un mensaje de error que dice que el título es obligatorio.

Postman muestra una solicitud POST que falla con un código de estado 400 (solicitud incorrecta) porque falta el título.

Si lo vuelvo a intentar con un cuerpo válido, la tarea se creará con un código 201 OK.

Postman muestra una solicitud POST que se ha realizado con éxito y ha recibido un código de estado 201 OK tras pasar la validación.

Y con esto, ya tenemos la validación lista tanto para POST como para PUT.

Paso 7: Añadir el manejo de errores

Para asegurarme de que todo siga funcionando si algo sale mal, tendré que añadir un «try/catch» en mis llamadas a la base de datos.

Envolviendo los endpoints

Para ello, tengo que ir a app/api/tasks/route.ts y envolver el cuerpo de la función GET en un try/catch.

En el catch, devolveré un mensaje del tipo «No se han podido recuperar las tareas». Y aplicaré el mismo envoltorio a POST.

Código de VS Code que muestra los bloques «try/catch» implementados para la gestión de errores en las funciones «get» y «post».

Luego iré a app/api/tasks/[id]/route.ts y añadiré el bloque try/catch a las funciones GET por ID, PUT y DELETE.

VS Code muestra el bloque «try/catch» que se ha añadido para gestionar los errores en la función «getById».

VS Code mostrando el bloque «try/catch» que se ha añadido para gestionar los errores en la función «put».

Probar la gestión de errores

Para probarlo, voy a enviar una solicitud DELETE a http://localhost:3000/api/tasks/9999. Este ID no existe, así que, en lugar de que se cuelgue el sistema, la gestión de errores que he implementado mostrará un error 404 con un mensaje.

Postman muestra una solicitud de eliminación con un ID que no existe y devuelve un mensaje de error 404 «No encontrado».

También voy a probar con una solicitud PUT en /api/tasks/9999 con un cuerpo JSON válido. Esto también me dará un 404 con un mensaje de error.

Postman muestra una solicitud PUT con un ID que no existe y devuelve un mensaje de error 404 (página no encontrada).

Y eso es todo. Los 5 puntos finales funcionan y los datos se guardan en SQLite. Con esto termino mi miniproyecto sobre la API REST usando las rutas de API de Next.js.

Paso 8: Implementación en el alojamiento gestionado de Node.js de Cloudways

Ahora que todo funciona correctamente en local y el proyecto está en GitHub , lo implementaré en el servicio de alojamiento gestionado de Node.js de Cloudways. (Consulta nuestra guía detallada sobre cómo implementar una aplicación Node.js en Cloudways).

Lanzando la aplicación en Cloudways

Primero, iré al panel de control de Cloudways y crearé una nueva aplicación Node.js. Para esta demostración, haré clic en Velocity en el menú lateral izquierdo y luego en Empezar .

El menú «Velocity» del panel de control de Cloudways, con el botón «Empezar» para poner en marcha una aplicación de Node.js

Luego seleccionaré el plan Básico y haré clic en Continuar.

Pantalla de selección del plan Starter de Cloudways con el botón «Continuar»

Ahora tengo que conectar mi cuenta de GitHub, GitLab o Bitbucket a Cloudways. Como mi proyecto está en GitHub, lo voy a conectar ahí.

Pantalla de Cloudways para conectar una cuenta de GitHub, GitLab o Bitbucket

Una vez conectado, voy a seleccionar mi repositorio «nextjs-api-routes-tasks» y haré clic en «Continuar».

Seleccionar el repositorio de GitHub «nextjs-api-routes-tasks» en Cloudways

Ahora Cloudways elige automáticamente el framework, la rama y la versión de Node adecuados. En mi caso, ha configurado el framework como Next.js SSR, la rama como «main» y la versión de Node como Node 24 (LTS).

Además, eligió automáticamente npm como gestor de paquetes, el comando de compilación «npm run build» y el archivo de entrada «npx next start», sin que yo tuviera que configurar nada.

Añadir la conexión a la base de datos

. Antes de hacer el deploy, tengo que indicarle a Prisma dónde está la base de datos. A nivel local lo tenía en mi archivo .env, pero ese archivo nunca se subió a GitHub, así que lo añadiré aquí en su lugar.

Voy a desplazarme hasta Variables de entorno: haz clic en «Añadir» y configura lo siguiente:

Panel de variables de entorno de Cloudways para añadir la variable DATABASE_URL

  • DATABASE_URL — archivo:./dev.db

La variable de entorno DATABASE_URL está configurada con el archivo: ./dev.db en Cloudways

Al hacer esto, Prisma apuntará al mismo archivo SQLite que usé al compilar y probar el proyecto localmente.

Implementar la aplicación

Una vez que todo esté listo, haré clic en «Guardar» y luego en «Implementar ahora».

Botones «Guardar» y «Implementar ahora» en la pantalla de configuración de la app de Cloudways

Ahora Cloudways empezará a descargar el código de GitHub, instalará las dependencias, generará el Prisma Client, compilará la app y la pondrá en marcha.

Código para recuperar el registro de implementación de Cloudways e instalar las dependencias
Registro de implementación de Cloudways que muestra la compilación de Next.js y el inicio de la aplicación

Probar la API en producción

Cuando termine el despliegue, copiaré la URL temporal de la página de resumen de la app. Después iré a Postman y cambiaré http://localhost:3000 por la URL de Cloudways en producción en cada solicitud.

Haré las mismas pruebas que antes:

  • Una solicitud GET a /api/tasks devuelve las tareas

Solicitud GET de Postman a /api/tasks que devuelve la lista de tareas de la app en producción

  • Una solicitud POST crea uno nuevo

Solicitud POST de Postman para crear una nueva tarea en la aplicación de Cloudways en producción

  • Y otra llamada GET muestra que se ha guardado

Solicitud GET de Postman que confirma que se ha guardado la nueva tarea

Después, un GET por ID, un PUT y un DELETE en /api/tasks/1; todo funciona exactamente igual que lo hacía localmente, solo que ahora en un servidor en producción.

OBTENER por ID

Solicitud GET de Postman por ID que devuelve una sola tarea de la API en producción

PUT

Solicitud PUT de Postman para actualizar una tarea en la API en producción

BORRAR

Solicitud DELETE de Postman para eliminar una tarea de la API activa

Y ahí tienes todo mi proyecto de la API de Tasks funcionando en directo en Cloudways Velocity, con los cinco puntos finales funcionando de principio a fin.

Resumen de

«
» Para resumirlo rápidamente, en este tutorial he conectado Prisma a una base de datos SQLite, he creado cinco puntos finales CRUD, he añadido validación con Zod y gestión de errores mediante try/catch. Después, he desplegado todo en producción en el alojamiento gestionado de Node.js de Cloudways (Velocity).

Como te prometí antes, el proyecto completo está disponible en mi GitHub. Puedes clonarlo y utilizarlo como punto de partida para tu propio proyecto.

Si tienes alguna duda, déjamela en los comentarios.

P1: ¿Qué son las rutas API en Next.js?

Las rutas de API permiten crear puntos finales de backend dentro de proyectos Next.js. Cualquier archivo dentro de app/api se considera un punto final de API en lugar de una página. Las rutas se ejecutan en el servidor y gestionan las solicitudes HTTP entrantes.

P2: ¿Next.js gestiona el enrutamiento?

Sí. Next.js tiene su propio sistema de enrutamiento. Permite navegar entre páginas usando el componente `Link`. Esto hace que la navegación sea fluida, como en una aplicación de una sola página.

P3: ¿Qué métodos HTTP admiten las rutas de Next.js?

En el archivo de rutas, puedes incluir controladores para métodos HTTP habituales como GET, POST, PUT, PATCH, DELETE, HEAD y OPTIONS. Next.js ejecuta la función correspondiente según el tipo de solicitud que reciba.

P4: ¿Cuál es la diferencia entre las rutas de la API y las acciones del servidor?

Las rutas de la API son puntos finales del backend que se pueden llamar desde cualquier lugar, incluso desde servicios externos. Las acciones del servidor, como su nombre indica, se ejecutan en el servidor y se utilizan principalmente dentro de los componentes de React para gestionar tareas como el envío de formularios o las actualizaciones internas.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

[email protected]

Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour