How to Integrate Salesforce with V0

Before writing any code, you need to create a Connected App in Salesforce that authorizes your Next.js server to call the Salesforce API. Navigate to Salesforce Setup (click the gear icon → Setup), then search for App Manager in the Quick Find box. Click New Connected App in the top right. Fill in the app name (e.g., 'V0 Dashboard Integration'), API name (auto-filled), and your contact email. Under OAuth Settings, check the 'Enable OAuth Settings' box. Set the Callback URL to http://localhost:3000/api/salesforce/callback for local development and https://your-app.vercel.app/api/salesforce/callback for production — you'll need both. Under Selected OAuth Scopes, add 'Access the identity URL service (id, profile, email, address, phone)', 'Manage user data via APIs (api)', and 'Perform requests at any time (refresh_token, offline_access)'. Save the Connected App. Salesforce takes 2–10 minutes to activate the app. After activation, click 'Manage Consumer Details' — you'll see your Consumer Key (client_id) and Consumer Secret. Copy these values immediately. Also note your Salesforce org's My Domain URL — it looks like https://yourcompany.my.salesforce.com and is required for API authentication. For development, the Username-Password OAuth flow is simpler than the full redirect flow: you provide your Salesforce username, password plus security token (Account → Settings → Reset My Security Token), Consumer Key, and Consumer Secret directly.

Open V0 at v0.dev and describe the CRM interface you want to build. Think about which Salesforce objects you need to display — opportunities, leads, accounts, contacts, or cases — and describe the layout in detail. V0 excels at generating data-heavy dashboards with sortable tables, filter bars, stat cards, and detail modals. Ask V0 to build with local mock data first so you can perfect the visual design before wiring up the real Salesforce API. Specify the data shape you expect from Salesforce: Opportunity fields like Name, StageName, Amount, CloseDate, AccountName. Lead fields like FirstName, LastName, Company, Status, LeadSource, CreatedDate. When the component uses mock data that mirrors real Salesforce field names, swapping to live API data is just a matter of updating the fetch source. Use V0's Design Mode to adjust spacing, colors, and typography to match your brand. Once you're happy with the layout, open the Code panel and review the component before moving to the API integration steps. Save the generated component files — you'll deploy them directly to Vercel.

Add the jsforce package to your project — it's the most mature Salesforce SDK for Node.js and supports OAuth, SOQL, and all Salesforce REST API operations. Install it by adding 'jsforce' to your package.json. Create a utility file at lib/salesforce.ts that initializes the jsforce connection using your environment variables. The Username-Password OAuth flow is easiest for internal tools: you provide the login URL, consumer key, consumer secret, username, and password+token. The jsforce Connection object handles token management automatically. Next, create your API routes. For the opportunities list, create app/api/salesforce/opportunities/route.ts. Inside the GET handler, initialize a jsforce connection, call conn.login() with your credentials, then use conn.query() with a SOQL string. SOQL is Salesforce's SQL-like query language: 'SELECT Id, Name, StageName, Amount, CloseDate, Account.Name FROM Opportunity WHERE IsClosed = false ORDER BY CloseDate ASC LIMIT 50'. The query returns a records array you can transform and return as JSON. For mutations — creating leads, updating opportunity stages — use POST and PATCH routes that call conn.sobject('Lead').create() or conn.sobject('Opportunity').update(). Always wrap jsforce calls in try/catch and return appropriate HTTP status codes. V0's generated fetch calls in your React components will hit these routes and display the Salesforce data.

1// lib/salesforce.ts
2import jsforce from 'jsforce';
3
4export async function getSalesforceConnection() {
5  const conn = new jsforce.Connection({
6    loginUrl: process.env.SALESFORCE_LOGIN_URL || 'https://login.salesforce.com',
7  });
8
9  await conn.login(
10    process.env.SALESFORCE_USERNAME!,
11    process.env.SALESFORCE_PASSWORD! + process.env.SALESFORCE_SECURITY_TOKEN!
12  );
13
14  return conn;
15}
16
17// app/api/salesforce/opportunities/route.ts
18import { NextResponse } from 'next/server';
19import { getSalesforceConnection } from '@/lib/salesforce';
20
21export async function GET() {
22  try {
23    const conn = await getSalesforceConnection();
24
25    const result = await conn.query<{
26      Id: string;
27      Name: string;
28      StageName: string;
29      Amount: number;
30      CloseDate: string;
31      Account: { Name: string };
32    }>(
33      'SELECT Id, Name, StageName, Amount, CloseDate, Account.Name FROM Opportunity WHERE IsClosed = false ORDER BY CloseDate ASC LIMIT 50'
34    );
35
36    return NextResponse.json({ opportunities: result.records });
37  } catch (error) {
38    console.error('Salesforce API error:', error);
39    return NextResponse.json(
40      { error: 'Failed to fetch Salesforce data' },
41      { status: 500 }
42    );
43  }
44}
45
46// app/api/salesforce/leads/route.ts
47import { NextRequest, NextResponse } from 'next/server';
48import { getSalesforceConnection } from '@/lib/salesforce';
49
50export async function GET() {
51  try {
52    const conn = await getSalesforceConnection();
53    const result = await conn.query(
54      'SELECT Id, FirstName, LastName, Company, Status, LeadSource, CreatedDate FROM Lead WHERE IsConverted = false ORDER BY CreatedDate DESC LIMIT 50'
55    );
56    return NextResponse.json({ leads: result.records });
57  } catch (error) {
58    return NextResponse.json({ error: 'Failed to fetch leads' }, { status: 500 });
59  }
60}
61
62export async function POST(req: NextRequest) {
63  try {
64    const body = await req.json();
65    const conn = await getSalesforceConnection();
66    const result = await conn.sobject('Lead').create(body);
67    return NextResponse.json({ id: (result as { id: string }).id }, { status: 201 });
68  } catch (error) {
69    return NextResponse.json({ error: 'Failed to create lead' }, { status: 500 });
70  }
71}

Now update the V0-generated React components to fetch from your Salesforce API routes instead of using mock data. In Next.js App Router, you have two options: use React Server Components that fetch data directly at render time using a standard fetch() call, or use client components with useEffect and useState for interactive filtering and sorting. For a CRM dashboard where users filter and sort data, client components work better. Add 'use client' to the component, then use a useEffect to call /api/salesforce/opportunities on mount and when filter values change. V0's generated components likely already have a data prop or local state — replace the mock data array with state that's populated from the API response. Handle loading and error states explicitly: show a skeleton loader while fetching and an error message with a retry button if the fetch fails. For creating or updating records, build a form component that POSTs to /api/salesforce/leads with a JSON body. After a successful response, refresh the list by re-fetching or optimistically updating the local state. Use TypeScript interfaces that match Salesforce's field names to keep your code type-safe. The StageName, AccountName, CloseDate pattern from Salesforce's SOQL response maps directly to what you asked V0 to mock earlier.

1'use client';
2
3import { useEffect, useState } from 'react';
4
5interface Opportunity {
6  Id: string;
7  Name: string;
8  StageName: string;
9  Amount: number;
10  CloseDate: string;
11  Account: { Name: string } | null;
12}
13
14export default function OpportunitiesTable() {
15  const [opportunities, setOpportunities] = useState<Opportunity[]>([]);
16  const [loading, setLoading] = useState(true);
17  const [error, setError] = useState<string | null>(null);
18
19  const fetchOpportunities = async () => {
20    setLoading(true);
21    setError(null);
22    try {
23      const res = await fetch('/api/salesforce/opportunities');
24      if (!res.ok) throw new Error('Failed to fetch');
25      const data = await res.json();
26      setOpportunities(data.opportunities);
27    } catch (err) {
28      setError('Failed to load Salesforce data. Check your credentials.');
29    } finally {
30      setLoading(false);
31    }
32  };
33
34  useEffect(() => { fetchOpportunities(); }, []);
35
36  const formatCurrency = (amount: number) =>
37    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
38
39  if (loading) return <div className="animate-pulse">Loading opportunities...</div>;
40  if (error) return (
41    <div>
42      <p className="text-red-500">{error}</p>
43      <button onClick={fetchOpportunities} className="mt-2 px-4 py-2 bg-blue-500 text-white rounded">Retry</button>
44    </div>
45  );
46
47  return (
48    <table className="w-full text-sm">
49      <thead>
50        <tr>
51          <th>Name</th><th>Account</th><th>Stage</th><th>Amount</th><th>Close Date</th>
52        </tr>
53      </thead>
54      <tbody>
55        {opportunities.map((opp) => (
56          <tr key={opp.Id}>
57            <td>{opp.Name}</td>
58            <td>{opp.Account?.Name ?? '—'}</td>
59            <td>{opp.StageName}</td>
60            <td>{formatCurrency(opp.Amount)}</td>
61            <td>{new Date(opp.CloseDate).toLocaleDateString()}</td>
62          </tr>
63        ))}
64      </tbody>
65    </table>
66  );
67}

All Salesforce credentials must be stored as server-only environment variables in Vercel — no NEXT_PUBLIC_ prefix. These values should never appear in your browser's JavaScript bundle. The credentials you need are: SALESFORCE_LOGIN_URL (use https://login.salesforce.com for production orgs, or https://test.salesforce.com for sandboxes), SALESFORCE_USERNAME (your Salesforce login email), SALESFORCE_PASSWORD (your Salesforce password), SALESFORCE_SECURITY_TOKEN (from your Salesforce account settings — reset it under Account → Settings → Reset My Security Token), SALESFORCE_CONSUMER_KEY (from your Connected App), and SALESFORCE_CONSUMER_SECRET (from your Connected App). To add these in Vercel, go to your project in the Vercel Dashboard, navigate to Settings → Environment Variables, and add each key with its value. Set them for both Production and Preview environments. For local development, add the same variables to your .env.local file. After saving all variables, trigger a new deployment by pushing to GitHub or clicking Redeploy in the Vercel Dashboard. Test the deployed app at your Vercel URL — navigate to the dashboard and verify that real Salesforce data appears in the table. Check the Vercel Function Logs (Dashboard → Your Project → Functions tab) if you see errors. For complex multi-object Salesforce integrations, RapidDev's team can help structure the API routes and SOQL queries for performance and scalability.

1# .env.local — never commit this file
2# Salesforce credentials (all server-only, no NEXT_PUBLIC_ prefix)
3SALESFORCE_LOGIN_URL=https://login.salesforce.com
4SALESFORCE_USERNAME=your@email.com
5SALESFORCE_PASSWORD=yourpassword
6SALESFORCE_SECURITY_TOKEN=yourSecurityToken123
7SALESFORCE_CONSUMER_KEY=3MVG9...
8SALESFORCE_CONSUMER_SECRET=ABC123...