Hello!!
I’m trying to use Resend with my vercel.
My email at resend is verified:
My DNS is confirmed and valid
I have added enviorment variabels to vercel:
My domain in vercel is correct:
Current versus Expected behaviour
I keep getting 500 or 404 error when trying to send a email.
When navigation to the page i get this:
When checking the function file it shows green.
I’m really not sure what to do to make this work.
Code
This is in my api/email/route
import { VercelRequest, VercelResponse } from "@vercel/node";
import axios from "axios";
const RESEND_API_KEY = process.env.RESEND_API_KEY;
const sendEmail = async (html: string, subject: string, to: string[]) => {
try {
const response = await axios.post(
"https://api.resend.com/emails",
{
from: "Acme <onboarding@resend.dev>",
to,
subject,
html,
},
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${RESEND_API_KEY}`,
},
}
);
return response.data;
} catch (error) {
console.error("Email sending failed:", error.response?.data || error.message);
throw new Error("Failed to send email");
}
};
// Main handler function
export default async function handler(req: VercelRequest, res: VercelResponse) {
console.log("Request method:", req.method);
console.log("Request body:", req.body);
if (req.method === "POST") {
const { htmlContent, subject, recipients } = req.body;
if (!htmlContent || !subject || !recipients) {
console.error("Missing required parameters:", { htmlContent, subject, recipients });
return res.status(400).json({ error: "Missing required parameters" });
}
try {
const response = await sendEmail(htmlContent, subject, recipients);
return res.status(200).json(response);
} catch (error: unknown) {
console.error("Error sending email:", error);
const errorMessage = error instanceof Error ? error.message : "An unknown error occurred";
return res.status(500).json({ error: errorMessage });
}
} else {
return res.status(405).json({ error: "Method Not Allowed" });
}
}
Project information (URL, framework, environment, project settings)
Frameworks / Libraries
- Frontend Framework: React (
react,react-dom,react-router-dom) - Build Tool: Vite (
vite,@vitejs/plugin-react-swc) - Styling: Tailwind CSS (
tailwindcss,tailwindcss-animate,@tailwindcss/vite,tailwind-merge) - Form Handling: Formik + Yup (
formik,yup) - Internationalization: i18next (
i18next,react-i18next,i18next-browser-languagedetector) - UI Primitives: Radix UI (
@radix-ui/react-dialog,@radix-ui/react-tabs, etc.) - Animations: Framer Motion
- Notifications: React Toastify
- Icons: Lucide React
- Typewriter effect:
react-simple-typewriter - Utility Libraries:
clsx,class-variance-authority,axios
Environment
- TypeScript project (
typescript,tsc -bused in build script) - Environment Variables: Uses
dotenv - Node Backend Support: Minimal, with
@vercel/node, likely for serverless functions or API routes
Project Settings
"type": "module": Indicates use of ECMAScript Modules"private": true: Not intended for publishing to npm"scripts":dev: Start dev server with Vitebuild: Type-check and build with Vitelint: Lint the projectpreview: Serve the build locallywatch: Custom Tailwind CSS watch command
