How to Integrate Bolt.new with SendGrid

1// lib/sendgrid.ts
2import sgMail from '@sendgrid/mail';
3
4sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
5
6interface EmailOptions {
7  to: string | string[];
8  subject: string;
9  text: string;
10  html?: string;
11  templateId?: string;
12  dynamicTemplateData?: Record<string, unknown>;
13  replyTo?: string;
14}
15
16export async function sendEmail(options: EmailOptions): Promise<void> {
17  const fromEmail = process.env.SENDGRID_FROM_EMAIL;
18  if (!fromEmail) throw new Error('SENDGRID_FROM_EMAIL is not set');
19
20  const message: sgMail.MailDataRequired = {
21    to: options.to,
22    from: fromEmail,
23    subject: options.subject,
24    text: options.text,
25    ...(options.html && { html: options.html }),
26    ...(options.templateId && {
27      templateId: options.templateId,
28      dynamicTemplateData: options.dynamicTemplateData,
29    }),
30    ...(options.replyTo && { replyTo: options.replyTo }),
31  };
32
33  await sgMail.send(message);
34}
35
36export async function sendBulkEmail(
37  messages: EmailOptions[]
38): Promise<void> {
39  const fromEmail = process.env.SENDGRID_FROM_EMAIL!;
40  const prepared = messages.map(opts => ({
41    to: opts.to,
42    from: fromEmail,
43    subject: opts.subject,
44    text: opts.text,
45    ...(opts.html && { html: opts.html }),
46  })) as sgMail.MailDataRequired[];
47
48  await sgMail.sendMultiple(prepared);
49}

1// app/api/contact/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { sendEmail } from '@/lib/sendgrid';
4
5interface ContactFormBody {
6  name: string;
7  email: string;
8  message: string;
9  honeypot?: string;
10}
11
12const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
13
14export async function POST(request: NextRequest) {
15  const body: ContactFormBody = await request.json();
16  const { name, email, message, honeypot } = body;
17
18  // Honeypot check — bots fill hidden fields
19  if (honeypot) {
20    return NextResponse.json({ success: true }); // Silent accept to not alert bots
21  }
22
23  // Validation
24  if (!name?.trim() || name.trim().length < 2) {
25    return NextResponse.json({ error: 'Name is required' }, { status: 400 });
26  }
27  if (!email || !emailRegex.test(email)) {
28    return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
29  }
30  if (!message?.trim() || message.trim().length < 10) {
31    return NextResponse.json({ error: 'Message must be at least 10 characters' }, { status: 400 });
32  }
33
34  const notificationHtml = `
35    <h2>New Contact Form Submission</h2>
36    <p><strong>Name:</strong> ${name}</p>
37    <p><strong>Email:</strong> <a href="mailto:${email}">${email}</a></p>
38    <p><strong>Message:</strong></p>
39    <p>${message.replace(/\n/g, '<br>')}</p>
40  `;
41
42  const confirmationHtml = `
43    <h2>Thanks for reaching out, ${name}!</h2>
44    <p>We received your message and will get back to you within 1-2 business days.</p>
45    <p><em>Your message:</em><br>${message.replace(/\n/g, '<br>')}</p>
46  `;
47
48  try {
49    await sendEmail({
50      to: process.env.CONTACT_EMAIL_TO!,
51      subject: `New Contact Form Submission from ${name}`,
52      text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
53      html: notificationHtml,
54      replyTo: email,
55    });
56
57    await sendEmail({
58      to: email,
59      subject: 'We received your message',
60      text: `Thanks for reaching out, ${name}! We will get back to you within 1-2 business days.`,
61      html: confirmationHtml,
62    });
63
64    return NextResponse.json({ success: true });
65  } catch (error) {
66    console.error('SendGrid error:', error);
67    return NextResponse.json({ error: 'Failed to send message' }, { status: 500 });
68  }
69}

1// app/api/email/welcome/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { sendEmail } from '@/lib/sendgrid';
4
5export async function POST(request: NextRequest) {
6  const { email, name, plan = 'free' } = await request.json();
7
8  if (!email || !name) {
9    return NextResponse.json(
10      { error: 'email and name are required' },
11      { status: 400 }
12    );
13  }
14
15  const templateId = process.env.SENDGRID_WELCOME_TEMPLATE_ID;
16  if (!templateId) {
17    // Fallback to plain text if no template configured
18    await sendEmail({
19      to: email,
20      subject: `Welcome to the app, ${name}!`,
21      text: `Hi ${name}, welcome! Get started at ${process.env.NEXT_PUBLIC_APP_URL}`,
22      html: `<h1>Welcome, ${name}!</h1><p>Get started at <a href="${process.env.NEXT_PUBLIC_APP_URL}">the app</a>.</p>`,
23    });
24  } else {
25    await sendEmail({
26      to: email,
27      subject: `Welcome to the app, ${name}!`,
28      text: `Welcome ${name}! We are glad to have you.`,
29      templateId,
30      dynamicTemplateData: {
31        name,
32        plan,
33        getting_started_url: `${process.env.NEXT_PUBLIC_APP_URL}/onboarding`,
34        current_year: new Date().getFullYear(),
35      },
36    });
37  }
38
39  return NextResponse.json({ success: true });
40}

1// app/api/sendgrid/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface SendGridEvent {
5  email: string;
6  event: string;
7  timestamp: number;
8  sg_event_id: string;
9  sg_message_id?: string;
10  reason?: string;
11  status?: string;
12}
13
14export async function POST(request: NextRequest) {
15  const body = await request.text();
16
17  // Optional: verify SendGrid signature
18  const webhookKey = process.env.SENDGRID_WEBHOOK_KEY;
19  if (webhookKey) {
20    const signature = request.headers.get('X-Twilio-Email-Event-Webhook-Signature');
21    const timestamp = request.headers.get('X-Twilio-Email-Event-Webhook-Timestamp');
22    // In production, verify using @sendgrid/eventwebhook package
23    // For now, log a warning if signature is missing
24    if (!signature || !timestamp) {
25      console.warn('SendGrid webhook missing signature headers');
26    }
27  }
28
29  const events: SendGridEvent[] = JSON.parse(body);
30
31  for (const event of events) {
32    switch (event.event) {
33      case 'delivered':
34        console.log(`Email delivered to ${event.email}`);
35        break;
36      case 'bounce':
37        console.error(`Email bounced for ${event.email}: ${event.reason}`);
38        // TODO: Mark email as invalid in your database
39        break;
40      case 'spamreport':
41        console.warn(`Spam report from ${event.email}`);
42        // TODO: Unsubscribe this email address
43        break;
44      case 'unsubscribe':
45        console.log(`Unsubscribe from ${event.email}`);
46        // TODO: Update user preference in database
47        break;
48      case 'open':
49        console.log(`Email opened by ${event.email}`);
50        break;
51    }
52  }
53
54  // Always return 200 — SendGrid retries on non-200 responses
55  return NextResponse.json({ received: events.length });
56}