🔗 API Routes en Next.js

12 - 🔗 API Routes en Next.js

Aprende cómo crear endpoints API directamente dentro de tu proyecto de Next.js, sin necesidad de un servidor backend adicional.

---

🧠 ¿Qué son las API Routes?

Las API Routes son funciones del lado del servidor (Serverless Functions) que puedes crear dentro del propio proyecto Next.js. Te permiten manejar solicitudes HTTP como si tuvieras un backend, pero sin configurar un servidor Node.js aparte.

Estas rutas se alojan dentro de la carpeta app/api/ o pages/api/ (según el router que uses).

app/
 └─ api/
     └─ hola/
         └─ route.js
      

Cada carpeta dentro de api/ representa una ruta de tu API. Por ejemplo, /api/hola será accesible desde tu navegador o mediante fetch.

---

💡 Ejemplo básico de una ruta API

Creamos una API que responde con un mensaje JSON.

// app/api/hola/route.js
export async function GET(request) {
  return Response.json({ mensaje: "👋 ¡Hola desde la API de Next.js!" });
}
      

Si visitas /api/hola verás esta respuesta:

{
  "mensaje": "👋 ¡Hola desde la API de Next.js!"
}
      

🔍 Puedes probarlo directamente desde el navegador o con herramientas como Postman o cURL.

---

📦 Soporte para diferentes métodos HTTP

Cada archivo route.js puede manejar varios métodos HTTP: GET, POST, PUT, DELETE, etc.

// app/api/usuarios/route.js
export async function GET() {
  return Response.json([
    { id: 1, nombre: "Jorge" },
    { id: 2, nombre: "Lucía" }
  ]);
}

export async function POST(request) {
  const data = await request.json();
  return Response.json({ mensaje: "Usuario creado", data });
}
      

🔸 GET /api/usuarios → Devuelve una lista de usuarios. 🔸 POST /api/usuarios → Recibe un JSON con datos nuevos.

fetch('/api/usuarios', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nombre: 'Carlos' })
});
      

⚠️ Recuerda que las rutas API se ejecutan en el servidor, nunca en el navegador del cliente.

---

🧩 Ejemplo práctico: API de productos

Vamos a crear una API que devuelva una lista de productos ficticios.

// app/api/productos/route.js
const productos = [
  { id: 1, nombre: "Teclado mecánico", precio: 59.99 },
  { id: 2, nombre: "Ratón inalámbrico", precio: 34.99 },
  { id: 3, nombre: "Monitor 27''", precio: 199.99 }
];

export async function GET() {
  return Response.json(productos);
}
      

Si accedes a /api/productos, verás:

[
  { "id": 1, "nombre": "Teclado mecánico", "precio": 59.99 },
  { "id": 2, "nombre": "Ratón inalámbrico", "precio": 34.99 },
  { "id": 3, "nombre": "Monitor 27''", "precio": 199.99 }
]
      

---

🔐 Acceso desde el cliente

Desde tus componentes React, puedes consumir estas rutas API fácilmente usando fetch() o Axios.

// app/productos/page.js
"use client";
import { useEffect, useState } from "react";

export default function ProductosPage() {
  const [productos, setProductos] = useState([]);

  useEffect(() => {
    fetch("/api/productos")
      .then(res => res.json())
      .then(data => setProductos(data));
  }, []);

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">🛍️ Lista de Productos</h1>
      <ul className="mt-3">
        {productos.map(p => (
          <li key={p.id} className="border-b py-2">
            {p.nombre} - ${p.precio}
          </li>
        ))}
      </ul>
    </main>
  );
}
      

🧩 Resultado visual:

• 🖱️ Teclado mecánico - $59.99
• 🖲️ Ratón inalámbrico - $34.99
• 🖥️ Monitor 27'' - $199.99

---

📘 Resumen

• 🚀 Las API Routes permiten crear endpoints del lado del servidor dentro de Next.js.
• 📦 Cada carpeta en app/api/ es una ruta.
• 🔁 Puedes manejar varios métodos HTTP (GET, POST, PUT, DELETE).
• 💬 Se consumen fácilmente desde el cliente con fetch o Axios.

✅ Con esto, Next.js puede funcionar como frontend y backend al mismo tiempo.

← Volver al índice