How to Integrate Facebook Ads with V0

Open V0 and describe the ad performance dashboard you want to build. The goal at this stage is to get a polished React component that displays the data shape you'll later fetch from the Meta Marketing API. Think about which metrics matter most to your use case — campaign-level data includes name, status, objective, budget, impressions, clicks, CTR, spend, and conversions. Ad set-level data adds targeting details. Ad-level data adds creative performance. Ask V0 to use realistic placeholder data that mirrors the Meta API response shape. For campaign data, a typical object looks like: { id, name, status, objective, daily_budget, insights: { impressions, clicks, spend, ctr, actions } }. When V0 uses this shape in local state, swapping in real API data later becomes a direct replacement rather than a restructuring exercise. Also ask V0 to include loading skeletons and error states. The Meta Marketing API can be slow (especially for insights with large date ranges), so loading states are important for user experience. In Design Mode, refine the visual density of the table or cards to match the volume of data you expect. A campaign table typically works better than a card grid when you have 20+ campaigns.

Create a Next.js API route at app/api/facebook-ads/campaigns/route.ts that fetches campaign data from the Meta Marketing API. The Meta Marketing API follows the Facebook Graph API structure: the base URL is https://graph.facebook.com/v19.0/, and you access your ad account's campaigns at /act_{AD_ACCOUNT_ID}/campaigns. The most important aspect of this route is fetching insights alongside campaign data using the fields parameter. Meta's API supports requesting nested data with dot notation: ?fields=name,status,objective,daily_budget,insights{impressions,clicks,spend,ctr,actions}. However, insights data for custom date ranges requires passing date_preset or time_range as a query parameter. Handle the response carefully: Meta returns a data array of campaign objects, each with an insights key that contains its own data array (because insights can be paginated). The API uses cursor-based pagination via a paging.cursors.after value — for most dashboards, the first page of results (default 25 campaigns) is sufficient, but for large ad accounts you may need to follow the paging.next URL. Always handle Meta API rate limiting. The Marketing API enforces rate limits based on your app's Business Use Case tier. When rate limited, the API returns a 400 with error code 17 or 80000-80099. Add retry-after handling and pass through appropriate HTTP status codes to your frontend so the UI can show a 'Rate limited — try again in X seconds' message rather than a generic error.

1import { NextRequest, NextResponse } from 'next/server';
2
3const GRAPH_API_VERSION = 'v19.0';
4const GRAPH_BASE = `https://graph.facebook.com/${GRAPH_API_VERSION}`;
5
6export async function GET(req: NextRequest) {
7  const { searchParams } = new URL(req.url);
8  const datePreset = searchParams.get('date_preset') || 'last_7d';
9
10  const accessToken = process.env.META_ACCESS_TOKEN;
11  const adAccountId = process.env.META_AD_ACCOUNT_ID;
12
13  if (!accessToken || !adAccountId) {
14    return NextResponse.json(
15      { error: 'Meta credentials not configured' },
16      { status: 500 }
17    );
18  }
19
20  const fields = [
21    'name',
22    'status',
23    'objective',
24    'daily_budget',
25    'lifetime_budget',
26    `insights.date_preset(${datePreset}){impressions,clicks,spend,ctr,actions}`,
27  ].join(',');
28
29  const url = new URL(`${GRAPH_BASE}/act_${adAccountId}/campaigns`);
30  url.searchParams.set('fields', fields);
31  url.searchParams.set('access_token', accessToken);
32  url.searchParams.set('limit', '50');
33
34  try {
35    const res = await fetch(url.toString(), { cache: 'no-store' });
36    const json = await res.json();
37
38    if (!res.ok || json.error) {
39      const code = json.error?.code;
40      const status = code === 17 || (code >= 80000 && code <= 80099) ? 429 : 400;
41      return NextResponse.json(
42        { error: json.error?.message || 'Meta API error', code },
43        { status }
44      );
45    }
46
47    return NextResponse.json({ campaigns: json.data || [] });
48  } catch (err) {
49    return NextResponse.json(
50      { error: 'Failed to fetch from Meta API' },
51      { status: 500 }
52    );
53  }
54}

Now wire the V0-generated campaign dashboard component to your Next.js API route. Since this is an internal dashboard (not a public-facing page), you can use a React component with useState and useEffect to fetch data on mount, or make the parent page a Server Component that fetches directly. For the date range picker, maintain the selected preset as React state and re-fetch when it changes. The API route accepts a date_preset query parameter, so you construct the fetch URL dynamically: fetch('/api/facebook-ads/campaigns?date_preset=' + selectedPreset). Process the Meta API response to normalize the data shape for your table. The insights field on each campaign is a nested object with a data array — you need to extract the first element for display: campaign.insights?.data?.[0]. The actions array inside insights contains conversion events (purchases, leads, etc.) — each action has action_type and value fields. To calculate ROAS, find the action where action_type is 'offsite_conversion.fb_pixel_purchase' and divide its value by the campaign's spend. Add a refresh button that re-fetches data and a last-updated timestamp so users know how recent the data is. Meta's Marketing API caches insights data, so refreshing more frequently than every few minutes won't yield new data during active campaigns. For error handling, distinguish between a rate limit error (show a countdown until retry is safe) and a credential error (show a configuration error message with instructions to check environment variables).

1'use client';
2
3import { useState, useEffect, useCallback } from 'react';
4
5interface CampaignInsights {
6  impressions: string;
7  clicks: string;
8  spend: string;
9  ctr: string;
10  actions?: Array<{ action_type: string; value: string }>;
11}
12
13interface Campaign {
14  id: string;
15  name: string;
16  status: string;
17  objective: string;
18  daily_budget?: string;
19  insights?: { data: CampaignInsights[] };
20}
21
22interface NormalizedCampaign extends Campaign {
23  metrics: CampaignInsights | null;
24  roas: number | null;
25}
26
27function normalizeCampaign(campaign: Campaign): NormalizedCampaign {
28  const metrics = campaign.insights?.data?.[0] ?? null;
29  const purchaseAction = metrics?.actions?.find(
30    (a) => a.action_type === 'offsite_conversion.fb_pixel_purchase'
31  );
32  const roas =
33    purchaseAction && metrics?.spend
34      ? parseFloat(purchaseAction.value) / parseFloat(metrics.spend)
35      : null;
36  return { ...campaign, metrics, roas };
37}
38
39export default function CampaignDashboard() {
40  const [campaigns, setCampaigns] = useState<NormalizedCampaign[]>([]);
41  const [loading, setLoading] = useState(true);
42  const [error, setError] = useState<string | null>(null);
43  const [datePreset, setDatePreset] = useState('last_7d');
44  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
45
46  const fetchCampaigns = useCallback(async () => {
47    setLoading(true);
48    setError(null);
49    try {
50      const res = await fetch(`/api/facebook-ads/campaigns?date_preset=${datePreset}`);
51      const json = await res.json();
52      if (!res.ok) throw new Error(json.error || 'Failed to fetch');
53      setCampaigns((json.campaigns as Campaign[]).map(normalizeCampaign));
54      setLastUpdated(new Date());
55    } catch (e) {
56      setError(e instanceof Error ? e.message : 'Unknown error');
57    } finally {
58      setLoading(false);
59    }
60  }, [datePreset]);
61
62  useEffect(() => { fetchCampaigns(); }, [fetchCampaigns]);
63
64  // Render campaign table...
65  return <div>{/* table rendering */}</div>;
66}

Meta Marketing API credentials consist of two values: a long-lived access token and your ad account ID. Both are sensitive and should be stored as server-only Vercel environment variables — no NEXT_PUBLIC_ prefix, since they only need to be available in your API routes. To generate a long-lived access token: go to developers.facebook.com → your app → Tools → Graph API Explorer. Select your app and the ads_read and ads_management permissions, generate a short-lived token, then exchange it for a long-lived token (valid 60 days) using the Token Debugger or the token exchange endpoint: https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id={APP_ID}&client_secret={APP_SECRET}&fb_exchange_token={SHORT_LIVED_TOKEN}. For production apps, consider using a System User token instead — System Users are non-human accounts in Meta Business Manager that generate tokens which never expire (until manually revoked) and are not tied to an individual employee's account. Go to Meta Business Manager → Business Settings → System Users to create one. In the Vercel Dashboard, navigate to your project → Settings → Environment Variables. Add META_ACCESS_TOKEN with your long-lived or system user token, and META_AD_ACCOUNT_ID with your account ID (without the act_ prefix — your API route adds that). Set both for Production and Preview environments. For Preview environments, consider using a test ad account ID so preview deployments don't affect real campaign data. After adding the variables, trigger a redeployment from the Vercel Dashboard or push a commit. Verify by visiting your deployed dashboard URL and confirming campaign data loads.

1# .env.local — never commit this file
2# Meta Marketing API credentials (server-only, no NEXT_PUBLIC_ prefix)
3META_ACCESS_TOKEN=EAABsbCS...
4META_AD_ACCOUNT_ID=1234567890