How to Integrate SendGrid with V0

Start by prompting V0 to create the interface that will trigger email sending. This could be a contact form, a newsletter signup widget, a 'Forgot Password' form, or a post-purchase confirmation screen. V0 excels at generating clean, well-styled forms with Tailwind CSS, and it will wire up the fetch POST request to your API route when you specify the endpoint. The critical details to include in your V0 prompt are: the form fields you need, the API endpoint to POST to (/api/sendgrid/contact or similar), the loading state while the request is in progress, the success state shown after a successful email send, and the error state shown when the API call fails. For a contact form, typical fields are name, email address, subject (optional), and message. For a newsletter signup, just an email field is common. For a password reset flow, just the email address. Make the V0 UI specific enough to be realistic — include character limits on message fields, email validation patterns, and a clear call to action button label. V0 generates React components with controlled inputs and fetch-based form submission. Review the generated fetch call to ensure it is posting to the correct endpoint and including all the fields your API route will need. The request body should be JSON with the email address and any other dynamic content you want to include in the email.

Create the server-side API route that receives form data and sends email via SendGrid. The file goes at app/api/sendgrid/route.ts (or a more specific path like app/api/sendgrid/contact/route.ts if you have multiple email types). The @sendgrid/mail package is the official SendGrid Node.js SDK for sending email. Install it by adding @sendgrid/mail to your package.json dependencies. The SDK has a simple interface: call sgMail.setApiKey() with your API key, then call sgMail.send() with a message object containing to, from, subject, text, and html fields. The from address must match a verified sender identity in your SendGrid account — either a single verified sender email or an email at your authenticated domain. If the from address is not verified, SendGrid will reject the send request with a 403 error. For the to address, this is typically dynamic — either passed from the form (to notify the user) or hardcoded as your own email (to notify yourself of form submissions). A common pattern for contact forms is to send two emails: one to yourself with the form contents, and one to the user confirming receipt. The @sendgrid/mail package accepts an array of messages or a single message with multiple recipients. Handle errors explicitly and return meaningful HTTP status codes. If the user provides an invalid email format, return 400. If SendGrid rejects the request (wrong API key, unverified sender, etc.), catch the error, log it, and return 500. A caught error from the @sendgrid/mail SDK includes a response object with the HTTP status and body from SendGrid's API.

1import sgMail from '@sendgrid/mail';
2import { NextRequest, NextResponse } from 'next/server';
3
4sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
5
6export async function POST(request: NextRequest) {
7  try {
8    const { name, email, subject, message } = await request.json();
9
10    if (!name || !email || !message) {
11      return NextResponse.json(
12        { error: 'name, email, and message are required' },
13        { status: 400 }
14      );
15    }
16
17    // Email to site owner with form contents
18    const ownerEmail = {
19      to: process.env.SENDGRID_TO_EMAIL!,
20      from: process.env.SENDGRID_FROM_EMAIL!,
21      subject: `New contact form: ${subject || 'No subject'}`,
22      html: `
23        <h2>New Contact Form Submission</h2>
24        <p><strong>From:</strong> ${name} (${email})</p>
25        <p><strong>Subject:</strong> ${subject || 'None'}</p>
26        <hr />
27        <p><strong>Message:</strong></p>
28        <p>${message.replace(/\n/g, '<br />')}</p>
29      `,
30      text: `From: ${name} (${email})\nSubject: ${subject || 'None'}\n\n${message}`,
31    };
32
33    // Confirmation email to the person who submitted the form
34    const confirmationEmail = {
35      to: email,
36      from: process.env.SENDGRID_FROM_EMAIL!,
37      subject: `We received your message, ${name}!`,
38      html: `
39        <h2>Thanks for reaching out, ${name}!</h2>
40        <p>We received your message and will get back to you within 24 hours.</p>
41        <p>Here's a copy of what you sent:</p>
42        <blockquote style="border-left: 3px solid #ccc; padding-left: 16px; color: #555;">
43          ${message.replace(/\n/g, '<br />')}
44        </blockquote>
45      `,
46      text: `Thanks for reaching out, ${name}! We received your message: ${message}`,
47    };
48
49    await sgMail.send([ownerEmail, confirmationEmail]);
50
51    return NextResponse.json({ success: true });
52  } catch (error: any) {
53    console.error('SendGrid error:', error?.response?.body || error);
54    return NextResponse.json(
55      { error: 'Failed to send email' },
56      { status: 500 }
57    );
58  }
59}

Your API route reads three environment variables: SENDGRID_API_KEY, SENDGRID_FROM_EMAIL, and SENDGRID_TO_EMAIL. Add all three to Vercel before deploying. Open your Vercel Dashboard, select your project, click the Settings tab, then Environment Variables in the sidebar. Add: SENDGRID_API_KEY: Your SendGrid API key from SendGrid Dashboard → Settings → API Keys. The key starts with SG. — make sure to copy the full key including that prefix. Do not add NEXT_PUBLIC_ — this key is server-only. If you lose the key, you cannot view it again in SendGrid; you must generate a new one. SENDGRID_FROM_EMAIL: The email address your emails will appear to come from. This must be a verified sender in SendGrid — either added as a Single Sender (SendGrid Dashboard → Settings → Sender Authentication → Single Sender Verification) or from a domain you have authenticated (recommended for production). If the from address is not verified, every send will fail with a 403 Forbidden error. SENDGRID_TO_EMAIL: Your notification email address — where you want to receive contact form submissions and other notifications. This is typically your business email. After adding all variables, click Save and trigger a new Vercel deployment by pushing a commit to GitHub. Environment variables in Vercel only take effect after redeployment — existing deployments continue using their old variable values.

For professional applications, hard-coding HTML in your API route works but is fragile. SendGrid's Dynamic Templates let you design beautiful, responsive email templates using a drag-and-drop editor in the SendGrid Dashboard, then use them from your API route by passing a template ID and data variables. In SendGrid Dashboard, go to Email API → Dynamic Templates and click Create Template. Name your template (e.g., 'Contact Form Confirmation') and click Create. Then click Add Version, choose a design (blank or use a template), and build your email layout in the visual editor. Use Handlebars syntax for dynamic variables: {{name}}, {{message}}, {{subject}}. Preview the template with sample data to see how it renders. Once your template is created, copy the Template ID (it looks like d-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX). Update your API route to use sgMail.send() with templateId and dynamicTemplateData instead of inline HTML. The dynamicTemplateData object maps template variables to their values. Dynamic Templates are version-controlled in SendGrid — you can update the design without changing your code. This is useful when non-technical team members need to update email copy or styling. They can edit the template in SendGrid's visual editor, and the updated design goes live immediately for the next send without any code deployment needed.

1// Using a SendGrid Dynamic Template instead of inline HTML
2import sgMail from '@sendgrid/mail';
3import { NextRequest, NextResponse } from 'next/server';
4
5sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
6
7export async function POST(request: NextRequest) {
8  try {
9    const { name, email, subject, message } = await request.json();
10
11    const msg = {
12      to: email,
13      from: process.env.SENDGRID_FROM_EMAIL!,
14      templateId: process.env.SENDGRID_TEMPLATE_ID!, // d-XXXXXXXXXXXXXXXX
15      dynamicTemplateData: {
16        name,
17        email,
18        subject: subject || 'Your inquiry',
19        message,
20        current_year: new Date().getFullYear(),
21      },
22    };
23
24    await sgMail.send(msg);
25    return NextResponse.json({ success: true });
26  } catch (error: any) {
27    console.error('SendGrid template error:', error?.response?.body || error);
28    return NextResponse.json({ error: 'Email send failed' }, { status: 500 });
29  }
30}

Before going live, test the complete email flow end to end. With your environment variables set and your Vercel deployment running, open your V0-generated contact form, fill in the fields, and submit. The email should arrive in your inbox within a few seconds. If the email does not arrive, check three places. First, Vercel function logs: Vercel Dashboard → your project → Functions → View Logs. Look for console.error() output from the catch block in your API route — it includes SendGrid's error response. Second, the SendGrid Activity Feed: SendGrid Dashboard → Activity Feed shows every attempted send with delivery status, click events, and error codes. Third, your spam folder — unverified sender domains often land in spam until domain authentication is configured. Common issues at this stage: 403 Forbidden means the from address is not a verified sender. 401 Unauthorized means the API key is invalid or missing. 400 Bad Request usually means a malformed message object (missing required fields, invalid email format). For ongoing monitoring in production, SendGrid's Dashboard provides delivery rate, bounce rate, spam report rate, and open rate metrics. Set up Email Notifications in SendGrid settings to alert you if delivery rates drop below a threshold — this is a sign that your emails are being filtered as spam, which usually requires domain authentication to fix. SendGrid also offers Inbound Parse (webhook for receiving emails) if you want to build two-way email workflows.