Build reliable transactional email systems with Resend in Google Antigravity projects including templates and delivery tracking
# Resend Transactional Email Patterns for Google Antigravity
Modern web applications require reliable email delivery for user communications, notifications, and transactional messages. This comprehensive guide establishes patterns for integrating Resend with Google Antigravity projects, leveraging Gemini 3's understanding of email delivery systems and React Email templates.
## Email Service Configuration
Configure Resend with proper initialization and error handling:
```typescript
// lib/email/resend.ts
import { Resend } from "resend";
if (!process.env.RESEND_API_KEY) {
throw new Error("RESEND_API_KEY environment variable is required");
}
export const resend = new Resend(process.env.RESEND_API_KEY);
export const emailConfig = {
from: process.env.EMAIL_FROM || "noreply@yourdomain.com",
replyTo: process.env.EMAIL_REPLY_TO || "support@yourdomain.com",
};
export type EmailResult = {
success: boolean;
messageId?: string;
error?: string;
};
export async function sendEmail<T>(
to: string | string[],
subject: string,
react: React.ReactElement
): Promise<EmailResult> {
try {
const { data, error } = await resend.emails.send({
from: emailConfig.from,
to: Array.isArray(to) ? to : [to],
subject,
react,
});
if (error) {
console.error("Email send error:", error);
return { success: false, error: error.message };
}
return { success: true, messageId: data?.id };
} catch (err) {
console.error("Email exception:", err);
return { success: false, error: "Failed to send email" };
}
}
```
## React Email Templates
Create reusable email components with React Email:
```typescript
// emails/WelcomeEmail.tsx
import {
Body,
Button,
Container,
Head,
Heading,
Html,
Img,
Link,
Preview,
Section,
Text,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
verificationUrl: string;
}
export function WelcomeEmail({ userName, verificationUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Preview>Welcome to our platform, {userName}!</Preview>
<Body style={main}>
<Container style={container}>
<Img
src="https://yourdomain.com/logo.png"
width="150"
height="50"
alt="Logo"
style={logo}
/>
<Heading style={heading}>Welcome, {userName}!</Heading>
<Text style={paragraph}>
We're excited to have you on board. Please verify your email
address to get started with all our features.
</Text>
<Section style={buttonContainer}>
<Button style={button} href={verificationUrl}>
Verify Email Address
</Button>
</Section>
<Text style={footer}>
If you didn't create an account, you can safely ignore this email.
</Text>
</Container>
</Body>
</Html>
);
}
const main = {
backgroundColor: "#f6f9fc",
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
};
const container = {
backgroundColor: "#ffffff",
margin: "0 auto",
padding: "40px 20px",
maxWidth: "560px",
};
const logo = { margin: "0 auto 20px" };
const heading = { fontSize: "24px", fontWeight: "bold", textAlign: "center" as const };
const paragraph = { fontSize: "16px", lineHeight: "26px", color: "#525252" };
const buttonContainer = { textAlign: "center" as const, margin: "30px 0" };
const button = {
backgroundColor: "#5046e5",
borderRadius: "6px",
color: "#fff",
fontSize: "16px",
fontWeight: "bold",
textDecoration: "none",
padding: "12px 30px",
};
const footer = { fontSize: "14px", color: "#898989", marginTop: "30px" };
```
## Server Action Integration
Send emails from Next.js Server Actions:
```typescript
// app/actions/auth.ts
"use server";
import { sendEmail } from "@/lib/email/resend";
import { WelcomeEmail } from "@/emails/WelcomeEmail";
import { generateVerificationToken } from "@/lib/auth/tokens";
export async function registerUser(formData: FormData) {
const email = formData.get("email") as string;
const name = formData.get("name") as string;
// Create user in database
const user = await db.user.create({
data: { email, name },
});
// Generate verification token
const token = await generateVerificationToken(user.id);
const verificationUrl = `${process.env.NEXT_PUBLIC_APP_URL}/verify?token=${token}`;
// Send welcome email
const result = await sendEmail(
email,
"Welcome! Please verify your email",
<WelcomeEmail userName={name} verificationUrl={verificationUrl} />
);
if (!result.success) {
console.error("Failed to send welcome email:", result.error);
}
return { success: true, userId: user.id };
}
```
## Best Practices
1. **Template organization**: Keep email templates in dedicated `/emails` directory
2. **Preview locally**: Use React Email's preview server for development
3. **Error handling**: Always handle email failures gracefully
4. **Rate limiting**: Implement rate limits for user-triggered emails
5. **Logging**: Track email delivery for debugging and analytics
6. **Testing**: Use Resend's test mode in development environmentsThis Email prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their email implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For Email projects, consider mentioning your framework version, coding style, and any specific libraries you're using.