How to Integrate Mailgun with V0

Log in to your Mailgun dashboard at app.mailgun.com. Navigate to Settings in the left sidebar, then click API Keys. You will see your Private API key — click the eye icon to reveal it and copy it. This is your MAILGUN_API_KEY. Keep it secure and never commit it to source code or paste it in your V0 chat. Next, find your sending domain. If you are just testing, Mailgun provides a sandbox domain automatically — look in the left sidebar under Sending → Domains and note the sandbox domain name, which looks like sandbox-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.mailgun.org. For production use, you will add your own domain here and Mailgun will give you DNS records to add to your domain registrar. Note that Mailgun's sandbox domain can only send to email addresses you have verified in the sandbox — go to Sending → Domains → click your sandbox domain → Authorized Recipients and add your own email address there so you can receive test emails. Also note which Mailgun API region you are using — Mailgun has a US region (api.mailgun.net) and an EU region (api.eu.mailgun.net). Your dashboard URL will tell you which region your account is on. This affects the API endpoint URL you use in your API route.

Open V0 and describe the email trigger interface you need. For a contact form, describe the fields, validation behavior, loading states, and success/error feedback. V0 is excellent at generating well-structured React forms with Tailwind styling. Be specific about what happens after submission — ask for a loading spinner on the submit button, a success message that replaces the form, and an error message display area. Include client-side validation in your prompt so users see helpful feedback before the form even submits. After V0 generates the component, review the form structure. The component should use React state for the form fields and a handleSubmit async function that calls fetch('/api/mailgun/contact', {...}) with the form data in the request body. V0 may generate a fetch call with a placeholder URL — you will update this to match your actual API route path. The important thing at this stage is to get the UI working correctly — you will add the API route connection in the next step. If V0 generates a form with a basic fetch call structure, that is exactly what you need.

Create the Next.js API route that sends emails via Mailgun. You have two options: use the mailgun.js npm package for a JavaScript SDK experience, or call the Mailgun REST API directly using fetch with form-encoded data. Both work well in Next.js. The direct fetch approach requires no extra dependencies, which is ideal for keeping your deployment lightweight. Mailgun's API uses HTTP Basic authentication with 'api' as the username and your API key as the password, encoded in Base64. The request body uses application/x-www-form-urlencoded format with from, to, subject, and text or html fields. The API endpoint is https://api.mailgun.net/v3/{your-domain}/messages for US region accounts. For EU region accounts, use https://api.eu.mailgun.net/v3/{your-domain}/messages. Validate all incoming request data in the API route before calling Mailgun — check that the email address format is valid, that the message is not empty, and that required fields are present. Return appropriate error responses so your frontend can display meaningful error messages. The route should also implement basic rate limiting or at minimum validate the request body shape to prevent abuse. For HTML emails, pass an html field instead of or in addition to the text field.

1import { NextRequest, NextResponse } from 'next/server';
2
3const MAILGUN_API_KEY = process.env.MAILGUN_API_KEY;
4const MAILGUN_DOMAIN = process.env.MAILGUN_DOMAIN;
5const MAILGUN_API_URL = process.env.MAILGUN_REGION === 'eu'
6  ? `https://api.eu.mailgun.net/v3/${MAILGUN_DOMAIN}/messages`
7  : `https://api.mailgun.net/v3/${MAILGUN_DOMAIN}/messages`;
8
9function isValidEmail(email: string): boolean {
10  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
11}
12
13export async function POST(request: NextRequest) {
14  if (!MAILGUN_API_KEY || !MAILGUN_DOMAIN) {
15    return NextResponse.json(
16      { error: 'Email service not configured' },
17      { status: 500 }
18    );
19  }
20
21  try {
22    const body = await request.json();
23    const { name, email, message } = body;
24
25    if (!name || !email || !message) {
26      return NextResponse.json(
27        { error: 'Name, email, and message are required' },
28        { status: 400 }
29      );
30    }
31
32    if (!isValidEmail(email)) {
33      return NextResponse.json(
34        { error: 'Invalid email address' },
35        { status: 400 }
36      );
37    }
38
39    const formData = new URLSearchParams({
40      from: `${name} via Contact Form <${process.env.MAILGUN_FROM_EMAIL || `noreply@${MAILGUN_DOMAIN}`}>`,
41      to: process.env.CONTACT_EMAIL_TO || '',
42      'h:Reply-To': email,
43      subject: `New Contact Form Submission from ${name}`,
44      text: `Name: ${name}\nEmail: ${email}\n\nMessage:\n${message}`,
45      html: `
46        <h2>New Contact Form Submission</h2>
47        <p><strong>Name:</strong> ${name}</p>
48        <p><strong>Email:</strong> <a href="mailto:${email}">${email}</a></p>
49        <h3>Message:</h3>
50        <p style="white-space: pre-wrap;">${message}</p>
51      `,
52    });
53
54    const credentials = Buffer.from(`api:${MAILGUN_API_KEY}`).toString('base64');
55
56    const res = await fetch(MAILGUN_API_URL, {
57      method: 'POST',
58      headers: {
59        Authorization: `Basic ${credentials}`,
60        'Content-Type': 'application/x-www-form-urlencoded',
61      },
62      body: formData.toString(),
63    });
64
65    const data = await res.json();
66
67    if (!res.ok) {
68      console.error('Mailgun error:', data);
69      return NextResponse.json(
70        { error: 'Failed to send email. Please try again.' },
71        { status: 500 }
72      );
73    }
74
75    return NextResponse.json({ success: true, id: data.id });
76  } catch (error) {
77    console.error('Email send error:', error);
78    return NextResponse.json(
79      { error: 'An unexpected error occurred' },
80      { status: 500 }
81    );
82  }
83}

Now add your Mailgun credentials to Vercel so they are available in your deployed application. Open your Vercel project dashboard, click Settings in the top navigation, then Environment Variables in the left sidebar. Add the following server-only environment variables (no NEXT_PUBLIC_ prefix for any of these, as they must never be exposed to the browser): MAILGUN_API_KEY set to your Private API key from Mailgun, MAILGUN_DOMAIN set to your Mailgun sending domain (sandbox domain for testing, or your verified custom domain for production), MAILGUN_FROM_EMAIL set to a from address that uses your Mailgun domain such as noreply@yourdomain.com or hello@sandbox-xxxx.mailgun.org for sandbox, CONTACT_EMAIL_TO set to the email address where you want to receive contact form submissions, and optionally MAILGUN_REGION set to eu if your Mailgun account is on the EU region (leave this out for US region accounts). Set all of these for Production, Preview, and Development environments. After adding the variables, either create a .env.local file in your project root for local development testing, or redeploy from the Deployments tab to apply the new variables to your live deployment. Test the contact form by submitting it and checking your inbox. If the email does not arrive, check the Mailgun dashboard under Sending → Logs to see if the send was attempted and whether Mailgun reports any delivery issues.

1# .env.local (for local development — never commit this file)
2MAILGUN_API_KEY=your-private-api-key-here
3MAILGUN_DOMAIN=sandbox-xxxx.mailgun.org
4MAILGUN_FROM_EMAIL=noreply@sandbox-xxxx.mailgun.org
5CONTACT_EMAIL_TO=your-email@example.com
6# MAILGUN_REGION=eu  # Uncomment if your account is on EU region

The Mailgun sandbox domain is fine for development and testing, but for production use you should configure a custom sending domain. This gives your emails a professional from address (notifications@yourcompany.com), improves deliverability because the domain matches your brand, and avoids the sandbox's restriction on recipient email addresses. In your Mailgun dashboard, go to Sending → Domains and click Add New Domain. Enter a subdomain of your main domain, for example mail.yourcompany.com or mg.yourcompany.com — using a subdomain rather than your root domain is best practice because it keeps email sending reputation separate from your website's domain reputation. Mailgun will provide you with several DNS records to add: two TXT records (one for SPF, one for DKIM), and optionally a CNAME record for tracking. Log in to your domain registrar (GoDaddy, Namecheap, Cloudflare, etc.) and add these DNS records exactly as Mailgun specifies. DNS propagation typically takes 24-48 hours, though it often completes faster. Return to the Mailgun dashboard and click Verify DNS Settings — once all records show green checkmarks, your domain is verified. Update your MAILGUN_DOMAIN and MAILGUN_FROM_EMAIL environment variables in Vercel to use the new verified domain. For complex multi-domain or high-volume email setups, RapidDev's team can help configure Mailgun's dedicated IP pools and domain reputation management.

1// Example DNS records Mailgun will ask you to add
2// (actual values will be unique to your domain and Mailgun account)
3
4// TXT record (SPF):
5// Host: mg.yourdomain.com
6// Value: v=spf1 include:mailgun.org ~all
7
8// TXT record (DKIM):
9// Host: pic._domainkey.mg.yourdomain.com
10// Value: k=rsa; p=MIGfMA0GCSqGS... (long key provided by Mailgun)
11
12// CNAME record (tracking - optional):
13// Host: email.mg.yourdomain.com
14// Value: mailgun.org