# How to Integrate Realtor.com with V0

- Tool: V0
- Difficulty: Intermediate
- Time required: 30 minutes
- Last updated: April 2026

## TL;DR

To integrate Realtor.com data with V0 by Vercel, generate a property search UI with V0, create a Next.js API route that calls the Realtor.com API via RapidAPI, store your API key in Vercel environment variables, and deploy. Your app can display property listings, search by location, and show market data without exposing your API key to the browser.

## Build Real Estate Search Apps and Property Dashboards with Realtor.com and V0

Realtor.com aggregates listing data from over 580 MLS systems across the United States, making it one of the most comprehensive sources of residential real estate data available. For founders building real estate tools — buyer's guides, neighborhood research apps, agent portfolio sites, or investment analysis dashboards — access to Realtor.com's listing database unlocks a massive, constantly updated dataset. The Realtor.com API, accessible via RapidAPI, provides property search, listing details, agent profiles, and market trend data that V0 can wrap in polished, search-engine-friendly Next.js interfaces.

The Realtor.com API follows a standard REST pattern but is accessed through RapidAPI's gateway rather than directly from Realtor.com's own developer portal. This means authentication uses RapidAPI's X-RapidAPI-Key and X-RapidAPI-Host headers rather than Realtor.com credentials. RapidAPI offers a free tier with limited monthly requests for development and testing, with paid tiers for production applications. Common endpoints include property search by city or zip code (returning active listings with price, beds, baths, sqft, and photos), property details (full listing information for a specific property ID), and agent search by location.

V0 is particularly well suited for generating the visual-heavy interfaces that real estate applications require — property cards with photo carousels, map integration with Leaflet or Google Maps, filter panels for price range and property type, and comparison tables. Describe the exact layout you want including how to handle properties with missing data (placeholder images, N/A for missing specs), and V0 generates production-ready components with Tailwind CSS. The Next.js API route pattern also enables server-side rendering of property listings for better SEO — important for real estate search pages that benefit from being indexed by Google.

## Before you start

- A RapidAPI account at rapidapi.com — sign up for free, no credit card required for the free tier
- A subscription to the Realtor.com API on RapidAPI — search for 'Realty in US' or 'Realtor' on RapidAPI; the free tier typically includes 50-100 requests per month
- Your RapidAPI key from the RapidAPI Dashboard → Credentials section — this is a single key that works across all RapidAPI subscriptions
- The specific RapidAPI host name for the Realtor.com API — visible on the API page in RapidAPI as X-RapidAPI-Host value (typically 'realtor16.p.rapidapi.com' or similar)
- A V0 account at v0.dev and a Vercel account for deployment

## Step-by-step guide

### 1. Subscribe to the Realtor.com API on RapidAPI

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.

**Expected result:** You have a RapidAPI account with an active subscription to a Realtor.com data API, your X-RapidAPI-Key, and the X-RapidAPI-Host value for the subscribed API. The API returns listing data when tested in RapidAPI's interface.

### 2. Create the Property Search API Route

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.

```
// app/api/realtor/search/route.ts
import { NextRequest, NextResponse } from 'next/server';

const RAPIDAPI_BASE = `https://${process.env.RAPIDAPI_REALTOR_HOST}`;

function getRapidAPIHeaders(): Record<string, string> {
  return {
    'X-RapidAPI-Key': process.env.RAPIDAPI_KEY || '',
    'X-RapidAPI-Host': process.env.RAPIDAPI_REALTOR_HOST || '',
  };
}

interface SearchRequest {
  location: string; // City, state or zip code
  priceMin?: number;
  priceMax?: number;
  beds?: number;
  propertyType?: string;
  page?: number;
}

export async function POST(request: NextRequest) {
  const apiKey = process.env.RAPIDAPI_KEY;
  const apiHost = process.env.RAPIDAPI_REALTOR_HOST;

  if (!apiKey || !apiHost) {
    return NextResponse.json(
      { error: 'Realtor.com API is not configured' },
      { status: 500 }
    );
  }

  let body: SearchRequest;
  try {
    body = await request.json();
  } catch {
    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
  }

  const { location, priceMin, priceMax, beds, propertyType, page = 1 } = body;

  if (!location) {
    return NextResponse.json({ error: 'location is required' }, { status: 400 });
  }

  // Parse city and state from location string
  const [city, ...stateParts] = location.split(',').map((s) => s.trim());
  const state = stateParts.join(' ').trim();

  const params = new URLSearchParams({
    city: city || location,
    state_code: state || '',
    type: 'buy',
    offset: String((page - 1) * 20),
    limit: '20',
    sort: 'relevant',
  });

  if (priceMin) params.set('price_min', String(priceMin));
  if (priceMax) params.set('price_max', String(priceMax));
  if (beds) params.set('beds_min', String(beds));
  if (propertyType && propertyType !== 'All') {
    params.set('type', propertyType.toLowerCase());
  }

  try {
    const response = await fetch(
      `${RAPIDAPI_BASE}/properties/search?${params.toString()}`,
      { headers: getRapidAPIHeaders() }
    );

    if (!response.ok) {
      throw new Error(`RapidAPI error: ${response.status} ${response.statusText}`);
    }

    const data = await response.json();

    // Normalize response to consistent schema
    const properties = (data.data || data.properties || data.listings || []).map((p: any) => ({
      id: p.listing_id || p.property_id || p.id,
      price: p.list_price || p.price,
      address: p.location?.address?.line || p.address || 'Address unavailable',
      city: p.location?.address?.city || p.city || city,
      state: p.location?.address?.state_code || p.state || state,
      beds: p.description?.beds || p.beds,
      baths: p.description?.baths_consolidated || p.baths,
      sqft: p.description?.sqft || p.sqft,
      photo: p.primary_photo?.href || p.photos?.[0]?.href || p.photo,
      status: p.status || 'for_sale',
      daysOnMarket: p.list_date ? Math.floor(
        (Date.now() - new Date(p.list_date).getTime()) / (1000 * 60 * 60 * 24)
      ) : null,
    }));

    return NextResponse.json({
      properties,
      total: data.total?.count || properties.length,
      page,
    });
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Unknown error';
    console.error('Realtor.com search error:', message);
    return NextResponse.json(
      { error: 'Failed to search properties', details: message },
      { status: 500 }
    );
  }
}
```

**Expected result:** POSTing { location: 'Austin, TX', priceMax: 500000, beds: 3 } to /api/realtor/search returns an array of normalized property objects with consistent field names ready for your V0 components to render.

### 3. Generate Property Cards UI with V0 and Configure Vercel

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.

**Expected result:** Property listings render as polished cards with photos, prices, and specs. The search form submits to /api/realtor/search and populates the grid with real Realtor.com listing data. Environment variables are set in Vercel and the deployment is live.

## Best practices

- Normalize the RapidAPI response in your API route to a consistent schema — this insulates your V0 frontend components from field name changes when API providers update their endpoints
- Add server-side response caching with next: { revalidate: 300 } for property search results — listings change slowly and caching reduces RapidAPI quota consumption
- Include Realtor.com attribution text or links to the original listings in your UI — this is typically required by RapidAPI provider terms and is good practice for data transparency
- Handle missing property data gracefully in your V0 components — real estate listings often have missing photos, square footage, or lot size data; always display placeholder values rather than broken UI
- Use server-side rendering or ISR for property detail pages to ensure Google can index listing content for SEO — this is a major advantage of the Next.js + Vercel architecture
- Rate limit your /api/realtor/search route to prevent users from making excessive requests that burn through your RapidAPI monthly quota
- Implement property detail caching aggressively — individual listing data changes rarely and caching detail pages for 1-2 hours significantly reduces API costs

## Use cases

### Property Search by City or Zip Code

A real estate search page where users enter a city name or zip code and see a grid of matching active listings. Each property card shows the main photo, price, address, beds/baths/sqft summary, and a link to the full listing on Realtor.com. V0 generates the search form and property grid; a Next.js API route calls the Realtor.com search API and returns filtered results.

Prompt example:

```
Build a real estate search page. At the top, a location search input with a Search button that POSTs to /api/realtor/search with the location string. Show results as a responsive grid of property cards, each showing: main photo, price in large bold text, address, and a row of icons with bed count, bath count, and square footage. Add a filter bar for min/max price and property type (House, Condo, Townhouse). Show a loading skeleton grid while searching. Use a professional real estate design with white cards and a navy blue header.
```

### Neighborhood Market Report

A neighborhood analysis page showing current market conditions: median listing price, average days on market, number of active listings, and price trend over the last 6 months. V0 generates the statistics cards and trend chart; a Next.js API route fetches aggregated market data from the Realtor.com API for the specified zip code.

Prompt example:

```
Design a neighborhood market report page for a given zip code. Show four metric cards: Median Price, Active Listings, Avg Days on Market, and Price per Sqft. Below, show a line chart of median price over the last 6 months. Below the chart, show recent listings as a compact list with address, price, and days on market. Input: zip code from URL parameter. Data from GET /api/realtor/market?zipCode=.... Use a data dashboard style with clean cards and blue charts.
```

### Saved Homes Comparison Tool

A home comparison tool where users can search for properties and add up to 4 to a side-by-side comparison view. The comparison table shows all key specs (price, beds, baths, sqft, year built, lot size, HOA fees) with color coding to highlight the best value in each category.

Prompt example:

```
Create a home comparison tool. Left panel: search by address or MLS ID that calls GET /api/realtor/property?id=... and shows the result with an Add to Comparison button. Right panel: comparison table showing up to 4 properties side-by-side with rows for Price, Beds, Baths, Sqft, Price per Sqft, Year Built, and Days on Market. Highlight the best value in each row in green. Add a Remove button per column. Show 'Add properties to compare' placeholder columns. Use a clean comparison table design.
```

## Troubleshooting

### API returns 403 Forbidden or 'You are not subscribed to this API'

Cause: The RAPIDAPI_KEY is invalid or does not have an active subscription to the specific Realtor.com API identified by RAPIDAPI_REALTOR_HOST.

Solution: Verify your RapidAPI subscription is active for the specific API you are trying to use. The X-RapidAPI-Host must match the API you subscribed to — different Realtor.com data providers on RapidAPI have different host values. Go to RapidAPI → My APIs → Subscriptions to confirm your active subscriptions and their host values.

### Search returns an empty properties array for valid city/state combinations

Cause: The query parameter names may not match the specific RapidAPI Realtor.com API version you subscribed to — different providers use different parameter names (city vs location vs q).

Solution: Test the endpoint directly in RapidAPI's built-in testing interface to see the exact parameter names and response structure. Adjust your API route's query parameter names to match. The response normalization code should also be updated if the provider returns data in a different structure than expected.

### Property photos fail to load in the browser with CORS or CSP errors

Cause: Realtor.com photo URLs require Next.js image domain configuration when using next/image, or the CDN URL pattern is not in the allowed list for your Content Security Policy.

Solution: Add the Realtor.com photo CDN domains to your next.config.ts remotePatterns for next/image, or use regular img tags for external property photos. Realtor.com photos are typically served from ar.rdcpix.com or similar domains.

```
// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: '*.rdcpix.com' },
      { protocol: 'https', hostname: '*.realtor.com' },
    ],
  },
};
```

### RAPIDAPI_KEY is undefined in the API route on Vercel

Cause: The environment variable was not added to Vercel, was added after the last deployment, or was accidentally given the NEXT_PUBLIC_ prefix which makes it undefined in server routes.

Solution: Go to Vercel Dashboard → your project → Settings → Environment Variables. Verify RAPIDAPI_KEY exists without the NEXT_PUBLIC_ prefix. If you recently added it, trigger a new deployment from the Deployments tab — environment variable changes require a redeployment to take effect.

## Frequently asked questions

### Does Realtor.com provide a direct developer API or must I use RapidAPI?

Realtor.com does not currently offer a self-serve public developer API — the most accessible route to Realtor.com listing data is through RapidAPI's marketplace, which hosts several providers offering Realtor.com data. Direct API access is typically available only to enterprise partners through Realtor.com's commercial licensing program.

### How many API requests does the free tier include?

RapidAPI free tier limits vary by provider but typically include 50 to 500 requests per month for Realtor.com data APIs. This is sufficient for development and testing. For production apps with real user traffic, upgrade to a paid plan — pricing is typically based on per-request volume with plans starting from $10 to $25 per month for a few thousand requests.

### Can I display Realtor.com listing data on my website or are there licensing restrictions?

The terms of service for RapidAPI-hosted Realtor.com data vary by provider. Review the specific provider's terms on RapidAPI before building a production app. Generally, displaying listing data for users actively searching for properties is permitted, while storing bulk data or republishing it in ways that compete directly with Realtor.com is restricted. Always display attribution to the data source.

### How do I show property listings on a map alongside the list view?

Use the latitude and longitude fields returned by the API (most Realtor.com RapidAPI providers include coordinates in the property data) to plot listings on a map. For maps in Next.js apps, react-leaflet (with OpenStreetMap, free) or the Google Maps JavaScript SDK work well. Use dynamic imports with ssr: false for map components since they require browser APIs.

### Can I get rental listings as well as for-sale properties?

Most RapidAPI Realtor.com data providers support both rental and for-sale listings. The type parameter in the search endpoint typically accepts 'buy' for for-sale, 'rent' for rentals, and sometimes 'sold' for recently sold comparable properties. Check the specific API documentation on RapidAPI for available type values and any coverage differences between for-sale and rental data.

### How do I build a property detail page with full listing information?

Create a Next.js dynamic route at app/properties/[id]/page.tsx that receives the listing ID from the URL and fetches full property details from a GET /api/realtor/property?id={id} route. The detail route calls the RapidAPI property details endpoint with the listing ID. Use generateStaticParams for SSG of popular listings, or revalidate: 3600 for ISR to keep detail pages fresh without rebuilding on every request.

---

Source: https://www.rapidevelopers.com/v0-integrations/realtor-com
© RapidDev — https://www.rapidevelopers.com/v0-integrations/realtor-com