email-resend
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseEmail with Resend
基于Resend实现邮件功能
Environment Setup
环境配置
bash
undefinedbash
undefined.env.local
.env.local
RESEND_API_KEY=re_...
CONTACT_TO_EMAIL=hello@studioname.com
undefinedRESEND_API_KEY=re_...
CONTACT_TO_EMAIL=hello@studioname.com
undefinedResend Client
Resend客户端
tsx
// lib/resend.ts
import { Resend } from 'resend';
export const resend = process.env.RESEND_API_KEY
? new Resend(process.env.RESEND_API_KEY)
: null;
export function hasResend(): boolean {
return resend !== null;
}tsx
// lib/resend.ts
import { Resend } from 'resend';
export const resend = process.env.RESEND_API_KEY
? new Resend(process.env.RESEND_API_KEY)
: null;
export function hasResend(): boolean {
return resend !== null;
}Contact Form Email
联系表单邮件
tsx
// lib/emails/contact.ts
import { resend } from '@/lib/resend';
import type { Locale } from '@/i18n.config';
interface ContactEmailParams {
name: string;
email: string;
phone?: string;
message: string;
locale: Locale;
}
export async function sendContactEmail({
name,
email,
phone,
message,
locale,
}: ContactEmailParams) {
if (!resend) {
console.log('Resend not configured, skipping email');
return { success: false, error: 'Email not configured' };
}
const toEmail = process.env.CONTACT_TO_EMAIL!;
try {
await resend.emails.send({
from: 'Studio Contact <noreply@studioname.com>',
to: toEmail,
replyTo: email,
subject: `New Contact Form Submission from ${name}`,
html: `
<h2>New Contact Form Submission</h2>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
${phone ? `<p><strong>Phone:</strong> ${phone}</p>` : ''}
<p><strong>Message:</strong></p>
<p>${message.replace(/\n/g, '<br>')}</p>
<hr>
<p><small>Submitted from: ${locale} locale</small></p>
`,
});
return { success: true };
} catch (error) {
console.error('Failed to send email:', error);
return { success: false, error: 'Failed to send email' };
}
}tsx
// lib/emails/contact.ts
import { resend } from '@/lib/resend';
import type { Locale } from '@/i18n.config';
interface ContactEmailParams {
name: string;
email: string;
phone?: string;
message: string;
locale: Locale;
}
export async function sendContactEmail({
name,
email,
phone,
message,
locale,
}: ContactEmailParams) {
if (!resend) {
console.log('Resend未配置,跳过邮件发送');
return { success: false, error: '邮件服务未配置' };
}
const toEmail = process.env.CONTACT_TO_EMAIL!;
try {
await resend.emails.send({
from: 'Studio Contact <noreply@studioname.com>',
to: toEmail,
replyTo: email,
subject: `新联系表单提交:来自${name}`,
html: `
<h2>新联系表单提交</h2>
<p><strong>姓名:</strong> ${name}</p>
<p><strong>邮箱:</strong> ${email}</p>
${phone ? `<p><strong>电话:</strong> ${phone}</p>` : ''}
<p><strong>留言:</strong></p>
<p>${message.replace(/\n/g, '<br>')}</p>
<hr>
<p><small>提交语言环境:${locale}</small></p>
`,
});
return { success: true };
} catch (error) {
console.error('邮件发送失败:', error);
return { success: false, error: '邮件发送失败' };
}
}Booking Request Email
预约请求邮件
tsx
// lib/emails/booking.ts
import { resend } from '@/lib/resend';
import type { Locale } from '@/i18n.config';
interface BookingEmailParams {
name: string;
email: string;
phone?: string;
goals: string;
experienceLevel: string;
injuries?: string;
preferredTimes: string;
sessionType: 'in-person' | 'online';
locale: Locale;
}
const subjectByLocale: Record<Locale, string> = {
'pt-PT': 'Novo Pedido de Sessão',
'en': 'New Booking Request',
'tr': 'Yeni Rezervasyon Talebi',
'es': 'Nueva Solicitud de Reserva',
'fr': 'Nouvelle Demande de Réservation',
'de': 'Neue Buchungsanfrage',
};
export async function sendBookingEmail(params: BookingEmailParams) {
if (!resend) {
console.log('Resend not configured, skipping email');
return { success: false, error: 'Email not configured' };
}
const toEmail = process.env.CONTACT_TO_EMAIL!;
try {
// Email to studio
await resend.emails.send({
from: 'Studio Booking <noreply@studioname.com>',
to: toEmail,
replyTo: params.email,
subject: `${subjectByLocale[params.locale]}: ${params.name}`,
html: generateBookingHtml(params),
});
// Confirmation email to client
await resend.emails.send({
from: 'Studio Name <noreply@studioname.com>',
to: params.email,
subject: getConfirmationSubject(params.locale),
html: generateConfirmationHtml(params),
});
return { success: true };
} catch (error) {
console.error('Failed to send booking email:', error);
return { success: false, error: 'Failed to send email' };
}
}
function generateBookingHtml(params: BookingEmailParams): string {
return `
<h2>New Booking Request</h2>
<table style="border-collapse: collapse; width: 100%;">
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Name</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.name}</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Email</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.email}</td>
</tr>
${params.phone ? `
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Phone</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.phone}</td>
</tr>
` : ''}
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Session Type</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.sessionType}</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Experience</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.experienceLevel}</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Goals</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.goals}</td>
</tr>
${params.injuries ? `
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Injuries/Notes</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.injuries}</td>
</tr>
` : ''}
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>Preferred Times</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.preferredTimes}</td>
</tr>
</table>
<p><small>Locale: ${params.locale}</small></p>
`;
}
function getConfirmationSubject(locale: Locale): string {
const subjects: Record<Locale, string> = {
'pt-PT': 'Recebemos o seu pedido de sessão',
'en': 'We received your booking request',
'tr': 'Rezervasyon talebinizi aldık',
'es': 'Recibimos tu solicitud de reserva',
'fr': 'Nous avons reçu votre demande',
'de': 'Wir haben Ihre Anfrage erhalten',
};
return subjects[locale];
}
function generateConfirmationHtml(params: BookingEmailParams): string {
// Localized confirmation message
return `
<h2>Thank you for your booking request!</h2>
<p>Hi ${params.name},</p>
<p>We've received your request and will get back to you within 24 hours.</p>
<p>Best regards,<br>Studio Name</p>
`;
}tsx
// lib/emails/booking.ts
import { resend } from '@/lib/resend';
import type { Locale } from '@/i18n.config';
interface BookingEmailParams {
name: string;
email: string;
phone?: string;
goals: string;
experienceLevel: string;
injuries?: string;
preferredTimes: string;
sessionType: 'in-person' | 'online';
locale: Locale;
}
const subjectByLocale: Record<Locale, string> = {
'pt-PT': 'Novo Pedido de Sessão',
'en': 'New Booking Request',
'tr': 'Yeni Rezervasyon Talebi',
'es': 'Nueva Solicitud de Reserva',
'fr': 'Nouvelle Demande de Réservation',
'de': 'Neue Buchungsanfrage',
};
export async function sendBookingEmail(params: BookingEmailParams) {
if (!resend) {
console.log('Resend未配置,跳过邮件发送');
return { success: false, error: '邮件服务未配置' };
}
const toEmail = process.env.CONTACT_TO_EMAIL!;
try {
// 发送给工作室的邮件
await resend.emails.send({
from: 'Studio Booking <noreply@studioname.com>',
to: toEmail,
replyTo: params.email,
subject: `${subjectByLocale[params.locale]}: ${params.name}`,
html: generateBookingHtml(params),
});
// 发送给客户的确认邮件
await resend.emails.send({
from: 'Studio Name <noreply@studioname.com>',
to: params.email,
subject: getConfirmationSubject(params.locale),
html: generateConfirmationHtml(params),
});
return { success: true };
} catch (error) {
console.error('预约邮件发送失败:', error);
return { success: false, error: '邮件发送失败' };
}
}
function generateBookingHtml(params: BookingEmailParams): string {
return `
<h2>新预约请求</h2>
<table style="border-collapse: collapse; width: 100%;">
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>姓名</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.name}</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>邮箱</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.email}</td>
</tr>
${params.phone ? `
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>电话</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.phone}</td>
</tr>
` : ''}
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>服务类型</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.sessionType}</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>经验水平</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.experienceLevel}</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>目标</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.goals}</td>
</tr>
${params.injuries ? `
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>伤病/备注</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.injuries}</td>
</tr>
` : ''}
<tr>
<td style="padding: 8px; border: 1px solid #ddd;"><strong>偏好时间</strong></td>
<td style="padding: 8px; border: 1px solid #ddd;">${params.preferredTimes}</td>
</tr>
</table>
<p><small>语言环境:${params.locale}</small></p>
`;
}
function getConfirmationSubject(locale: Locale): string {
const subjects: Record<Locale, string> = {
'pt-PT': 'Recebemos o seu pedido de sessão',
'en': 'We received your booking request',
'tr': 'Rezervasyon talebinizi aldık',
'es': 'Recibimos tu solicitud de reserva',
'fr': 'Nous avons reçu votre demande',
'de': 'Wir haben Ihre Anfrage erhalten',
};
return subjects[locale];
}
function generateConfirmationHtml(params: BookingEmailParams): string {
// 本地化确认消息
return `
<h2>感谢您的预约请求!</h2>
<p>您好 ${params.name},</p>
<p>我们已收到您的请求,将在24小时内回复您。</p>
<p>此致<br>Studio Name团队</p>
`;
}Server Action with Email
集成邮件的Server Action
tsx
// lib/actions/contact.ts
'use server';
import { contactFormSchema } from '@/lib/validations';
import { sendContactEmail } from '@/lib/emails/contact';
import type { Locale } from '@/i18n.config';
export async function submitContactForm(formData: FormData, locale: Locale) {
const rawData = {
name: formData.get('name'),
email: formData.get('email'),
phone: formData.get('phone'),
message: formData.get('message'),
};
const result = contactFormSchema.safeParse(rawData);
if (!result.success) {
return {
success: false,
errors: result.error.flatten().fieldErrors,
};
}
const emailResult = await sendContactEmail({
...result.data,
locale,
});
if (!emailResult.success) {
return {
success: false,
errors: { _form: ['Failed to send message. Please try again.'] },
};
}
return { success: true };
}tsx
// lib/actions/contact.ts
'use server';
import { contactFormSchema } from '@/lib/validations';
import { sendContactEmail } from '@/lib/emails/contact';
import type { Locale } from '@/i18n.config';
export async function submitContactForm(formData: FormData, locale: Locale) {
const rawData = {
name: formData.get('name'),
email: formData.get('email'),
phone: formData.get('phone'),
message: formData.get('message'),
};
const result = contactFormSchema.safeParse(rawData);
if (!result.success) {
return {
success: false,
errors: result.error.flatten().fieldErrors,
};
}
const emailResult = await sendContactEmail({
...result.data,
locale,
});
if (!emailResult.success) {
return {
success: false,
errors: { _form: ['消息发送失败,请重试。'] },
};
}
return { success: true };
}Fallback Without Resend
无Resend时的降级方案
tsx
// When RESEND_API_KEY is not set
export function ContactForm() {
const hasEmail = hasResend();
if (!hasEmail) {
return (
<div className="text-center p-8">
<p>Contact us directly at:</p>
<a href="mailto:hello@studioname.com" className="text-primary">
hello@studioname.com
</a>
</div>
);
}
return <ContactFormWithEmail />;
}tsx
// 当未设置RESEND_API_KEY时
export function ContactForm() {
const hasEmail = hasResend();
if (!hasEmail) {
return (
<div className="text-center p-8">
<p>请直接通过以下邮箱联系我们:</p>
<a href="mailto:hello@studioname.com" className="text-primary">
hello@studioname.com
</a>
</div>
);
}
return <ContactFormWithEmail />;
}