💬 Comentarios con API Routes

💬 Comentarios con API Routes

Aprende a crear un sistema de comentarios para tu blog usando las API Routes de Next.js.

---

📌 Índice de esta entrada:

1. 🛠️ ¿Qué son las API Routes?
2. ⚡ Crear una API Route para guardar comentarios
3. 📋 Crear un formulario de comentarios en el front-end
4. 🔄 Conectar el formulario con la API
5. 💡 Consejos y buenas prácticas

---

🛠️ ¿Qué son las API Routes?

Las API Routes en Next.js te permiten crear endpoints de servidor directamente en tu proyecto. Se pueden usar para recibir datos de formularios, guardar información en una base de datos, o comunicarte con servicios externos.

Las rutas se crean dentro de la carpeta pages/api/ y funcionan como cualquier endpoint REST.

⚡ Crear una API Route para guardar comentarios

Vamos a crear un archivo pages/api/comments.js para recibir los comentarios:

export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name, message } = req.body;

    // Aquí normalmente guardarías los datos en una base de datos
    console.log('Nuevo comentario:', name, message);

    res.status(200).json({ status: 'ok', message: 'Comentario recibido' });
  } else {
    res.status(405).json({ error: 'Método no permitido' });
  }
}
    

Esta API recibe comentarios mediante un POST y responde con un mensaje de éxito.

📋 Crear un formulario de comentarios

En tu página de post, agrega un formulario para que los usuarios puedan enviar comentarios:

import { useState } from 'react';

export default function CommentForm() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('Enviando...');

    const res = await fetch('/api/comments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, message }),
    });

    const data = await res.json();
    setStatus(data.message);
    setName('');
    setMessage('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Tu nombre"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
      />
      <br />
      <textarea
        placeholder="Tu comentario"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        required
      />
      <br />
      <button type="submit">Enviar</button>
      <p>{status}</p>
    </form>
  );
}
    

🔄 Conectar el formulario con la API

El formulario envía los datos al endpoint /api/comments usando fetch. Cuando el servidor recibe los datos, devuelve un mensaje que se muestra en el formulario.

Así puedes probar tu API localmente ejecutando npm run dev y enviando comentarios desde el formulario.

💡 Consejos y buenas prácticas

• Valida siempre los datos del formulario antes de enviarlos.
• Usa una base de datos real como MongoDB, Firebase o PostgreSQL para guardar comentarios.
• Evita exponer datos sensibles en la API.
• Agrega protección contra spam si tu blog estará en producción.

---

💡 Consejo: Practica primero con la API local y luego integra una base de datos real para guardar los comentarios de los usuarios.

← Volver al índice