重发电子邮件在生产环境中与 next js 不起作用，但在开发环境中起作用

Question

import { EmailTemplate } from "@/components/email-template";
import { Resend } from "resend";

const resend = new Resend("myApiKey"); // this works only in dev
// const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KEY); // this doesnt at all
// const resend = new Resend(process.env.RESEND_API_KEY); // this doesnt at all


export async function POST(request: Request) {
  const { name, numberPhone, address, productsInCart} = await request.json();

  try {
    const data = await resend.emails.send({
      from: "Contact Form <[email protected]>",
      to: ["[email protected]"],
      subject: "New order from your ecommerce app.",
      react: EmailTemplate({
        name: name,
        numberPhone: numberPhone,
        address: address,
        productsInCart: productsInCart
      }),
    });

    return Response.json(data);
  } catch (error) {
    return Response.json({ error });
  }
}

  const handleSendDataViaEmailResend = async () => {
    // console.log(JSON.stringify(formData));
    try {
      setLoading(true); // Set loading to true when starting the async operation

      const response = await fetch("/api/send", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: formData.name,
          email: formData.email,
          numberPhone: formData.numberPhone,
          address: formData.address,
          productsInCart: productsInCart,
        }),
      });

      if (response.ok) {
        console.log("Order placed successfully!");
        router.push("/success");
        // Handle success, e.g., redirect to a thank you page
      } else {
        console.error("Error placing order:", response.statusText);
        // Handle error, show an error message to the user
      }
    } catch (error) {
      console.error("Error placing order:", error);
    } finally {
      setLoading(false); // Set loading back to false after the async operation completes
    }
  };

尝试了 process.env.RESEND_API_KEY 和 EXT_PUBLIC_RESEND_API_KEY 我在 env.local 文件中有变量

疯狂的事情是，它适用于开发，但不适用于 Vercel 生产部署 第二部分是 API 调用 我的代码中可能会出现一些错误 我认为我是一个接近中等水平的程序员 我希望它在部署时也能工作

Answer 1

这些天我遇到了同样的问题 - 事实证明我的

next.config.mjs

文件配置错误。 以前我有这样的文件：

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;

通过删除

output

和

disDir

设置，我能够发送电子邮件。

有关

output

设置的重要信息：

• undefined

  ：默认构建输出，.next 目录，适用于下次启动的生产模式或 Vercel 等托管提供商

• standalone

  ：独立的构建输出，.next/standalone 目录，仅包含必要的文件/依赖项。对于 Docker 容器中的自托管非常有用。 export：导出的构建输出 out 目录，仅包含静态 HTML/CSS/JS。对于没有 Node.js 服务器的自托管非常有用。

发生这种情况是因为我将输出设置为导出。发送电子邮件需要 Node.js 服务器，该服务器不包含在导出设置中。结果，我无法使用此配置发送电子邮件。

当前

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;

有了这个我就没有遇到任何问题。希望它对某人有帮助。