🛠️ Crea tu propia API en Next.js

12 - 🛠️ Crea tu propia API en Next.js

Aprende cómo crear tu propia API en Next.js usando la carpeta /pages/api. Ideal para manejar formularios, bases de datos o lógica personalizada desde el backend.

---

📦 ¿Qué es una API interna en Next.js?

En Next.js puedes crear tu propia API sin necesidad de un servidor externo. Solo necesitas crear archivos dentro de la carpeta /pages/api y automáticamente se convierten en endpoints.

Esto es útil para manejar formularios, conectar con bases de datos, enviar correos o procesar datos desde el backend.

---

🧱 Estructura básica de un endpoint

Crea un archivo en /pages/api/hola.js con el siguiente contenido:

// pages/api/hola.js
export default function handler(req, res) {
  res.status(200).json({ mensaje: '¡Hola desde tu API interna!' });
}
      

Si visitas http://localhost:3000/api/hola verás:

{ "mensaje": "¡Hola desde tu API interna!" }

✅ ¡Ya tienes tu primer endpoint funcionando!

---

🔁 Soporte para métodos GET y POST

Puedes detectar el método de la petición con req.method y responder diferente según sea GET, POST, etc.

// pages/api/contacto.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { nombre, mensaje } = req.body;
    return res.status(200).json({ recibido: true, nombre, mensaje });
  }

  res.status(405).json({ error: 'Método no permitido' });
}
      

Puedes probarlo enviando un POST desde el navegador o con herramientas como Postman o fetch.

---

📬 Enviando datos desde el cliente con fetch

Aquí tienes un ejemplo de cómo enviar datos a tu API desde un formulario en React:

// pages/formulario.js
import { useState } from 'react';

export default function Formulario() {
  const [nombre, setNombre] = useState('');
  const [mensaje, setMensaje] = useState('');
  const [respuesta, setRespuesta] = useState(null);

  const enviar = async (e) => {
    e.preventDefault();
    const res = await fetch('/api/contacto', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ nombre, mensaje }),
    });
    const data = await res.json();
    setRespuesta(data);
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-3">📨 Formulario de contacto</h1>
      <form onSubmit={enviar}>
        <input value={nombre} onChange={e => setNombre(e.target.value)} placeholder="Tu nombre" className="border p-2 mb-2 block" />
        <textarea value={mensaje} onChange={e => setMensaje(e.target.value)} placeholder="Tu mensaje" className="border p-2 mb-2 block"></textarea>
        <button type="submit" className="bg-blue-500 text-white px-4 py-2">Enviar</button>
      </form>
      {respuesta && (
        <div className="mt-4 text-green-600">
          ✅ Mensaje recibido: {respuesta.nombre} dijo "{respuesta.mensaje}"
        </div>
      )}
    </div>
  );
}
      

---

💡 Consejo: puedes usar tus APIs internas para conectarte con bases de datos, enviar correos, validar formularios o crear dashboards personalizados.

← Volver al índice