How to Integrate Twilio with V0

Start by prompting V0 to build the front-end component for your Twilio use case. The UI varies significantly depending on whether you are building SMS notifications, phone verification, or voice call triggers. For notifications, you need a phone number input and a send button. For verification, a two-step flow with a code entry UI is standard. For voice alerts, a simple trigger button with status feedback works well. The most important thing to specify in your V0 prompt is the API endpoint the component should call. For SMS: a form that POSTs to /api/twilio/send-sms with a phone number and message. For verification: two separate calls — POST /api/twilio/verify/send (triggers the OTP) and POST /api/twilio/verify/check (validates the entered code). For voice calls: POST /api/twilio/call with a message string. Phone number input handling deserves special attention in your V0 prompt. Twilio requires E.164 formatted phone numbers (like +12125551234) — country code with plus sign prefix, no dashes or spaces. However, users typically enter phone numbers in local format (like 212-555-1234). Ask V0 to include a country code dropdown and a phone number input that either formats to E.164 automatically or shows users the expected format clearly. You can handle the E.164 normalization in your API route, but preventing invalid submissions client-side improves the user experience. For the verification code UI specifically, ask V0 to generate individual digit input boxes that auto-advance to the next box on each keystroke and support paste events (so users can paste the full 6-digit code from their messages app). This pattern significantly improves conversion on mobile devices where users receive the code in their SMS and want to paste it directly.

Create the server-side Next.js API routes that use the Twilio Node.js SDK. The import pattern `import twilio from 'twilio'` only works in server-side code — API routes, Server Components, and server actions. If you or V0 accidentally place this import in a client component, the build will fail with module resolution errors because the Twilio SDK uses Node.js crypto and other built-ins unavailable in the browser. First, install the Twilio SDK by adding it to your package.json dependencies: `"twilio": "^5.0.0"`. Then create app/api/twilio/send-sms/route.ts for outbound SMS messaging using the Twilio Messages API. For phone verification, Twilio's Verify API is the recommended approach over the basic Messages API. The Verify service handles code generation, delivery, expiry (10 minutes by default), and validation in a single service. Create a Twilio Verify service in the Twilio Console first (Twilio Console → Verify → Services → Create Service). Copy the Service SID (starts with VA...). You will use this SID as a separate environment variable. The Verify flow has two steps that map to two API calls: POST to /api/twilio/verify/send calls `client.verify.v2.services(VERIFY_SID).verifications.create({ to: phoneNumber, channel: 'sms' })`, and POST to /api/twilio/verify/check calls `client.verify.v2.services(VERIFY_SID).verificationChecks.create({ to: phoneNumber, code: userEnteredCode })`. The check response includes a status field: 'approved' means the code is correct, 'pending' means the code is wrong or expired. For voice calls, `client.calls.create({ twiml: '<Response><Say>Your alert message</Say></Response>', to: phoneNumber, from: process.env.TWILIO_PHONE_NUMBER })` initiates an outbound call using Twilio Markup Language (TwiML) for the spoken content. The TwiML string is a minimal XML format — the `<Say>` verb converts text to speech using Twilio's text-to-speech engine.

1import twilio from 'twilio';
2import { NextRequest, NextResponse } from 'next/server';
3
4const client = twilio(
5  process.env.TWILIO_ACCOUNT_SID!,
6  process.env.TWILIO_AUTH_TOKEN!
7);
8
9// POST /api/twilio/send-sms
10export async function POST(request: NextRequest) {
11  try {
12    const { to, message } = await request.json();
13
14    if (!to || !message) {
15      return NextResponse.json(
16        { error: 'Phone number (to) and message are required' },
17        { status: 400 }
18      );
19    }
20
21    // Normalize to E.164 format if not already
22    const normalizedPhone = to.startsWith('+') ? to : `+1${to.replace(/\D/g, '')}`;
23
24    const smsMessage = await client.messages.create({
25      body: message,
26      from: process.env.TWILIO_PHONE_NUMBER!,
27      to: normalizedPhone,
28    });
29
30    return NextResponse.json({
31      messageId: smsMessage.sid,
32      status: smsMessage.status,
33    });
34  } catch (error) {
35    const twilioError = error as { code?: number; message?: string };
36    console.error('Twilio SMS error:', twilioError);
37
38    // Handle specific Twilio error codes
39    if (twilioError.code === 21211) {
40      return NextResponse.json(
41        { error: 'Invalid phone number format. Use E.164 format (+12125551234)' },
42        { status: 400 }
43      );
44    }
45    if (twilioError.code === 21608) {
46      return NextResponse.json(
47        { error: 'Phone number is not verified in Twilio trial mode' },
48        { status: 400 }
49      );
50    }
51
52    return NextResponse.json(
53      { error: 'Failed to send SMS' },
54      { status: 500 }
55    );
56  }
57}

Your API routes need four Twilio credentials: Account SID, Auth Token, a Twilio phone number, and (for Verify) a Verify Service SID. All four must be configured as server-side environment variables in Vercel with no NEXT_PUBLIC_ prefix. Go to Vercel Dashboard → your project → Settings → Environment Variables and add: TWILIO_ACCOUNT_SID: Found at Twilio Console → Account → Account Info. Format: ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (starts with AC). This is technically public (visible in error messages) but treat it as sensitive. TWILIO_AUTH_TOKEN: Found alongside the Account SID on the same Twilio Console page. This is genuinely sensitive — someone with your Account SID and Auth Token can make API calls that bill your account. Never use NEXT_PUBLIC_ here. TWILIO_PHONE_NUMBER: The phone number you purchased from Twilio Console → Phone Numbers, in E.164 format (+12125550100). This is the 'from' number for outbound SMS and calls. TWILIO_VERIFY_SID: If using Twilio Verify for OTP verification, add the Verify Service SID from Twilio Console → Verify → Services. Format: VAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (starts with VA). Set all variables for Production, Preview, and Development environments. After saving, redeploy your project. For local development, add the same variables to a .env.local file in your project root — V0-generated projects include .env.local in the default .gitignore. A critical security note: Twilio Auth Tokens can be rolled (regenerated) in the Twilio Console if you suspect exposure. Rolling the token immediately invalidates all requests using the old token. Keep your Vercel environment variables updated after any token rotation.

1# .env.local — local development only
2TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
3TWILIO_AUTH_TOKEN=your_auth_token_here
4TWILIO_PHONE_NUMBER=+12125550100
5TWILIO_VERIFY_SID=VAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Create the complete Twilio Verify API route pair for phone number verification, then test the full flow from your V0-generated UI to Twilio and back. Create app/api/twilio/verify/send/route.ts for sending the OTP code and app/api/twilio/verify/check/route.ts for validating the code the user enters. The two-route pattern maps cleanly to the two-step UI V0 generated in step 1. For the send route: call `client.verify.v2.services(VERIFY_SID).verifications.create({ to: normalizedPhone, channel: 'sms' })`. This returns a verification object — you do not need to store the code yourself, Twilio manages it. Return a success indicator to the client so the UI can advance to step 2. For the check route: call `client.verify.v2.services(VERIFY_SID).verificationChecks.create({ to: normalizedPhone, code: enteredCode })`. Check the response's status field: 'approved' means the code is correct and the verification succeeds, 'pending' means the code is wrong or expired. Return `{ verified: status === 'approved' }` to the client. To test: deploy your app to Vercel (or run locally with npm run dev), enter your own phone number in the verification UI, click Send Code, wait for the SMS (usually arrives in under 5 seconds), enter the 6-digit code, and click Verify. Check the Twilio Console → Verify → Logs to see the verification attempts and their outcomes. If you are on a Twilio trial account, you can only send verification codes to phone numbers listed in your Twilio Console's verified caller IDs. Add your own mobile number to the verified numbers list in Twilio Console → Phone Numbers → Verified Caller IDs for testing. Upgrade to a paid account for production use with unverified phone numbers.

1import twilio from 'twilio';
2import { NextRequest, NextResponse } from 'next/server';
3
4const client = twilio(
5  process.env.TWILIO_ACCOUNT_SID!,
6  process.env.TWILIO_AUTH_TOKEN!
7);
8
9export async function POST(request: NextRequest) {
10  try {
11    const { phone, code } = await request.json();
12
13    if (!phone || !code) {
14      return NextResponse.json(
15        { error: 'Phone number and verification code are required' },
16        { status: 400 }
17      );
18    }
19
20    const normalizedPhone = phone.startsWith('+') ? phone : `+1${phone.replace(/\D/g, '')}`;
21
22    const verificationCheck = await client.verify.v2
23      .services(process.env.TWILIO_VERIFY_SID!)
24      .verificationChecks.create({
25        to: normalizedPhone,
26        code: code.toString(),
27      });
28
29    if (verificationCheck.status === 'approved') {
30      return NextResponse.json({ verified: true });
31    }
32
33    return NextResponse.json({
34      verified: false,
35      error: 'Invalid or expired verification code',
36    });
37  } catch (error) {
38    console.error('Twilio verify check error:', error);
39    return NextResponse.json(
40      { error: 'Verification check failed' },
41      { status: 500 }
42    );
43  }
44}