🥷🏾 Cómo consumir API con Next JS para enviar correos por Form
En este artículo te mostraremos cómo utilizar Next JS para consumir una API y enviar correos a través de un formulario. Next JS es un framework de React que facilita la creación de aplicaciones web rápidas y eficientes.
Paso 1: Crear el formulario
El primer paso es crear un formulario en tu página web donde los usuarios puedan introducir su nombre, dirección de correo electrónico y mensaje que desean enviar. Aquí tienes un ejemplo de cómo podría ser el formulario:
Paso 2: Crear la función para enviar el correo
A continuación, debemos crear una función en nuestro proyecto de Next JS que se encargue de enviar el correo con la información proporcionada por el usuario. Aquí tienes un ejemplo de cómo podría ser esa función:
async function enviarCorreo(datos) {
const res = await fetch('/api/enviar-correo', {
method: 'POST',
body: JSON.stringify(datos),
headers: {'Content-Type': 'application/json'}
});
const data = await res.json();
if (res.ok) {
alert('¡Correo enviado con éxito!');
} else {
alert('Ocurrió un error al enviar el correo');
}
}
Paso 3: Crear la API para enviar el correo
Por último, debemos crear una ruta en nuestro proyecto de Next JS que se encargue de recibir los datos del formulario y enviar el correo. Aquí tienes un ejemplo de cómo podría ser esa API:
import nodemailer from 'nodemailer';
export default async function handler(req, res) {
const { nombre, email, mensaje } = req.body;
const transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: 'tucorreo@gmail.com',
pass: 'tupassword'
}
});
const info = await transporter.sendMail({
from: email,
to: 'destinatario@gmail.com',
subject: `Mensaje de ${nombre}`,
text: mensaje
});
res.status(200).json({message: 'Correo enviado con éxito'});
}
¡Y eso es todo! Ahora tu aplicación de Next JS está configurada para consumir una API y enviar correos por formulario. ¡Esperamos que esta guía te haya sido de ayuda!
Para poder utilizar el servicio de envíos de correos, solo tienes que crear una cuenta en Formspree
► https://formspree.io/
Tiene alguna limitante ? no se puede crear una API propia con Node.js y express ? justo ocupo un formulario de contacto pero me gustaría usar algo que no te cobre después de x usos o que tenga limitantes
Muy buen video gracias por compartir el conocimiento ✨éxito✨