How to Integrate Nexmo (Vonage) API with V0

Open V0 at v0.dev and describe the communication interface you need — phone verification, SMS notification panel, or a 2FA login flow. The UI complexity varies by use case: a phone verification widget is a self-contained form with a phone input and OTP entry, while an SMS broadcast panel is a more complex admin interface with recipient management and delivery tracking. For phone verification specifically, describe the multi-step flow: first screen collects the phone number and triggers the code send (POST to /api/vonage/verify/start), second screen shows the OTP entry fields and validates the code (POST to /api/vonage/verify/check). V0 handles multi-step forms well when you describe the state transitions — it generates the conditional rendering between form steps, the loading states during API calls, and the success/error states for each step. Country code selectors for international phone numbers are available as shadcn/ui components that V0 knows about — ask for one if your app serves international users. After generating, push the UI to GitHub using V0's Git panel. Before writing the API routes, install the Vonage SDK in your project: run npm install @vonage/server-sdk in your terminal from the project root.

Create the Next.js API routes for SMS sending and phone verification. The @vonage/server-sdk is initialized with your API key and secret, then provides clean methods for each Vonage product. For the SMS API, create a POST route at app/api/vonage/sms/send/route.ts that uses vonage.sms.send() with the recipient number, sender name or number, and message text. Phone numbers must be in E.164 format (international format starting with country code, no plus sign for the Vonage SDK — e.g., 14155552671 for a US number). For phone verification, create two routes: app/api/vonage/verify/start/route.ts that calls vonage.verify.start() with the phone number and brand name, and app/api/vonage/verify/check/route.ts that calls vonage.verify.check() with the request ID from the start response and the user-entered OTP code. The verify flow works by storing the requestId from the start response — pass it back to the frontend so the check route can use it. The frontend should store the requestId in component state between the two steps. Vonage Verify v2 (the current version) uses a different API path than v1 — check the @vonage/server-sdk documentation version to confirm which verify API you are using.

1// app/api/vonage/sms/send/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { Vonage } from '@vonage/server-sdk';
4
5const vonage = new Vonage({
6  apiKey: process.env.VONAGE_API_KEY!,
7  apiSecret: process.env.VONAGE_API_SECRET!,
8});
9
10interface SendSMSRequest {
11  to: string; // E.164 format without +, e.g. '14155552671'
12  message: string;
13  from?: string; // Sender ID or number
14}
15
16export async function POST(request: NextRequest) {
17  if (!process.env.VONAGE_API_KEY || !process.env.VONAGE_API_SECRET) {
18    return NextResponse.json(
19      { error: 'Vonage is not configured' },
20      { status: 500 }
21    );
22  }
23
24  let body: SendSMSRequest;
25  try {
26    body = await request.json();
27  } catch {
28    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
29  }
30
31  const { to, message, from = process.env.VONAGE_FROM_NUMBER ?? 'YourApp' } = body;
32
33  if (!to || !message) {
34    return NextResponse.json(
35      { error: 'to and message are required' },
36      { status: 400 }
37    );
38  }
39
40  try {
41    const response = await vonage.sms.send({ to, from, text: message });
42    const msg = response.messages[0];
43
44    if (msg.status !== '0') {
45      return NextResponse.json(
46        { error: `SMS failed: ${msg['error-text']}` },
47        { status: 400 }
48      );
49    }
50
51    return NextResponse.json({
52      success: true,
53      messageId: msg['message-id'],
54      remainingBalance: msg['remaining-balance'],
55    });
56  } catch (error) {
57    const message = error instanceof Error ? error.message : 'Unknown error';
58    console.error('Vonage SMS error:', message);
59    return NextResponse.json(
60      { error: 'Failed to send SMS', details: message },
61      { status: 500 }
62    );
63  }
64}
65
66// app/api/vonage/verify/start/route.ts
67// POST with { phoneNumber: '14155552671', brand: 'MyApp' }
68// Returns { requestId } to pass to the check endpoint

Push your code to GitHub and configure Vonage credentials in Vercel. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add VONAGE_API_KEY with your Vonage API key (a short 8-character string). Add VONAGE_API_SECRET with your API secret (a 16-character string). Both are visible on the Vonage API Dashboard home page at dashboard.nexmo.com. Neither variable should have the NEXT_PUBLIC_ prefix — they are server-side values used only in your API routes. Optionally add VONAGE_FROM_NUMBER with your Vonage virtual phone number or sender ID (for SMS). In the US and many markets, you need a Vonage virtual number as the sender — check Vonage Dashboard → Numbers → Your Numbers. In some regions (like India), you can use an alphanumeric sender ID up to 11 characters (like 'MyAppName') without a number. Set all variables for Production, Preview, and Development environments. During testing, Vonage's trial account limits SMS delivery to verified phone numbers you have added to the test allowlist — go to Vonage Dashboard → Getting Started → Test Numbers to add your phone number. After deployment, test the full flow from your Vercel URL and check Vonage Dashboard → Logs → SMS to see delivery status.