July 29, 2025
30 min read
Email functionality remains one of the most critical features in modern web applications. Whether you're building user authentication flows, notification systems, marketing campaigns, or transactional communications, reliable email delivery can make or break user engagement and business outcomes.
At MTechZilla, we've implemented sophisticated email systems across numerous projects - from travel booking confirmations that handle thousands of daily transactions to renewable energy platform alerts that notify operators of critical system events. Our experience with Next.js and SendGrid has taught us that successful email integration goes far beyond basic message sending; it requires thoughtful architecture, robust error handling, performance optimisation, and scalable design patterns.
In 2025, email integration has evolved significantly from simple SMTP configurations. Modern applications demand dynamic templating, personalisation at scale, comprehensive analytics, automated workflows, and seamless integration with component-based architectures. This comprehensive guide will walk you through implementing production-ready email solutions that can handle real-world complexity while maintaining performance and reliability.
Email integration in modern web applications has become increasingly sophisticated, driven by user expectations for personalised, timely, and contextually relevant communications. Today's applications must handle not just basic transactional emails, but complex automation workflows, advanced segmentation, and real-time personalisation.
Contemporary applications require email systems that can handle diverse use cases with enterprise-grade reliability:
Transactional Excellence: Order confirmations, password resets, account verifications, and booking notifications must be delivered instantly with 99.9% reliability.
Marketing Automation: Sophisticated drip campaigns, behavioral triggers, and personalized content delivery based on user actions and preferences.
System Communications: Real-time alerts, monitoring notifications, and operational communications that support business-critical processes.
User Experience Integration: Seamless integration with application UI, consistent branding, and responsive design that works across all email clients.
SendGrid has evolved into a comprehensive customer communication platform with advanced features that go far beyond simple email sending:
Modern email integration starts with a solid foundation. We'll build our solution using Next.js 15's App Router, TypeScript for type safety, and modern development practices that ensure maintainability and scalability.
Let's start by creating a new Next.js project with all the modern tooling we'll need:
# Create a new Next.js project with TypeScript
npx create-next-app@latest sendgrid-integration
# Navigate to the project directory
cd sendgrid-integration
# Install required dependencies
npm install @sendgrid/mail @sendgrid/eventwebhook zod react-hook-form @hookform/resolvers
Create a comprehensive environment configuration that follows security best practices:
# .env.local
SENDGRID_API_KEY=your_sendgrid_api_key_here
SENDGRID_FROM_EMAIL=noreply@yourdomain.com
SENDGRID_FROM_NAME=Your App Name
# Optional: For webhook verification
SENDGRID_WEBHOOK_SECRET=your_webhook_verification_key
# Development/staging flags
NODE_ENV=development
NEXT_PUBLIC_APP_URL=http://localhost:3000
Update your tsconfig.json for optimal development experience:
{
"compilerOptions": {
"target": "es2017",
"lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"],
"@/lib/*": ["./src/lib/*"],
"@/types/*": ["./src/types/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
Building a production-ready email system requires thoughtful architecture that can handle various email types, error conditions, and scaling requirements.
Create comprehensive TypeScript types that ensure type safety across your email system:
// src/types/email.ts
export interface EmailAddress {
email: string;
name?: string;
}
export interface EmailAttachment {
content: string;
filename: string;
type?: string;
disposition?: 'attachment' | 'inline';
content_id?: string;
}
export interface EmailTemplate {
templateId: string;
dynamicTemplateData: Record<string, any>;
}
export interface TransactionalEmail {
to: EmailAddress | EmailAddress[];
from: EmailAddress;
replyTo?: EmailAddress;
subject?: string;
text?: string;
html?: string;
template?: EmailTemplate;
attachments?: EmailAttachment[];
categories?: string[];
customArgs?: Record<string, string>;
sendAt?: number;
}
export interface EmailResponse {
success: boolean;
messageId?: string;
error?: string;
statusCode?: number;
}
export interface EmailValidationResult {
isValid: boolean;
result: {
email: string;
verdict: 'Valid' | 'Risky' | 'Invalid';
score: number;
local: string;
host: string;
suggestion?: string;
};
}
Create a comprehensive email service that handles various scenarios and provides excellent developer experience:
// src/lib/email/sendgrid-service.ts
import sgMail from '@sendgrid/mail';
import { EmailAddress, TransactionalEmail, EmailResponse, EmailValidationResult } from '@/types/email';
class SendGridService {
private static instance: SendGridService;
private isInitialized = false;
private constructor() {
this.initialize();
}
public static getInstance(): SendGridService {
if (!SendGridService.instance) {
SendGridService.instance = new SendGridService();
}
return SendGridService.instance;
}
private initialize(): void {
if (this.isInitialized) return;
const apiKey = process.env.SENDGRID_API_KEY;
if (!apiKey) {
throw new Error('SENDGRID_API_KEY environment variable is required');
}
sgMail.setApiKey(apiKey);
this.isInitialized = true;
}
/**
* Send a single transactional email
*/
public async sendEmail(emailData: TransactionalEmail): Promise<EmailResponse> {
try {
this.validateEmailData(emailData);
const msg = {
to: emailData.to,
from: emailData.from,
replyTo: emailData.replyTo,
subject: emailData.subject,
text: emailData.text,
html: emailData.html,
templateId: emailData.template?.templateId,
dynamicTemplateData: emailData.template?.dynamicTemplateData,
attachments: emailData.attachments,
categories: emailData.categories,
customArgs: emailData.customArgs,
sendAt: emailData.sendAt,
trackingSettings: {
clickTracking: { enable: true },
openTracking: { enable: true },
subscriptionTracking: { enable: false },
},
};
const [response] = await sgMail.send(msg);
return {
success: true,
messageId: response.headers['x-message-id'],
statusCode: response.statusCode,
};
} catch (error: any) {
console.error('SendGrid email error:', error);
return {
success: false,
error: error.message || 'Failed to send email',
statusCode: error.code || 500,
};
}
}
/**
* Send multiple emails (batch sending)
*/
public async sendBulkEmails(emails: TransactionalEmail[]): Promise<EmailResponse[]> {
const results: EmailResponse[] = [];
// Process emails in batches to avoid rate limits
const batchSize = 100;
for (let i = 0; i < emails.length; i += batchSize) {
const batch = emails.slice(i, i + batchSize);
const batchPromises = batch.map(email => this.sendEmail(email));
const batchResults = await Promise.allSettled(batchPromises);
batchResults.forEach((result, index) => {
if (result.status === 'fulfilled') {
results.push(result.value);
} else {
results.push({
success: false,
error: `Batch email ${i + index} failed: ${result.reason}`,
});
}
});
// Add delay between batches to respect rate limits
if (i + batchSize < emails.length) {
await this.delay(100);
}
}
return results;
}
/**
* Validate email address using SendGrid's validation API
*/
public async validateEmail(email: string): Promise<EmailValidationResult> {
try {
const response = await fetch(
`https://api.sendgrid.com/v3/validations/email`,
{
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.SENDGRID_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({ email }),
}
);
if (!response.ok) {
throw new Error(`Validation API error: ${response.statusText}`);
}
const data = await response.json();
return {
isValid: data.result.verdict === 'Valid',
result: data.result,
};
} catch (error: any) {
console.error('Email validation error:', error);
return {
isValid: false,
result: {
email,
verdict: 'Invalid',
score: 0,
local: '',
host: '',
},
};
}
}
/**
* Get detailed email statistics
*/
public async getEmailStats(startDate: string, endDate?: string): Promise<any> {
try {
const params = new URLSearchParams({
start_date: startDate,
...(endDate && { end_date: endDate }),
aggregated_by: 'day',
});
const response = await fetch(
`https://api.sendgrid.com/v3/stats?${params}`,
{
headers: {
'Authorization': `Bearer ${process.env.SENDGRID_API_KEY}`,
},
}
);
if (!response.ok) {
throw new Error(`Stats API error: ${response.statusText}`);
}
return await response.json();
} catch (error: any) {
console.error('Email stats error:', error);
return null;
}
}
private validateEmailData(emailData: TransactionalEmail): void {
if (!emailData.to || (Array.isArray(emailData.to) && emailData.to.length === 0)) {
throw new Error('Email recipient is required');
}
if (!emailData.from) {
throw new Error('Email sender is required');
}
if (!emailData.template && !emailData.subject) {
throw new Error('Email subject is required when not using a template');
}
if (!emailData.template && !emailData.text && !emailData.html) {
throw new Error('Email content (text or html) is required when not using a template');
}
}
private delay(ms: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
export const sendGridService = SendGridService.getInstance();
Create a sophisticated template management system that supports different email types:
// src/lib/email/templates.ts
import { EmailTemplate } from '@/types/email';
export enum EmailTemplateType {
WELCOME = 'welcome',
PASSWORD_RESET = 'password-reset',
EMAIL_VERIFICATION = 'email-verification',
BOOKING_CONFIRMATION = 'booking-confirmation',
ORDER_NOTIFICATION = 'order-notification',
SYSTEM_ALERT = 'system-alert',
MARKETING_NEWSLETTER = 'marketing-newsletter',
}
export interface TemplateConfig {
id: string;
name: string;
description: string;
category: 'transactional' | 'marketing' | 'system';
requiredData: string[];
optionalData?: string[];
}
export const EMAIL_TEMPLATES: Record<EmailTemplateType, TemplateConfig> = {
[EmailTemplateType.WELCOME]: {
id: 'd-abc123def456',
name: 'Welcome Email',
description: 'Welcome new users to the platform',
category: 'transactional',
requiredData: ['firstName', 'companyName'],
optionalData: ['accountType', 'onboardingUrl'],
},
[EmailTemplateType.PASSWORD_RESET]: {
id: 'd-def456ghi789',
name: 'Password Reset',
description: 'Password reset instructions',
category: 'transactional',
requiredData: ['firstName', 'resetUrl', 'expirationTime'],
},
[EmailTemplateType.EMAIL_VERIFICATION]: {
id: 'd-ghi789jkl012',
name: 'Email Verification',
description: 'Email address verification',
category: 'transactional',
requiredData: ['firstName', 'verificationUrl', 'verificationCode'],
},
[EmailTemplateType.BOOKING_CONFIRMATION]: {
id: 'd-jkl012mno345',
name: 'Booking Confirmation',
description: 'Travel booking confirmation',
category: 'transactional',
requiredData: ['customerName', 'bookingReference', 'hotelName', 'checkInDate', 'checkOutDate'],
optionalData: ['roomType', 'totalAmount', 'cancellationPolicy'],
},
[EmailTemplateType.SYSTEM_ALERT]: {
id: 'd-mno345pqr678',
name: 'System Alert',
description: 'Critical system notifications',
category: 'system',
requiredData: ['alertType', 'alertMessage', 'timestamp'],
optionalData: ['severity', 'actionRequired', 'dashboardUrl'],
},
};
export class EmailTemplateManager {
/**
* Create a template email configuration
*/
public static createTemplate(
templateType: EmailTemplateType,
dynamicData: Record<string, any>
): EmailTemplate {
const config = EMAIL_TEMPLATES[templateType];
if (!config) {
throw new Error(`Template configuration not found for type: ${templateType}`);
}
// Validate required data
const missingFields = config.requiredData.filter(field => !(field in dynamicData));
if (missingFields.length > 0) {
throw new Error(`Missing required template data: ${missingFields.join(', ')}`);
}
return {
templateId: config.id,
dynamicTemplateData: {
...dynamicData,
// Add common data available to all templates
currentYear: new Date().getFullYear(),
companyName: process.env.NEXT_PUBLIC_COMPANY_NAME || 'MTechZilla',
supportEmail: process.env.SENDGRID_FROM_EMAIL,
appUrl: process.env.NEXT_PUBLIC_APP_URL,
},
};
}
/**
* Validate template data structure
*/
public static validateTemplateData(
templateType: EmailTemplateType,
data: Record<string, any>
): { isValid: boolean; errors: string[] } {
const config = EMAIL_TEMPLATES[templateType];
const errors: string[] = [];
if (!config) {
errors.push(`Unknown template type: ${templateType}`);
return { isValid: false, errors };
}
// Check required fields
config.requiredData.forEach(field => {
if (!(field in data) || data[field] === null || data[field] === undefined) {
errors.push(`Missing required field: ${field}`);
}
});
return {
isValid: errors.length === 0,
errors,
};
}
}
Next.js 15's Server Actions provide a powerful way to handle email operations directly from React components without creating separate API routes.
Create comprehensive Server Actions that handle various email scenarios:
// src/lib/actions/email-actions.ts
'use server';
import { z } from 'zod';
import { sendGridService } from '@/lib/email/sendgrid-service';
import { EmailTemplateManager, EmailTemplateType } from '@/lib/email/templates';
import { EmailAddress, TransactionalEmail } from '@/types/email';
// Validation schemas
const ContactFormSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Invalid email address'),
subject: z.string().min(5, 'Subject must be at least 5 characters'),
message: z.string().min(10, 'Message must be at least 10 characters'),
});
const WelcomeEmailSchema = z.object({
email: z.string().email('Invalid email address'),
firstName: z.string().min(1, 'First name is required'),
lastName: z.string().optional(),
accountType: z.enum(['individual', 'business']).optional(),
});
const PasswordResetSchema = z.object({
email: z.string().email('Invalid email address'),
resetToken: z.string().min(1, 'Reset token is required'),
});
// Server Actions
export async function sendContactFormEmail(formData: FormData) {
try {
// Validate form data
const validatedFields = ContactFormSchema.safeParse({
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message'),
});
if (!validatedFields.success) {
return {
success: false,
error: 'Invalid form data',
fieldErrors: validatedFields.error.flatten().fieldErrors,
};
}
const { name, email, subject, message } = validatedFields.data;
// Validate email address first
const emailValidation = await sendGridService.validateEmail(email);
if (!emailValidation.isValid) {
return {
success: false,
error: 'Invalid email address',
};
}
const emailData: TransactionalEmail = {
to: {
email: process.env.SENDGRID_FROM_EMAIL!,
name: 'MTechZilla Support'
},
from: {
email: process.env.SENDGRID_FROM_EMAIL!,
name: 'Contact Form'
},
replyTo: { email, name },
subject: `Contact Form: ${subject}`,
html: `
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
<h2 style="color: #333;">New Contact Form Submission</h2>
<div style="background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0;">
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Subject:</strong> ${subject}</p>
</div>
<div style="background: white; padding: 20px; border-left: 4px solid #007bff;">
<h3 style="margin-top: 0;">Message:</h3>
<p style="white-space: pre-wrap;">${message}</p>
</div>
</div>
`,
categories: ['contact-form'],
customArgs: {
source: 'website-contact',
userAgent: 'server-action',
},
};
const result = await sendGridService.sendEmail(emailData);
if (result.success) {
// Send auto-reply to the user
await sendAutoReplyEmail(email, name);
}
return result;
} catch (error: any) {
console.error('Contact form email error:', error);
return {
success: false,
error: 'Failed to send contact form email',
};
}
}
export async function sendWelcomeEmail(formData: FormData) {
try {
const validatedFields = WelcomeEmailSchema.safeParse({
email: formData.get('email'),
firstName: formData.get('firstName'),
lastName: formData.get('lastName'),
accountType: formData.get('accountType'),
});
if (!validatedFields.success) {
return {
success: false,
error: 'Invalid form data',
fieldErrors: validatedFields.error.flatten().fieldErrors,
};
}
const { email, firstName, lastName, accountType } = validatedFields.data;
// Create welcome email template
const template = EmailTemplateManager.createTemplate(
EmailTemplateType.WELCOME,
{
firstName,
lastName: lastName || '',
companyName: 'MTechZilla',
accountType: accountType || 'individual',
onboardingUrl: `${process.env.NEXT_PUBLIC_APP_URL}/onboarding`,
}
);
const emailData: TransactionalEmail = {
to: { email, name: `${firstName} ${lastName || ''}`.trim() },
from: {
email: process.env.SENDGRID_FROM_EMAIL!,
name: process.env.SENDGRID_FROM_NAME || 'MTechZilla'
},
template,
categories: ['welcome', 'onboarding'],
customArgs: {
userType: accountType || 'individual',
source: 'registration',
},
};
return await sendGridService.sendEmail(emailData);
} catch (error: any) {
console.error('Welcome email error:', error);
return {
success: false,
error: 'Failed to send welcome email',
};
}
}
export async function sendPasswordResetEmail(formData: FormData) {
try {
const validatedFields = PasswordResetSchema.safeParse({
email: formData.get('email'),
resetToken: formData.get('resetToken'),
});
if (!validatedFields.success) {
return {
success: false,
error: 'Invalid form data',
fieldErrors: validatedFields.error.flatten().fieldErrors,
};
}
const { email, resetToken } = validatedFields.data;
// Create password reset template
const template = EmailTemplateManager.createTemplate(
EmailTemplateType.PASSWORD_RESET,
{
firstName: 'User', // In real app, get from user database
resetUrl: `${process.env.NEXT_PUBLIC_APP_URL}/reset-password?token=${resetToken}`,
expirationTime: '24 hours',
}
);
const emailData: TransactionalEmail = {
to: { email },
from: {
email: process.env.SENDGRID_FROM_EMAIL!,
name: process.env.SENDGRID_FROM_NAME || 'MTechZilla Security'
},
template,
categories: ['password-reset', 'security'],
customArgs: {
resetTokenHash: resetToken.substring(0, 8), // Log partial token for debugging
source: 'password-reset-request',
},
};
return await sendGridService.sendEmail(emailData);
} catch (error: any) {
console.error('Password reset email error:', error);
return {
success: false,
error: 'Failed to send password reset email',
};
}
}
// Helper function for auto-reply
async function sendAutoReplyEmail(email: string, name: string) {
try {
const emailData: TransactionalEmail = {
to: { email, name },
from: {
email: process.env.SENDGRID_FROM_EMAIL!,
name: process.env.SENDGRID_FROM_NAME || 'MTechZilla'
},
subject: 'Thank you for contacting MTechZilla',
html: `
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
<h2 style="color: #007bff;">Thank you for your message!</h2>
<p>Hi ${name},</p>
<p>We've received your message and will get back to you within 24 hours.</p>
<p>In the meantime, feel free to explore our <a href="${process.env.NEXT_PUBLIC_APP_URL}/services">services</a> or check out our <a href="${process.env.NEXT_PUBLIC_APP_URL}/blog">latest blog posts</a>.</p>
<br>
<p>Best regards,<br>The MTechZilla Team</p>
</div>
`,
categories: ['auto-reply'],
};
await sendGridService.sendEmail(emailData);
} catch (error) {
console.error('Auto-reply email error:', error);
// Don't throw error for auto-reply failures
}
}
export async function validateEmailAddress(email: string) {
try {
return await sendGridService.validateEmail(email);
} catch (error: any) {
console.error('Email validation error:', error);
return {
isValid: false,
result: {
email,
verdict: 'Invalid' as const,
score: 0,
local: '',
host: '',
},
};
}
}
Create sophisticated React components that provide excellent user experience while handling email operations efficiently.
Build a contact form with comprehensive validation, loading states, and error handling:
// src/components/contact-form.tsx
'use client';
import { useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { sendContactFormEmail, validateEmailAddress } from '@/lib/actions/email-actions';
const ContactFormSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Invalid email address'),
subject: z.string().min(5, 'Subject must be at least 5 characters'),
message: z.string().min(10, 'Message must be at least 10 characters'),
});
type ContactFormData = z.infer<typeof ContactFormSchema>;
export default function ContactForm() {
const [isPending, startTransition] = useTransition();
const [submitStatus, setSubmitStatus] = useState<{
type: 'success' | 'error' | null;
message: string;
}>({ type: null, message: '' });
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
reset,
watch,
setError,
} = useForm<ContactFormData>({
resolver: zodResolver(ContactFormSchema),
});
const watchedEmail = watch('email');
// Real-time email validation
const handleEmailValidation = async (email: string) => {
if (!email || !email.includes('@')) return;
try {
const validation = await validateEmailAddress(email);
if (!validation.isValid) {
setError('email', {
type: 'manual',
message: validation.result.suggestion
? `Did you mean ${validation.result.suggestion}?`
: 'This email address appears to be invalid',
});
}
} catch (error) {
// Silently handle validation errors
}
};
const onSubmit = (data: ContactFormData) => {
startTransition(async () => {
try {
const formData = new FormData();
Object.entries(data).forEach(([key, value]) => {
formData.append(key, value);
});
const result = await sendContactFormEmail(formData);
if (result.success) {
setSubmitStatus({
type: 'success',
message: 'Thank you! Your message has been sent successfully. We\'ll get back to you soon.',
});
reset();
} else {
setSubmitStatus({
type: 'error',
message: result.error || 'Failed to send message. Please try again.',
});
// Handle field-specific errors
if (result.fieldErrors) {
Object.entries(result.fieldErrors).forEach(([field, errors]) => {
if (errors && errors.length > 0) {
setError(field as keyof ContactFormData, {
type: 'manual',
message: errors[0],
});
}
});
}
}
} catch (error) {
setSubmitStatus({
type: 'error',
message: 'An unexpected error occurred. Please try again.',
});
}
});
};
return (
<div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-lg">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Get in Touch</h2>
{submitStatus.type && (
<div className={`mb-6 p-4 rounded-lg ${
submitStatus.type === 'success'
? 'bg-green-50 border border-green-200 text-green-800'
: 'bg-red-50 border border-red-200 text-red-800'
}`}>
<div className="flex items-center">
{submitStatus.type === 'success' ? (
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
) : (
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
)}
<p>{submitStatus.message}</p>
</div>
</div>
)}
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
Full Name *
</label>
<input
type="text"
id="name"
{...register('name')}
className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors ${
errors.name ? 'border-red-500' : 'border-gray-300'
}`}
placeholder="Enter your full name"
/>
{errors.name && (
<p className="mt-1 text-sm text-red-600">{errors.name.message}</p>
)}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
Email Address *
</label>
<input
type="email"
id="email"
{...register('email')}
onBlur={(e) => handleEmailValidation(e.target.value)}
className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors ${
errors.email ? 'border-red-500' : 'border-gray-300'
}`}
placeholder="Enter your email address"
/>
{errors.email && (
<p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
)}
</div>
</div>
<div>
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
Subject *
</label>
<input
type="text"
id="subject"
{...register('subject')}
className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors ${
errors.subject ? 'border-red-500' : 'border-gray-300'
}`}
placeholder="What's this about?"
/>
{errors.subject && (
<p className="mt-1 text-sm text-red-600">{errors.subject.message}</p>
)}
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
Message *
</label>
<textarea
id="message"
rows={6}
{...register('message')}
className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-vertical ${
errors.message ? 'border-red-500' : 'border-gray-300'
}`}
placeholder="Tell us about your project or question..."
/>
{errors.message && (
<p className="mt-1 text-sm text-red-600">{errors.message.message}</p>
)}
</div>
<button
type="submit"
disabled={isPending || isSubmitting}
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-3 px-6 rounded-lg transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed"
>
{isPending || isSubmitting ? (
<div className="flex items-center justify-center">
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Sending Message...
</div>
) : (
'Send Message'
)}
</button>
</form>
<div className="mt-6 text-center text-sm text-gray-600">
<p>We typically respond within 24 hours.</p>
<p>For urgent matters, call us at <a href="tel:+1234567890" className="text-blue-600 hover:underline">+1 (234) 567-8900</a></p>
</div>
</div>
);
}
Create a newsletter subscription component with advanced features:
// src/components/newsletter-subscription.tsx
'use client';
import { useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { validateEmailAddress } from '@/lib/actions/email-actions';
const NewsletterSchema = z.object({
email: z.string().email('Please enter a valid email address'),
interests: z.array(z.string()).optional(),
frequency: z.enum(['weekly', 'monthly']).default('monthly'),
});
type NewsletterData = z.infer<typeof NewsletterSchema>;
const interestOptions = [
{ id: 'web-development', label: 'Web Development' },
{ id: 'mobile-apps', label: 'Mobile Apps' },
{ id: 'ai-ml', label: 'AI & Machine Learning' },
{ id: 'cloud-services', label: 'Cloud Services' },
{ id: 'industry-insights', label: 'Industry Insights' },
];
export default function NewsletterSubscription() {
const [isPending, startTransition] = useTransition();
const [subscriptionStatus, setSubscriptionStatus] = useState<{
type: 'success' | 'error' | null;
message: string;
}>({ type: null, message: '' });
const {
register,
handleSubmit,
formState: { errors },
watch,
reset,
} = useForm<NewsletterData>({
resolver: zodResolver(NewsletterSchema),
defaultValues: {
interests: [],
frequency: 'monthly',
},
});
const onSubmit = (data: NewsletterData) => {
startTransition(async () => {
try {
// Validate email first
const validation = await validateEmailAddress(data.email);
if (!validation.isValid) {
setSubscriptionStatus({
type: 'error',
message: 'Please enter a valid email address.',
});
return;
}
// TODO: Add newsletter subscription logic here
// This would typically involve adding the email to a mailing list
// For now, we'll simulate success
await new Promise(resolve => setTimeout(resolve, 1000));
setSubscriptionStatus({
type: 'success',
message: 'Thank you for subscribing! You\'ll receive a confirmation email shortly.',
});
reset();
} catch (error) {
setSubscriptionStatus({
type: 'error',
message: 'Something went wrong. Please try again.',
});
}
});
};
return (
<div className="bg-gradient-to-r from-blue-600 to-purple-700 rounded-xl p-8 text-white">
<div className="max-w-md mx-auto">
<h3 className="text-2xl font-bold mb-2">Stay Updated</h3>
<p className="text-blue-100 mb-6">
Get the latest insights on web development, technology trends, and industry news.
</p>
{subscriptionStatus.type && (
<div className={`mb-6 p-4 rounded-lg ${
subscriptionStatus.type === 'success'
? 'bg-green-500 bg-opacity-20 border border-green-400'
: 'bg-red-500 bg-opacity-20 border border-red-400'
}`}>
<p className="text-sm">{subscriptionStatus.message}</p>
</div>
)}
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div>
<input
type="email"
{...register('email')}
placeholder="Enter your email address"
className="w-full px-4 py-3 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-white focus:ring-opacity-50"
/>
{errors.email && (
<p className="mt-1 text-sm text-red-200">{errors.email.message}</p>
)}
</div>
<div>
<label className="block text-sm font-medium mb-2">Interests (optional)</label>
<div className="grid grid-cols-1 gap-2">
{interestOptions.map((interest) => (
<label key={interest.id} className="flex items-center">
<input
type="checkbox"
value={interest.id}
{...register('interests')}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 focus:ring-opacity-50"
/>
<span className="ml-2 text-sm">{interest.label}</span>
</label>
))}
</div>
</div>
<div>
<label className="block text-sm font-medium mb-2">Email Frequency</label>
<div className="flex gap-4">
<label className="flex items-center">
<input
type="radio"
value="weekly"
{...register('frequency')}
className="text-blue-600 focus:ring-blue-500 focus:ring-opacity-50"
/>
<span className="ml-2 text-sm">Weekly</span>
</label>
<label className="flex items-center">
<input
type="radio"
value="monthly"
{...register('frequency')}
className="text-blue-600 focus:ring-blue-500 focus:ring-opacity-50"
/>
<span className="ml-2 text-sm">Monthly</span>
</label>
</div>
</div>
<button
type="submit"
disabled={isPending}
className="w-full bg-white text-blue-600 font-medium py-3 px-6 rounded-lg hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{isPending ? 'Subscribing...' : 'Subscribe to Newsletter'}
</button>
</form>
<p className="text-xs text-blue-200 mt-4 text-center">
We respect your privacy. Unsubscribe at any time.
</p>
</div>
</div>
);
}
Implementing production-ready email systems requires comprehensive monitoring, analytics, and webhook handling for real-time event processing.
Create a robust webhook system to track email events:
// src/app/api/webhooks/sendgrid/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { EventWebhook, EventWebhookHeader } from '@sendgrid/eventwebhook';
interface SendGridEvent {
email: string;
timestamp: number;
event: 'processed' | 'delivered' | 'open' | 'click' | 'bounce' | 'dropped' | 'deferred' | 'unsubscribe' | 'group_unsubscribe' | 'group_resubscribe' | 'spam_report';
sg_event_id: string;
sg_message_id: string;
category?: string[];
reason?: string;
status?: string;
url?: string;
useragent?: string;
ip?: string;
}
export async function POST(request: NextRequest) {
try {
const body = await request.text();
const signature = request.headers.get(EventWebhookHeader.SIGNATURE());
const timestamp = request.headers.get(EventWebhookHeader.TIMESTAMP());
// Verify webhook signature if secret is configured
if (process.env.SENDGRID_WEBHOOK_SECRET) {
const eventWebhook = new EventWebhook();
const ecPublicKey = eventWebhook.convertPublicKeyToECDSA(process.env.SENDGRID_WEBHOOK_SECRET);
const isValid = eventWebhook.verifySignature(
ecPublicKey,
body,
signature!,
timestamp!
);
if (!isValid) {
console.error('Invalid SendGrid webhook signature');
return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
}
}
const events: SendGridEvent[] = JSON.parse(body);
// Process each event
for (const event of events) {
await processEmailEvent(event);
}
return NextResponse.json({ message: 'Webhook processed successfully' });
} catch (error: any) {
console.error('SendGrid webhook error:', error);
return NextResponse.json(
{ error: 'Webhook processing failed' },
{ status: 500 }
);
}
}
async function processEmailEvent(event: SendGridEvent) {
try {
// Log the event (in production, you'd store this in a database)
console.log(`Email event: ${event.event} for ${event.email} at ${new Date(event.timestamp * 1000).toISOString()}`);
switch (event.event) {
case 'delivered':
await handleEmailDelivered(event);
break;
case 'open':
await handleEmailOpened(event);
break;
case 'click':
await handleEmailClicked(event);
break;
case 'bounce':
await handleEmailBounced(event);
break;
case 'dropped':
await handleEmailDropped(event);
break;
case 'unsubscribe':
await handleUnsubscribe(event);
break;
case 'spam_report':
await handleSpamReport(event);
break;
default:
console.log(`Unhandled event type: ${event.event}`);
}
} catch (error) {
console.error('Error processing email event:', error);
}
}
async function handleEmailDelivered(event: SendGridEvent) {
// Update delivery status in database
// Send follow-up emails if needed
console.log(`Email delivered successfully to ${event.email}`);
}
async function handleEmailOpened(event: SendGridEvent) {
// Track engagement metrics
// Trigger marketing automation if applicable
console.log(`Email opened by ${event.email} using ${event.useragent} from IP ${event.ip}`);
}
async function handleEmailClicked(event: SendGridEvent) {
// Track click-through rates
// Update user engagement scores
console.log(`Email link clicked by ${event.email}: ${event.url}`);
}
async function handleEmailBounced(event: SendGridEvent) {
// Mark email as invalid
// Remove from future campaigns if hard bounce
console.log(`Email bounced for ${event.email}: ${event.reason}`);
// In production, you might want to update a database
// await updateEmailStatus(event.email, 'bounced', event.reason);
}
async function handleEmailDropped(event: SendGridEvent) {
// Log dropped emails for review
// Check for reputation issues
console.log(`Email dropped for ${event.email}: ${event.reason}`);
}
async function handleUnsubscribe(event: SendGridEvent) {
// Remove from mailing lists
// Update user preferences
console.log(`User unsubscribed: ${event.email}`);
// In production, you might want to update a database
// await updateSubscriptionStatus(event.email, false);
}
async function handleSpamReport(event: SendGridEvent) {
// Review content and sender reputation
// Take corrective actions
console.log(`Spam report for ${event.email}`);
}
Create a comprehensive analytics component:
// src/components/email-analytics-dashboard.tsx
'use client';
import { useState, useEffect } from 'react';
import { sendGridService } from '@/lib/email/sendgrid-service';
interface EmailStats {
date: string;
stats: {
requests: number;
delivered: number;
opens: number;
clicks: number;
bounces: number;
spam_reports: number;
unsubscribes: number;
}[];
}
interface AnalyticsMetrics {
totalSent: number;
deliveryRate: number;
openRate: number;
clickRate: number;
bounceRate: number;
unsubscribeRate: number;
}
export default function EmailAnalyticsDashboard() {
const [stats, setStats] = useState<EmailStats[]>([]);
const [metrics, setMetrics] = useState<AnalyticsMetrics | null>(null);
const [loading, setLoading] = useState(true);
const [dateRange, setDateRange] = useState('7'); // days
useEffect(() => {
fetchEmailStats();
}, [dateRange]);
const fetchEmailStats = async () => {
try {
setLoading(true);
const startDate = new Date();
startDate.setDate(startDate.getDate() - parseInt(dateRange));
const statsData = await sendGridService.getEmailStats(
startDate.toISOString().split('T')[0]
);
if (statsData) {
setStats(statsData);
calculateMetrics(statsData);
}
} catch (error) {
console.error('Failed to fetch email stats:', error);
} finally {
setLoading(false);
}
};
const calculateMetrics = (statsData: EmailStats[]) => {
const totals = statsData.reduce((acc, day) => {
day.stats.forEach(stat => {
acc.requests += stat.requests;
acc.delivered += stat.delivered;
acc.opens += stat.opens;
acc.clicks += stat.clicks;
acc.bounces += stat.bounces;
acc.spam_reports += stat.spam_reports;
acc.unsubscribes += stat.unsubscribes;
});
return acc;
}, {
requests: 0,
delivered: 0,
opens: 0,
clicks: 0,
bounces: 0,
spam_reports: 0,
unsubscribes: 0,
});
setMetrics({
totalSent: totals.requests,
deliveryRate: totals.requests > 0 ? (totals.delivered / totals.requests) * 100 : 0,
openRate: totals.delivered > 0 ? (totals.opens / totals.delivered) * 100 : 0,
clickRate: totals.delivered > 0 ? (totals.clicks / totals.delivered) * 100 : 0,
bounceRate: totals.requests > 0 ? (totals.bounces / totals.requests) * 100 : 0,
unsubscribeRate: totals.delivered > 0 ? (totals.unsubscribes / totals.delivered) * 100 : 0,
});
};
if (loading) {
return (
<div className="bg-white rounded-lg shadow p-6">
<div className="animate-pulse">
<div className="h-6 bg-gray-200 rounded mb-4"></div>
<div className="space-y-3">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded"></div>
</div>
</div>
</div>
);
}
return (
<div className="bg-white rounded-lg shadow p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900">Email Analytics</h2>
<select
value={dateRange}
onChange={(e) => setDateRange(e.target.value)}
className="border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="7">Last 7 days</option>
<option value="30">Last 30 days</option>
<option value="90">Last 90 days</option>
</select>
</div>
{metrics && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<MetricCard
title="Total Sent"
value={metrics.totalSent}
format="number"
icon="📧"
/>
<MetricCard
title="Delivery Rate"
value={metrics.deliveryRate}
format="percentage"
icon="✅"
status={metrics.deliveryRate >= 95 ? 'good' : metrics.deliveryRate >= 90 ? 'warning' : 'error'}
/>
<MetricCard
title="Open Rate"
value={metrics.openRate}
format="percentage"
icon="👀"
status={metrics.openRate >= 20 ? 'good' : metrics.openRate >= 15 ? 'warning' : 'error'}
/>
<MetricCard
title="Click Rate"
value={metrics.clickRate}
format="percentage"
icon="🖱️"
status={metrics.clickRate >= 3 ? 'good' : metrics.clickRate >= 1.5 ? 'warning' : 'error'}
/>
<MetricCard
title="Bounce Rate"
value={metrics.bounceRate}
format="percentage"
icon="⚠️"
status={metrics.bounceRate <= 2 ? 'good' : metrics.bounceRate <= 5 ? 'warning' : 'error'}
/>
<MetricCard
title="Unsubscribe Rate"
value={metrics.unsubscribeRate}
format="percentage"
icon="👋"
status={metrics.unsubscribeRate <= 0.5 ? 'good' : metrics.unsubscribeRate <= 1 ? 'warning' : 'error'}
/>
</div>
)}
<div className="border-t pt-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Daily Performance</h3>
<div className="space-y-2">
{stats.map((day, index) => (
<div key={day.date} className="flex items-center justify-between py-2 border-b border-gray-100">
<span className="text-sm text-gray-600">{day.date}</span>
<div className="flex space-x-4 text-sm">
<span>Sent: {day.stats.reduce((acc, stat) => acc + stat.requests, 0)}</span>
<span className="text-green-600">
Delivered: {day.stats.reduce((acc, stat) => acc + stat.delivered, 0)}
</span>
<span className="text-blue-600">
Opens: {day.stats.reduce((acc, stat) => acc + stat.opens, 0)}
</span>
<span className="text-purple-600">
Clicks: {day.stats.reduce((acc, stat) => acc + stat.clicks, 0)}
</span>
</div>
</div>
))}
</div>
</div>
</div>
);
}
interface MetricCardProps {
title: string;
value: number;
format: 'number' | 'percentage';
icon: string;
status?: 'good' | 'warning' | 'error';
}
function MetricCard({ title, value, format, icon, status }: MetricCardProps) {
const formatValue = (val: number, fmt: string) => {
if (fmt === 'percentage') {
return `${val.toFixed(1)}%`;
}
return val.toLocaleString();
};
const getStatusColor = (status?: string) => {
switch (status) {
case 'good': return 'text-green-600 bg-green-50 border-green-200';
case 'warning': return 'text-yellow-600 bg-yellow-50 border-yellow-200';
case 'error': return 'text-red-600 bg-red-50 border-red-200';
default: return 'text-gray-600 bg-gray-50 border-gray-200';
}
};
return (
<div className={`p-4 rounded-lg border ${getStatusColor(status)}`}>
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium">{title}</p>
<p className="text-2xl font-bold">{formatValue(value, format)}</p>
</div>
<span className="text-2xl">{icon}</span>
</div>
</div>
);
}
Building production-ready email systems requires comprehensive testing strategies, security measures, and deployment considerations.
Create thorough tests for your email functionality:
// src/__tests__/email-service.test.ts
import { describe, it, expect, jest, beforeEach } from '@jest/globals';
import { sendGridService } from '@/lib/email/sendgrid-service';
import { EmailTemplateManager, EmailTemplateType } from '@/lib/email/templates';
// Mock SendGrid
jest.mock('@sendgrid/mail', () => ({
setApiKey: jest.fn(),
send: jest.fn(),
}));
describe('SendGrid Email Service', () => {
beforeEach(() => {
jest.clearAllMocks();
process.env.SENDGRID_API_KEY = 'test-api-key';
process.env.SENDGRID_FROM_EMAIL = 'test@example.com';
});
describe('sendEmail', () => {
it('should send email successfully', async () => {
const mockSgMail = require('@sendgrid/mail');
mockSgMail.send.mockResolvedValue([{ statusCode: 202, headers: { 'x-message-id': 'test-id' } }]);
const emailData = {
to: { email: 'recipient@example.com', name: 'Test User' },
from: { email: 'sender@example.com', name: 'Test Sender' },
subject: 'Test Email',
text: 'Test email content',
};
const result = await sendGridService.sendEmail(emailData);
expect(result.success).toBe(true);
expect(result.messageId).toBe('test-id');
expect(mockSgMail.send).toHaveBeenCalledTimes(1);
});
it('should handle email sending errors', async () => {
const mockSgMail = require('@sendgrid/mail');
mockSgMail.send.mockRejectedValue(new Error('API Error'));
const emailData = {
to: { email: 'recipient@example.com' },
from: { email: 'sender@example.com' },
subject: 'Test Email',
text: 'Test content',
};
const result = await sendGridService.sendEmail(emailData);
expect(result.success).toBe(false);
expect(result.error).toBe('API Error');
});
it('should validate required email fields', async () => {
const emailData = {
to: { email: 'recipient@example.com' },
from: { email: 'sender@example.com' },
// Missing subject and content
};
const result = await sendGridService.sendEmail(emailData);
expect(result.success).toBe(false);
expect(result.error).toContain('required');
});
});
describe('validateEmail', () => {
it('should validate email addresses', async () => {
global.fetch = jest.fn().mockResolvedValue({
ok: true,
json: () => Promise.resolve({
result: {
email: 'test@example.com',
verdict: 'Valid',
score: 0.99,
local: 'test',
host: 'example.com',
},
}),
});
const result = await sendGridService.validateEmail('test@example.com');
expect(result.isValid).toBe(true);
expect(result.result.verdict).toBe('Valid');
});
it('should handle invalid email addresses', async () => {
global.fetch = jest.fn().mockResolvedValue({
ok: true,
json: () => Promise.resolve({
result: {
email: 'invalid-email',
verdict: 'Invalid',
score: 0.01,
local: '',
host: '',
},
}),
});
const result = await sendGridService.validateEmail('invalid-email');
expect(result.isValid).toBe(false);
expect(result.result.verdict).toBe('Invalid');
});
});
});
describe('Email Template Manager', () => {
it('should create welcome email template', () => {
const templateData = {
firstName: 'John',
companyName: 'Test Company',
};
const template = EmailTemplateManager.createTemplate(
EmailTemplateType.WELCOME,
templateData
);
expect(template.templateId).toBe('d-abc123def456');
expect(template.dynamicTemplateData.firstName).toBe('John');
expect(template.dynamicTemplateData.companyName).toBe('Test Company');
});
it('should validate template data', () => {
const validData = {
firstName: 'John',
companyName: 'Test Company',
};
const validation = EmailTemplateManager.validateTemplateData(
EmailTemplateType.WELCOME,
validData
);
expect(validation.isValid).toBe(true);
expect(validation.errors).toHaveLength(0);
});
it('should detect missing required fields', () => {
const invalidData = {
firstName: 'John',
// Missing companyName
};
const validation = EmailTemplateManager.validateTemplateData(
EmailTemplateType.WELCOME,
invalidData
);
expect(validation.isValid).toBe(false);
expect(validation.errors).toContain('Missing required field: companyName');
});
});
Implement comprehensive security measures:
// src/lib/security/rate-limiting.ts
interface RateLimitConfig {
windowMs: number;
maxRequests: number;
keyGenerator: (request: any) => string;
}
class RateLimiter {
private requests: Map<string, { count: number; resetTime: number }> = new Map();
constructor(private config: RateLimitConfig) {}
public async isAllowed(request: any): Promise<boolean> {
const key = this.config.keyGenerator(request);
const now = Date.now();
const windowStart = now - this.config.windowMs;
// Clean up old entries
this.cleanup(windowStart);
const current = this.requests.get(key);
if (!current || current.resetTime < now) {
this.requests.set(key, {
count: 1,
resetTime: now + this.config.windowMs,
});
return true;
}
if (current.count >= this.config.maxRequests) {
return false;
}
current.count++;
return true;
}
private cleanup(windowStart: number) {
for (const [key, data] of this.requests.entries()) {
if (data.resetTime < windowStart) {
this.requests.delete(key);
}
}
}
}
// Email-specific rate limiter
export const emailRateLimiter = new RateLimiter({
windowMs: 60 * 1000, // 1 minute
maxRequests: 5, // 5 emails per minute per IP
keyGenerator: (request) => {
// In a real application, you'd get the IP from the request
return request.ip || 'unknown';
},
});
// Input sanitization
export function sanitizeEmailInput(input: string): string {
return input
.trim()
.replace(/[<>]/g, '') // Remove potential HTML
.substring(0, 1000); // Limit length
}
// Email address validation with security checks
export function isSecureEmail(email: string): boolean {
// Basic email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) return false;
// Check for suspicious characters
const suspiciousChars = /[<>'"\\]/;
if (suspiciousChars.test(email)) return false;
// Check domain length (avoid extremely long domains)
const domain = email.split('@')[1];
if (domain.length > 253) return false;
return true;
}
Configure your application for production deployment:
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverActions: true,
},
env: {
CUSTOM_KEY: process.env.CUSTOM_KEY,
},
async headers() {
return [
{
source: '/api/webhooks/sendgrid',
headers: [
{
key: 'Access-Control-Allow-Origin',
value: 'https://sendgrid.com',
},
{
key: 'Access-Control-Allow-Methods',
value: 'POST',
},
{
key: 'Access-Control-Allow-Headers',
value: 'Content-Type, X-Twilio-Email-Event-Webhook-Signature, X-Twilio-Email-Event-Webhook-Timestamp',
},
],
},
];
},
// Enable compression for better performance
compress: true,
// Configure image optimization
images: {
domains: ['yourdomain.com'],
formats: ['image/webp', 'image/avif'],
},
};
module.exports = nextConfig;
# .env.production
SENDGRID_API_KEY=your_production_api_key
SENDGRID_FROM_EMAIL=noreply@yourdomain.com
SENDGRID_FROM_NAME=Your Production App
SENDGRID_WEBHOOK_SECRET=your_webhook_verification_key
# Application settings
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NODE_ENV=production
# Security settings
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=https://yourdomain.com
# Monitoring
SENTRY_DSN=your_sentry_dsn
As your application grows, optimizing email performance and ensuring scalability becomes crucial for maintaining good user experience and system reliability.
Implement a robust queuing system for handling high-volume email sending:
// src/lib/email/queue-manager.ts
interface EmailJob {
id: string;
email: TransactionalEmail;
priority: 'low' | 'normal' | 'high' | 'critical';
retryCount: number;
maxRetries: number;
scheduledAt?: Date;
createdAt: Date;
}
class EmailQueueManager {
private queue: EmailJob[] = [];
private processing = false;
private batchSize = 10;
private concurrency = 3;
/**
* Add email to queue
*/
public enqueue(
email: TransactionalEmail,
priority: EmailJob['priority'] = 'normal',
scheduledAt?: Date
): string {
const job: EmailJob = {
id: this.generateJobId(),
email,
priority,
retryCount: 0,
maxRetries: 3,
scheduledAt,
createdAt: new Date(),
};
this.queue.push(job);
this.sortQueue();
if (!this.processing) {
this.processQueue();
}
return job.id;
}
/**
* Process email queue
*/
private async processQueue(): Promise<void> {
if (this.processing || this.queue.length === 0) return;
this.processing = true;
try {
while (this.queue.length > 0) {
const batch = this.getNextBatch();
if (batch.length === 0) break;
await this.processBatch(batch);
await this.delay(100); // Brief delay between batches
}
} catch (error) {
console.error('Email queue processing error:', error);
} finally {
this.processing = false;
}
}
/**
* Get next batch of emails to process
*/
private getNextBatch(): EmailJob[] {
const now = new Date();
const readyJobs = this.queue.filter(job =>
!job.scheduledAt || job.scheduledAt <= now
);
return readyJobs.splice(0, this.batchSize);
}
/**
* Process a batch of emails concurrently
*/
private async processBatch(jobs: EmailJob[]): Promise<void> {
const chunks = this.chunkArray(jobs, this.concurrency);
for (const chunk of chunks) {
const promises = chunk.map(job => this.processJob(job));
await Promise.allSettled(promises);
}
}
/**
* Process individual email job
*/
private async processJob(job: EmailJob): Promise<void> {
try {
const result = await sendGridService.sendEmail(job.email);
if (!result.success) {
throw new Error(result.error || 'Email sending failed');
}
console.log(`Email sent successfully: ${job.id}`);
} catch (error: any) {
console.error(`Email job ${job.id} failed:`, error.message);
if (job.retryCount < job.maxRetries) {
job.retryCount++;
job.scheduledAt = new Date(Date.now() + (job.retryCount * 60000)); // Exponential backoff
this.queue.push(job);
this.sortQueue();
} else {
console.error(`Email job ${job.id} exhausted retries`);
// In production, you might want to move to a dead letter queue
}
}
}
/**
* Sort queue by priority and creation time
*/
private sortQueue(): void {
const priorityOrder = { critical: 0, high: 1, normal: 2, low: 3 };
this.queue.sort((a, b) => {
if (priorityOrder[a.priority] !== priorityOrder[b.priority]) {
return priorityOrder[a.priority] - priorityOrder[b.priority];
}
return a.createdAt.getTime() - b.createdAt.getTime();
});
}
/**
* Utility methods
*/
private generateJobId(): string {
return `email-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}
private chunkArray<T>(array: T[], size: number): T[][] {
const chunks: T[][] = [];
for (let i = 0; i < array.length; i += size) {
chunks.push(array.slice(i, i + size));
}
return chunks;
}
private delay(ms: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, ms));
}
/**
* Get queue status
*/
public getStatus() {
return {
queueLength: this.queue.length,
processing: this.processing,
};
}
}
export const emailQueueManager = new EmailQueueManager();
Implement caching strategies to improve performance:
// src/lib/email/cache-manager.ts
interface CacheItem<T> {
data: T;
expiresAt: number;
}
class EmailCacheManager {
private cache = new Map<string, CacheItem<any>>();
private defaultTtl = 300000; // 5 minutes
/**
* Cache email validation results
*/
public async getValidationResult(email: string): Promise<EmailValidationResult | null> {
const key = `validation:${email}`;
const cached = this.get<EmailValidationResult>(key);
if (cached) {
return cached;
}
const result = await sendGridService.validateEmail(email);
this.set(key, result, 3600000); // Cache for 1 hour
return result;
}
/**
* Cache email templates
*/
public cacheTemplate(templateId: string, compiledTemplate: string): void {
const key = `template:${templateId}`;
this.set(key, compiledTemplate, 1800000); // Cache for 30 minutes
}
public getCachedTemplate(templateId: string): string | null {
const key = `template:${templateId}`;
return this.get<string>(key);
}
/**
* Generic cache methods
*/
private set<T>(key: string, data: T, ttl: number = this.defaultTtl): void {
this.cache.set(key, {
data,
expiresAt: Date.now() + ttl,
});
}
private get<T>(key: string): T | null {
const item = this.cache.get(key);
if (!item) {
return null;
}
if (Date.now() > item.expiresAt) {
this.cache.delete(key);
return null;
}
return item.data;
}
/**
* Clean up expired items
*/
public cleanup(): void {
const now = Date.now();
for (const [key, item] of this.cache.entries()) {
if (now > item.expiresAt) {
this.cache.delete(key);
}
}
}
/**
* Clear all cache
*/
public clear(): void {
this.cache.clear();
}
/**
* Get cache statistics
*/
public getStats() {
return {
size: this.cache.size,
keys: Array.from(this.cache.keys()),
};
}
}
export const emailCacheManager = new EmailCacheManager();
// Auto-cleanup every 10 minutes
setInterval(() => {
emailCacheManager.cleanup();
}, 600000);
Email integration in 2025 demands a sophisticated approach that goes far beyond basic message sending. Modern applications require robust architecture, comprehensive error handling, advanced security measures, and scalable design patterns that can handle real-world complexity while maintaining excellent user experience.
Key Takeaways for Modern Email Integration:
At MTechZilla, our experience implementing email systems across travel platforms, renewable energy networks, and business applications has taught us that success comes from balancing technical excellence with business requirements. The most effective email systems are those that solve real problems while providing excellent developer experience and maintainable code.
Modern email integration continues to evolve with advances in AI-powered personalisation, improved deliverability algorithms, and more sophisticated automation capabilities. The architectural patterns and best practices we've covered provide a solid foundation that can adapt to these emerging technologies while maintaining reliability and performance.
The investment in proper email architecture pays dividends far beyond just sending messages. Well-designed email systems improve user engagement, support business objectives, and provide the flexibility needed to adapt to changing requirements and new opportunities.
Ready to Implement Production-Ready Email Solutions?
MTechZilla's expert development team has implemented sophisticated email systems for dozens of clients, from startup MVPs to enterprise-scale applications handling millions of messages. We bring deep expertise in Next.js, TypeScript, SendGrid integration, and modern development practices that ensure your email systems are secure, scalable, and maintainable.
Whether you're building your first email integration, optimizing existing systems, or architecting a comprehensive communication platform, we can help you implement solutions that exceed user expectations while supporting your business goals.
Take Action Today:
Contact MTechZilla at sales@mtechzilla.com to learn how we can help you master email integration for sustained application success in 2025 and beyond.
MTechZilla has been creating advanced web applications with sophisticated email integration since 2021. Our expertise in Next.js, TypeScript, SendGrid, and modern development practices has helped clients across travel, renewable energy, real estate, and other industries build email systems that drive user engagement and business growth.
Since 2021, we’ve been empowering startups and growing companies with impactful web, mobile, and desktop applications across diverse industries.
Tell us about the project
sales@mtechzilla.com
Partner with us
partnership@mtechzilla.com
Drop your resume at
jobs@mtechzilla.com
