,

Cómo utilizar una API con Next JS para enviar correos a través de un Formulario

Posted by

Cómo consumir API con Next JS para enviar correos por Form

🥷🏾 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!

0 0 votes
Article Rating
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@eightdev
7 months ago

Para poder utilizar el servicio de envíos de correos, solo tienes que crear una cuenta en Formspree
https://formspree.io/

@luisenriquealvarezdelaroch2242
7 months ago

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✨