Estoy tratando de seguir este tutorial para colocar un formulario de captura de correo electrónico en un sitio de NextJS: https://betterprogramming.pub/how-to-create-a-working-contact-form-in-next-js-459d1fc992ea
Debido a que no es un formulario de contacto completo, eliminé todos los campos excepto el correo electrónico.
Mi api/contact.js se ve así:
const mail = require('@sendgrid/mail'); mail.setApiKey(process.env.SENDGRID_API_KEY); export default async (req, res) => { const body = JSON.parse(req.body); const message = ` Email: ${body.email} `; const data = { to: 'SENDER-EMAIL', from: 'RECEIVER-EMAIL', subject: `New message from ${body.email}`, text: message, html: message.replace(/\r\n/g, '<br />'), }; await mail.send(data); res.status(200).json({ status: 'OK' }); };Y dentro de index.js, el formulario se ve así:
<form onSubmit={handleSubmit} className={styles.form}> <label htmlFor="email">Email:</label> <input id="email" type="email" onChange={e => setEmail(e.target.value)} /> <button type="submit">Send</button> </form>El formulario se muestra correctamente en el sitio, pero recibo un error 500 cuando intento enviar un correo electrónico en producción. También probé en localhost y obtuve un error.
Npm instalé el paquete sendgrid. También tengo mi secreto en un .env.local.
No estoy seguro de lo que está pasando.
Parece que está recibiendo un error cuando llama await mail.send(data) . Puede haber un par de razones para esto, pero primero deberíamos ver cómo averiguar cuál es el error.
Necesitamos envolver la llamada para enviar el correo electrónico en un bloque de try/catch . De esa manera podemos manejar el error e inspeccionarlo para ver qué está mal. También podemos controlar la respuesta a su front-end en lugar de tratar con el controlador 500 predeterminado.
En la parte inferior de su función api/contact.js , actualice a:
try { await mail.send(data); res.status(200).json({ status: 'OK' }); } catch (error) { console.log(error); if (error.response) { console.log(error.response.body); } res.status(400).json({ status: "ERROR", message: error.message }); }Ahora, cuando hay un error, registramos el error en los registros del servidor y devolvemos un mensaje al front-end. Tenga en cuenta que ese mensaje puede no ser adecuado para los usuarios y es posible que desee detectar errores y devolver un mensaje mejor usted mismo.
Ahora que está registrando el error, debería poder ver lo que dice. Y debería dirigirlo a lo que creo que es uno de estos problemas:
Tu clave API es incorrecta
O lo configuró incorrectamente o lo agregó a su .env.local correctamente y necesita reiniciar completamente su servidor
Su clave API no tiene permiso para enviar correos electrónicos
Cuando crea una clave API, puede optar por otorgarle todos los permisos o solo un subconjunto. Asegúrese de que su clave API tenga permiso para enviar correos electrónicos.
Está intentando enviar desde una dirección de correo electrónico que SendGrid no sabe que posee
Para enviar correos electrónicos desde una dirección de correo electrónico mediante SendGrid, debe verificar que la dirección de correo electrónico es suya o autenticar que el dominio es suyo (se recomienda la autenticación de dominio para aplicaciones de producción)