500 Error when Sending Emails with Resend API and Next.js App Router

[immanuel-peter]

I'm encountering a persistent 500 Internal Server Error when attempting to send emails using the Resend API with a React email template in my Next.js project. I have tried various debugging methods but haven't been able to resolve the issue.

Here are some relevant code snippets below, and the GitHub repo is down below.

app/api/send/route.ts

import { Resend } from "resend";
import { MeetingRequest } from "@/api/email-templates/MeetingRequest";

const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_KEY);

export async function POST(request: Request) {
  const {
    to_email,
    receiver_name,
    scheduler_id,
    scheduler_name,
    scheduled_time,
    scheduler_tz,
    question_title,
    question_id,
    sender_note,
  } = await request.json();

  try {
    const { data, error } = await resend.emails.send({
      from: "Codey from CodingOH <[email protected]>",
      to: [to_email],
      subject: `You received a meeting request from ${scheduler_name}!`,
      react: MeetingRequest({
        receiver_name,
        scheduler_id,
        scheduler_name,
        scheduled_time,
        scheduler_tz,
        question_title,
        question_id,
        sender_note,
      }),
    });

    if (error) {
      console.error("[UP] Error sending email:", error);
      return Response.json({ error }, { status: 500 });
    }

    return Response.json({ data });
  } catch (error) {
    console.error("[DOWN] Error sending email:", error);
    return Response.json({ error }, { status: 500 });
  }
}

app/questions/[id]/route.tsx

const response = await fetch("/api/send", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    to_email: question.asker?.email_address ?? "",
    receiver_name: question.asker?.first_name ?? "",
    scheduler_id: coder?.auth_id ?? "",
    scheduler_name: `${coder?.first_name} ${coder?.last_name}`,
    scheduled_time: formattedDate?.toISOString() ?? "",
    scheduler_tz: coder?.timezone ?? "",
    question_title: question.question ?? "",
    question_id: question.id ?? 0,
    sender_note: scheduleMessage || "",
  }),
});
if (!response.ok) {
  console.error(
    "Error sending meeting request email:",
    await response.text()
  );
} else {
  const data = await response.json();
  console.log("Meeting request email sent:", data);
}

api/email-templates/MeetingRequest.tsx

import React from "react";
import Link from "next/link";
import { FaCode } from "react-icons/fa6";
import { parseISO, format } from "date-fns";
import { toZonedTime } from "date-fns-tz";

export const MeetingRequest = (props: {
  receiver_name: string;
  scheduler_id: string;
  scheduler_name: string;
  scheduled_time: string;
  scheduler_tz: string;
  question_title: string;
  question_id: number;
  sender_note: string;
}) => {
  const {
    receiver_name,
    scheduler_id,
    scheduler_name,
    scheduled_time,
    scheduler_tz,
    question_title,
    question_id,
    sender_note,
  } = props;

  const date = parseISO(scheduled_time);
  const zonedDate = toZonedTime(date, scheduler_tz);
  const formattedDate = format(zonedDate, "MMMM dd, yyyy 'at' h:mm a");

  return (
    <main className="flex flex-col items-center justify-center bg-slate-200">
      ...
    </main>
  );
};

GitHub Repo: https://github.com/jesuschrist-immanuel/stack-overflow-clone/

The last time I tried to make it work, I got this error: Error sending meeting request email: {"error":{}}

Any guidance or assistance in resolving this issue would be greatly appreciated!

[ignaciodiazb]

Hi. The email sending code looks good to me. Have you checked the properties are correctly sent on the request body in your route handler?

Also, you should keep your resend API key secure. Environment variables that start with NEXT_PUBLIC_ are included in your code at build time.