How to Integrate Realtor.com with V0

Realtor.com does not provide a public developer API directly on its website — the most reliable way to access Realtor.com listing data programmatically is through RapidAPI, which hosts several Realtor.com data providers. Navigate to rapidapi.com and search for 'Realty in US' or 'realtor.com' to find the available API providers. The most popular options are RapidAPI-hosted APIs that aggregate MLS data from Realtor.com with endpoints for property search, details, and agent lookup. Click Subscribe on a free tier plan — this typically gives you 50 to 500 requests per month at no cost. After subscribing, you will see your X-RapidAPI-Key on the API's Endpoints page — this key is used in all requests. You also need the X-RapidAPI-Host value shown on the same page, which is specific to the Realtor.com API provider you subscribed to (different providers use different host names). Save both values — you will add them as Vercel environment variables. The free tier is sufficient for development and low-traffic apps; upgrade to a paid plan when you need more requests for production traffic. When testing the API directly in RapidAPI's interface, try the /properties/search endpoint with a city and state to confirm you are getting listing data before writing any code.

Create the Next.js API route that receives search queries from your V0-generated frontend and proxies them to the Realtor.com API via RapidAPI. The route accepts search parameters (city, state, zip code, price range, property type) and translates them into the specific query parameter format the RapidAPI endpoint expects. Every RapidAPI request requires two headers: X-RapidAPI-Key (your subscription key) and X-RapidAPI-Host (the specific API's host value from your RapidAPI subscription page). These are passed as HTTP headers in your server-side fetch call, never in the URL where they could be logged. The route returns a normalized property list that your frontend components can render consistently regardless of minor API schema changes. A common RapidAPI Realtor.com endpoint pattern is GET /properties/search?city={city}&state_code={state}&type=buy&price_min={min}&price_max={max}&sort=relevant. The response typically includes a data array of property objects with fields like listing_id, price, beds, baths, sqft, address, photos, and status. Normalize this response in your route to return a consistent schema that your V0 components depend on — this insulates your frontend from changes in the upstream API's response format. Create the file at app/api/realtor/search/route.ts.

1// app/api/realtor/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const RAPIDAPI_BASE = `https://${process.env.RAPIDAPI_REALTOR_HOST}`;
5
6function getRapidAPIHeaders(): Record<string, string> {
7  return {
8    'X-RapidAPI-Key': process.env.RAPIDAPI_KEY || '',
9    'X-RapidAPI-Host': process.env.RAPIDAPI_REALTOR_HOST || '',
10  };
11}
12
13interface SearchRequest {
14  location: string; // City, state or zip code
15  priceMin?: number;
16  priceMax?: number;
17  beds?: number;
18  propertyType?: string;
19  page?: number;
20}
21
22export async function POST(request: NextRequest) {
23  const apiKey = process.env.RAPIDAPI_KEY;
24  const apiHost = process.env.RAPIDAPI_REALTOR_HOST;
25
26  if (!apiKey || !apiHost) {
27    return NextResponse.json(
28      { error: 'Realtor.com API is not configured' },
29      { status: 500 }
30    );
31  }
32
33  let body: SearchRequest;
34  try {
35    body = await request.json();
36  } catch {
37    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
38  }
39
40  const { location, priceMin, priceMax, beds, propertyType, page = 1 } = body;
41
42  if (!location) {
43    return NextResponse.json({ error: 'location is required' }, { status: 400 });
44  }
45
46  // Parse city and state from location string
47  const [city, ...stateParts] = location.split(',').map((s) => s.trim());
48  const state = stateParts.join(' ').trim();
49
50  const params = new URLSearchParams({
51    city: city || location,
52    state_code: state || '',
53    type: 'buy',
54    offset: String((page - 1) * 20),
55    limit: '20',
56    sort: 'relevant',
57  });
58
59  if (priceMin) params.set('price_min', String(priceMin));
60  if (priceMax) params.set('price_max', String(priceMax));
61  if (beds) params.set('beds_min', String(beds));
62  if (propertyType && propertyType !== 'All') {
63    params.set('type', propertyType.toLowerCase());
64  }
65
66  try {
67    const response = await fetch(
68      `${RAPIDAPI_BASE}/properties/search?${params.toString()}`,
69      { headers: getRapidAPIHeaders() }
70    );
71
72    if (!response.ok) {
73      throw new Error(`RapidAPI error: ${response.status} ${response.statusText}`);
74    }
75
76    const data = await response.json();
77
78    // Normalize response to consistent schema
79    const properties = (data.data || data.properties || data.listings || []).map((p: any) => ({
80      id: p.listing_id || p.property_id || p.id,
81      price: p.list_price || p.price,
82      address: p.location?.address?.line || p.address || 'Address unavailable',
83      city: p.location?.address?.city || p.city || city,
84      state: p.location?.address?.state_code || p.state || state,
85      beds: p.description?.beds || p.beds,
86      baths: p.description?.baths_consolidated || p.baths,
87      sqft: p.description?.sqft || p.sqft,
88      photo: p.primary_photo?.href || p.photos?.[0]?.href || p.photo,
89      status: p.status || 'for_sale',
90      daysOnMarket: p.list_date ? Math.floor(
91        (Date.now() - new Date(p.list_date).getTime()) / (1000 * 60 * 60 * 24)
92      ) : null,
93    }));
94
95    return NextResponse.json({
96      properties,
97      total: data.total?.count || properties.length,
98      page,
99    });
100  } catch (error) {
101    const message = error instanceof Error ? error.message : 'Unknown error';
102    console.error('Realtor.com search error:', message);
103    return NextResponse.json(
104      { error: 'Failed to search properties', details: message },
105      { status: 500 }
106    );
107  }
108}

With the API route working, use V0 to generate the property listing display components that consume the normalized data. Describe the exact property card layout you want: a photo at the top, price prominently displayed, address below, and a row of icons showing beds, baths, and square footage. Tell V0 the data shape returned by your API route (id, price, address, beds, baths, sqft, photo, daysOnMarket) and the API endpoint path. V0 generates responsive card grids with Tailwind CSS that handle missing data gracefully when you describe placeholder states. After generating the UI components, configure Vercel environment variables. Open the Vercel Dashboard → your project → Settings → Environment Variables. Add RAPIDAPI_KEY with your RapidAPI subscription key and RAPIDAPI_REALTOR_HOST with the host value from your RapidAPI subscription page (e.g., realtor16.p.rapidapi.com). Neither variable should have the NEXT_PUBLIC_ prefix. Add both variables for Production, Preview, and Development scopes. For local testing, create .env.local with the same variables and run npm run dev — test a property search for a major US city to confirm listings are returned. Save Vercel variables and trigger a redeployment. After deployment, test the live search in your deployed app to confirm listings display correctly with photos and pricing data.