Can't send emails on production environment deployed on vercel, but can do it on development environment

[mjviana]

Hi all!

The question is straight forward. I build a next js app and deployed it in vercel. But there I'm not able to send emails.
I found someone who faced the same issue some time ago, and it seems he was able to fix the issue.
You can find it here: https://stackoverflow.com/questions/78276988/resend-email-doesnt-work-in-production-environement-with-next-js-but-works-in/78471401
However he does not tell how he manage to do it.

EDIT: I have the RESEND_API_KEY configured in vercel.
EDIT: Errors that are showing on the console when I want to send the email:

Any help?

Code related with resend:

import {Resend} from "resend";
import WitnessEmail from "../../../emails/WitnessEmail";
import TestatorEmail from "../../../emails/TestatorEmail";

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

type EmailType = "testator" | "witness";

interface SendEmailParams {
  recipientEmail: string;
  code: string;
  type: EmailType;
  recipientName?: string;
  senderName?: string;
}

export async function POST(request: Request) {
  const {recipientEmail, code, type, recipientName, senderName} =
    await request.json();

  // Construct the parameters object conforming to SendEmailParams interface
  const params: SendEmailParams = {
    recipientEmail,
    code,
    type,
    recipientName,
    senderName,
  };

  try {
    const data = await resend.emails.send({
      from: "[email protected]",
      to: params.recipientEmail,
      subject:
        params.type === "witness"
          ? "Witness Request Code"
          : "Will Confirmation Code",
      react:
        params.type === "witness"
          ? WitnessEmail({
              code: params.code,
              senderName: params.senderName,
              recipientName: params.recipientName,
            })
          : TestatorEmail({
              code: params.code,
              senderName: params.senderName!,
            }),
    });
    return Response.json(data);
  } catch (error) {
    return Response.json({error});
  }
}

  import {useState} from "react";

  type EmailType = "testator" | "witness";

  export interface SendEmailParams {
    recipientEmail: string;
    code: string;
    type: EmailType;
    recipientName?: string;
    senderName?: string;
  }

  const useSendEmail = () => {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setError] = useState(false);

    const sendEmail = async (emailParams: SendEmailParams) => {
      setIsLoading(true);
      console.log("emailParams", emailParams);

      try {
        const response = await fetch("/api/emails", {
          method: "POST",
          body: JSON.stringify(emailParams), // Include the code parameter in the request body
        });
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(true);
      } finally {
        setIsLoading(false);
      }
    };
    return {data, isLoading, isError, sendEmail};
  };

  export default useSendEmail;

[gabrielmfern]

Are you getting some error from it as well? If yes, what error are you getting?

[mjviana]

Oh! it turns out that I have one error when I click to send the email:

[gabrielmfern]

Maybe it doesn't actually get to Resend. People generally are having a timeout when they face this sort of stuff, but that doesn't seem to be the case from the 405. This might be something related to the authentication in your app.

[mjviana]

Unfortunately I don't have too much experience with this stack. I'll have to search for solutions.
Thanks for your help

[mjviana]

Un update on this - it turns out that I had a wrong configuration on my next.config.mjs file
previously I had the file like this:

const nextConfig = {
  output: "export", // Outputs a Single-Page Application (SPA).
  distDir: "./dist", // Changes the build output directory to `./dist/`.
  webpack: (config) => {
    config.resolve.fallback = {fs: false, net: false, tls: false};
    config.externals.push("pino-pretty", "encoding");
    return config;
  },
};

export default nextConfig;

By removing the output and disDir settings I was able to send emails.

Important info about output setting:

• undefined: The default build output, .next directory, that works with production mode next start or a hosting provider like Vercel
• standalone: A standalone build output, .next/standalone directory, that only includes necessary files/dependencies. Useful for self-hosting in a Docker container.
• export: An exported build output, out directory, that only includes static HTML/CSS/JS. Useful for self-hosting without a Node.js server.

This was happening because I had set the output to export. Sending emails requires a Node.js server, which is not included with the export setting. As a result, I was unable to send emails with this configuration.

Current next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {fs: false, net: false, tls: false};
    config.externals.push("pino-pretty", "encoding");
    return config;
  },
};

export default nextConfig;

[gabrielmfern]

Nice that you found it. Yeah, would've never figured that one out without a reproduction