How to Integrate Sendinblue (Brevo) with V0

Open V0 and describe the email capture or contact form you need. Brevo works with any form that collects an email address — contact forms, newsletter signups, waitlist pages, or trigger buttons for transactional emails. The key is to design the component so it handles form state, loading, success, and error states cleanly. When prompting V0, specify that the form should POST to a specific API route path (e.g., /api/contact or /api/subscribe). Ask V0 to include a loading spinner during submission and a success message after. This is important because Brevo API calls are asynchronous and take a moment to complete. Also ask V0 to handle the case where the API returns an error — a visible error message prevents silent failures from confusing users. In Design Mode, adjust the visual style to match your brand. Then inspect the Code panel to see how V0 wired up the form's onSubmit handler — you'll later connect this to your Brevo API route. Look at the fetch call V0 generated: it should POST the form data as JSON to your API endpoint. If V0 generated a form without an API call, use the chat to add 'Make the form submit to /api/contact via a POST fetch request with the form data as JSON'.

The official Brevo Node.js SDK is @getbrevo/brevo (not the older sib-api-v3-sdk). Install it by adding it to your package.json. Then create your Next.js API route at app/api/contact/route.ts (or app/api/subscribe/route.ts — match whatever path you used in your V0 component). The App Router API route exports an async POST function that reads the request body, initializes the Brevo API client with your secret key, and calls the appropriate Brevo API method. For sending a transactional email, use the TransactionalEmailsApi class and its sendTransacEmail method. For adding a contact to a list, use the ContactsApi class and its createContact method. The Brevo SDK uses a configuration object where you set the API key via setApiKey. One important pattern: always validate the incoming request body before calling Brevo. Check that the email field is present and is a valid email format. Return a 400 error if validation fails rather than sending malformed data to Brevo. Also wrap the Brevo SDK call in a try/catch block to handle API errors gracefully — Brevo returns specific error messages for things like invalid email addresses, blocked contacts, or rate limits, and surfacing these to your frontend helps with debugging.

1import { NextRequest, NextResponse } from 'next/server';
2import * as Brevo from '@getbrevo/brevo';
3
4export async function POST(req: NextRequest) {
5  try {
6    const { firstName, email, message } = await req.json();
7
8    if (!email || !email.includes('@')) {
9      return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
10    }
11
12    const transactionalEmailsApi = new Brevo.TransactionalEmailsApi();
13    transactionalEmailsApi.setApiKey(
14      Brevo.TransactionalEmailsApiApiKeys.apiKey,
15      process.env.BREVO_API_KEY!
16    );
17
18    const sendSmtpEmail = new Brevo.SendSmtpEmail();
19    sendSmtpEmail.subject = `New Contact: ${firstName || 'Anonymous'}`;
20    sendSmtpEmail.htmlContent = `
21      <h2>New contact form submission</h2>
22      <p><strong>Name:</strong> ${firstName}</p>
23      <p><strong>Email:</strong> ${email}</p>
24      <p><strong>Message:</strong> ${message}</p>
25    `;
26    sendSmtpEmail.sender = { name: 'Contact Form', email: process.env.SENDER_EMAIL! };
27    sendSmtpEmail.to = [{ email: process.env.CONTACT_EMAIL!, name: 'Site Owner' }];
28    sendSmtpEmail.replyTo = { email, name: firstName };
29
30    await transactionalEmailsApi.sendTransacEmail(sendSmtpEmail);
31
32    return NextResponse.json({ success: true });
33  } catch (error: unknown) {
34    const message = error instanceof Error ? error.message : 'Failed to send email';
35    console.error('Brevo error:', error);
36    return NextResponse.json({ error: message }, { status: 500 });
37  }
38}

If you want to also add the contact to a Brevo list for follow-up marketing emails or newsletters, extend your API route to call ContactsApi.createContact after sending the transactional email. This is where Brevo's dual transactional-and-marketing capability shines — in one API call you send the confirmation email AND add the person to your CRM. To find your Brevo list IDs, go to Brevo Dashboard → Contacts → Lists — each list shows its numeric ID in the URL (e.g., contacts.brevo.com/lists/5 means list ID 5). The createContact method accepts an email, optional attributes (any custom fields you've defined in Brevo like FIRSTNAME, SOURCE, SIGNUP_DATE), and a listIds array. Set updateEnabled to true so re-subscriptions update the existing contact rather than returning a duplicate error. Brevo's double opt-in feature (also called confirmed opt-in or COI) can be enabled per list — if enabled, Brevo automatically sends a confirmation email and only adds the contact after they click the confirmation link. You don't need to handle this in code; Brevo manages the confirmation flow. One thing to watch: Brevo may return a 4xx error if the contact already exists and updateEnabled is false. Always set updateEnabled: true for signup forms to handle repeat submissions gracefully.

1import * as Brevo from '@getbrevo/brevo';
2
3// Add to your existing route handler after the email send:
4async function addToBrevoList(email: string, firstName: string) {
5  const contactsApi = new Brevo.ContactsApi();
6  contactsApi.setApiKey(
7    Brevo.ContactsApiApiKeys.apiKey,
8    process.env.BREVO_API_KEY!
9  );
10
11  const createContact = new Brevo.CreateContact();
12  createContact.email = email;
13  createContact.attributes = {
14    FIRSTNAME: firstName,
15    SOURCE: 'contact-form',
16  };
17  createContact.listIds = [parseInt(process.env.BREVO_LIST_ID || '0')];
18  createContact.updateEnabled = true;
19
20  await contactsApi.createContact(createContact);
21}

Brevo requires two required environment variables and two optional ones. The required ones are BREVO_API_KEY (your secret key from Brevo Dashboard → Account → SMTP & API → API Keys — starts with 'xkeysib-') and SENDER_EMAIL (a verified sender address — you must verify this in Brevo under Senders & IP → Senders before emails will send). The optional ones are CONTACT_EMAIL (where you want to receive contact form notifications — can be the same as SENDER_EMAIL or different) and BREVO_LIST_ID (the numeric ID of the list you want subscribers added to). To add variables in Vercel, open your project in the Vercel Dashboard, go to Settings → Environment Variables, and add each key. Make sure to add them to both the Production and Preview environments. The BREVO_API_KEY must not have a NEXT_PUBLIC_ prefix — it is server-only and should never reach the browser. After adding variables, you need to trigger a redeployment for them to take effect. The easiest way is to push a small code change or click Redeploy in Vercel Dashboard → Deployments → the latest deployment → Redeploy. To test locally, add the same variables to your .env.local file (never commit this file). After the deployment succeeds, submit your contact form and check your inbox — emails can take up to 2 minutes to arrive on Brevo's free tier. Check the Brevo Dashboard → Transactional → Email Logs to confirm the API received and sent the request, even if your inbox hasn't received it yet.

1# .env.local — never commit this file to git
2# Brevo (Sendinblue) API credentials
3BREVO_API_KEY=xkeysib-your-actual-api-key-here
4
5# Verified sender email (must be verified in Brevo Dashboard → Senders)
6SENDER_EMAIL=hello@yourdomain.com
7
8# Where to receive contact form notifications
9CONTACT_EMAIL=you@yourdomain.com
10
11# Optional: Brevo list ID for newsletter subscriptions (find in Brevo → Contacts → Lists URL)
12BREVO_LIST_ID=5

Once your basic email API route is working, level it up by using Brevo email templates instead of inline HTML. Templates are designed in Brevo's drag-and-drop editor and called by template ID from your API route — this separates email design from your code, letting non-developers update email content without touching the Next.js app. To use a template: go to Brevo Dashboard → Email → Templates → Create a template. Design your email in the template editor and add dynamic variables using double curly braces: {{ params.FIRSTNAME }}, {{ params.ORDER_TOTAL }}, etc. Save and activate the template, then copy its numeric ID from the templates list. In your API route, replace the htmlContent field with templateId and params. The params object maps to the {{ params.* }} variables in your template. This pattern is especially powerful for order confirmations, welcome sequences, and password resets — the template controls the design while your Next.js code only sends the data. After deploying, test the full flow from the live URL on Vercel. For complex automation workflows like multi-step onboarding sequences or re-engagement campaigns, RapidDev can help you structure the Brevo API integration alongside your V0 app's backend logic.

1// Using a Brevo template instead of inline HTML
2const sendSmtpEmail = new Brevo.SendSmtpEmail();
3sendSmtpEmail.to = [{ email: process.env.CONTACT_EMAIL!, name: 'Site Owner' }];
4sendSmtpEmail.sender = { name: 'My App', email: process.env.SENDER_EMAIL! };
5sendSmtpEmail.templateId = parseInt(process.env.BREVO_TEMPLATE_ID || '0');
6sendSmtpEmail.params = {
7  FIRSTNAME: firstName,
8  MESSAGE: message,
9  REPLY_EMAIL: email,
10  SUBMISSION_DATE: new Date().toLocaleDateString('en-US'),
11};
12
13await transactionalEmailsApi.sendTransacEmail(sendSmtpEmail);