解决 Next.js 应用程序中电子邮件发送的生产环境问题

解决 Next.js 项目生产中的电子邮件发送问题

将 JavaScript 与 Next.js 和 Node.js 结合使用

// next.config.js
module.exports = {
  env: {
    RESEND_API_KEY: process.env.RESEND_API_KEY,
  },
};

// lib/resendEmail.js
import { Resend } from 'resend';
export const resendClient = new Resend(process.env.RESEND_API_KEY);

export async function sendOrderConfirmationEmail({ name, email, orderDetails }) {
  try {
    const response = await resendClient.emails.send({
      from: 'Your Store <no-reply@yourstore.com>',
      to: [email],
      subject: 'Order Confirmation',
      html: `Email Content Here`,
    });
    console.log('Email sent successfully:', response);
  } catch (error) {
    console.error('Failed to send email:', error);
    throw error;
  }
}

将客户端表单提交与 Next.js 集成

在 Next.js 中使用 React Hooks 的前端 JavaScript

// pages/api/send.js
import { sendOrderConfirmationEmail } from '../../lib/resendEmail';
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, orderDetails } = req.body;
    try {
      await sendOrderConfirmationEmail({ name, email, orderDetails });
      return res.status(200).json({ message: 'Email sent successfully' });
    } catch (error) {
      console.error('Email sending error:', error);
      return res.status(500).json({ error: 'Internal Server Error' });
    }
  } else {
    // Handle any other HTTP method
    res.setHeader('Allow', ['POST']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

// components/OrderForm.js
import { useState } from 'react';
import axios from 'axios';

export default function OrderForm() {
  const [formData, setFormData] = useState({ name: '', email: '', orderDetails: '' });
  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const response = await axios.post('/api/send', formData);
      console.log(response.data.message);
      // Handle submission success
    } catch (error) {
      console.error(error);
      // Handle submission error
    }
  };
  // Form JSX goes here
}

Next.js 电子邮件功能的基本常见问题解答

1. 为什么我的环境变量在生产中不起作用？
2. 环境变量必须在托管服务的设置中正确配置，并使用正确的前缀才能在生产中访问。
3. 如何在 Next.js 中向客户端公开环境变量？
4. 在环境变量前面加上 NEXT_PUBLIC_ 前缀，以将它们公开给客户端。
5. 我可以使用相同的 API 密钥进行开发和生产吗？
6. 是的，但出于安全原因，建议使用单独的密钥进行开发和生产。
7. 为什么我的电子邮件发送功能在生产环境中不起作用？
8. 确保您的电子邮件服务 API 密钥在生产环境变量中正确设置，并且您的电子邮件发送代码已正确配置为使用这些变量。
9. 如何调试 Vercel 中的环境变量问题？
10. 使用 Vercel 仪表板检查和管理您的环境变量，确保将它们设置为正确的范围（预览、开发和生产）。