Pagina de Programación

Lección 19. API REST.

Una API REST es una forma de exponer datos y funcionalidades para que otras aplicaciones (frontend, apps móviles, etc.) puedan comunicarse con nuestro servidor.

En Next.js, podemos crear APIs sin necesidad de Express u otros frameworks.

Next.js incluye su propio sistema de rutas de API, el cual funciona directamente dentro del proyecto.

¿Dónde se crean las APIs en Next.js?_

En el App Router, las APIs se crean dentro del directorio:

src/app/api/

Cada carpeta dentro de api representa una ruta de la API.

Ejemplo básico de una API REST._

Supongamos que queremos crear una API para manejar usuarios.

La estructura mínima sería:

|-.next/
|-node_modules/
|-public/
|-src/
  |-app/
    |-api/
      |-users/
        |-route.ts
    |-page.tsx
|- ...Otros archivos...

El archivo clave es route.ts.

Aquí es donde definimos los métodos HTTP.

Método GET (obtener datos)._

Dentro de app/api/users/route.ts:

import { NextResponse } from "next/server";

export async function GET() {
  const users = [
    { id: 1, name: "Juan" },
    { id: 2, name: "María" },
    { id: 3, name: "Carlos" }
  ];

  return NextResponse.json(users);
}

Este método responde a la ruta:

GET → /api/users

Y devuelve un JSON con la información.

Método POST (enviar datos)._

Ahora agreguemos un método POST para crear usuarios.

import { NextResponse } from "next/server";

export async function POST(request) {
  const body = await request.json();

  return NextResponse.json({
    message: "Usuario creado correctamente",
    user: body
  });
}

Este método se ejecuta cuando enviamos datos usando:

POST → /api/users

Por ejemplo:

await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "Juan",
    age: 25,
    email: "juan@email.com"
  })
});

Métodos soportados en route.ts._

Next.js permite definir los siguientes métodos HTTP:

GET – Obtener datos.
POST – Crear datos.
PUT – Actualizar datos.
DELETE – Eliminar datos.

Cada uno se define como una función exportada con el nombre del método.

Consumo de la API desde el frontend._

Podemos consumir esta API desde cualquier componente usando fetch.

const response = await fetch("/api/users");
const data = await response.json();

console.log(data);

De esta manera, nuestro frontend y backend viven en el mismo proyecto.

Nota: Las APIs en Next.js se ejecutan del lado del servidor, por lo que pueden manejar bases de datos, lógica segura y validaciones.

⬅ Anterior Menú