Connecting custom backends to v0 frontends

Why connecting your own backend to V0 requires a proxy pattern

V0 generates Next.js frontend applications, but your business logic likely lives on a separate backend — a Django API, Express server, Rails app, or cloud functions. Calling these backends directly from V0's client-side code exposes API keys in the browser and often triggers CORS errors. The recommended pattern uses Next.js API routes (app/api/) as a server-side proxy that forwards requests to your backend, keeping secrets safe and bypassing browser CORS restrictions. This differs from integrating third-party SDKs, which involve installing npm packages directly into the V0 project.

• Calling your backend directly from client-side fetch, exposing API keys in browser network tab
• CORS blocking requests from the V0 preview domain to your backend server
• Hardcoding backend URLs instead of using environment variables from the Vars panel
• Missing error handling when the backend is unreachable or returns unexpected formats
• Using 'use client' components for data fetching instead of Server Components or API routes

Error messages you might see

Before you start

• A running backend API accessible via a public URL (not localhost)
• Backend API documentation or endpoint list
• V0 project with Next.js App Router
• Backend URL and any required API keys

How to fix it

// Hardcoded backend URL in client component
const res = await fetch('https://api.yourapp.com/users', {
  headers: { 'Authorization': 'Bearer sk_live_abc123' }
});

// Environment variable in API route (server-side)
const backendUrl = process.env.BACKEND_API_URL;
const apiKey = process.env.BACKEND_API_KEY;
const res = await fetch(`${backendUrl}/users`, {
  headers: { 'Authorization': `Bearer ${apiKey}` }
});

// Client component calling backend directly (CORS error)
'use client';
export default function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch('https://api.yourapp.com/users')
      .then(res => res.json())
      .then(setUsers);
  }, []);
}

// app/api/backend/[...path]/route.ts
import { NextRequest, NextResponse } from 'next/server';
const BACKEND_URL = process.env.BACKEND_API_URL!;
const API_KEY = process.env.BACKEND_API_KEY!;
export async function GET(
  request: NextRequest,
  { params }: { params: { path: string[] } }
) {
  const backendPath = params.path.join('/');
  const url = new URL(request.url);
  
  const res = await fetch(
    `${BACKEND_URL}/${backendPath}${url.search}`,
    {
      headers: {
        'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json',
      },
    }
  );
  const data = await res.json();
  return NextResponse.json(data, { status: res.status });
}

// Direct backend call from client (broken)
fetch('https://api.yourapp.com/users')

// Call through the proxy route (works)
fetch('/api/backend/users')

const data = await fetch('/api/backend/users').then(r => r.json());

try {
  const res = await fetch('/api/backend/users');
  if (!res.ok) {
    throw new Error(`Backend error: ${res.status}`);
  }
  const data = await res.json();
  setUsers(data);
} catch (error) {
  setError(error instanceof Error ? error.message : 'Failed to load data');
}

Complete code example

1import { NextRequest, NextResponse } from 'next/server';
2
3const BACKEND_URL = process.env.BACKEND_API_URL!;
4const API_KEY = process.env.BACKEND_API_KEY!;
5
6async function proxyRequest(
7  request: NextRequest,
8  params: { path: string[] },
9  method: string
10) {
11  const backendPath = params.path.join('/');
12  const url = new URL(request.url);
13  const targetUrl = `${BACKEND_URL}/${backendPath}${url.search}`;
14
15  const headers: HeadersInit = {
16    'Authorization': `Bearer ${API_KEY}`,
17    'Content-Type': 'application/json',
18  };
19
20  const fetchOptions: RequestInit = { method, headers };
21
22  if (method !== 'GET' && method !== 'HEAD') {
23    try {
24      fetchOptions.body = await request.text();
25    } catch {
26      // No body — that is fine for DELETE requests
27    }
28  }
29
30  try {
31    const res = await fetch(targetUrl, fetchOptions);
32    const data = await res.text();
33
34    return new NextResponse(data, {
35      status: res.status,
36      headers: { 'Content-Type': 'application/json' },
37    });
38  } catch (error) {
39    return NextResponse.json(
40      { error: 'Backend unavailable' },
41      { status: 502 }
42    );
43  }
44}
45
46type RouteParams = { params: { path: string[] } };
47
48export async function GET(req: NextRequest, { params }: RouteParams) {
49  return proxyRequest(req, params, 'GET');
50}
51
52export async function POST(req: NextRequest, { params }: RouteParams) {
53  return proxyRequest(req, params, 'POST');
54}
55
56export async function PUT(req: NextRequest, { params }: RouteParams) {
57  return proxyRequest(req, params, 'PUT');
58}
59
60export async function DELETE(req: NextRequest, { params }: RouteParams) {
61  return proxyRequest(req, params, 'DELETE');
62}

Best practices to prevent this

• Always use V0's Vars panel for backend URLs and API keys — never hardcode them in source files
• Create API route proxies to avoid CORS issues and keep secrets server-side
• Use Server Components for initial data fetching when the page does not need client interactivity
• Add timeout handling to proxy routes — set a reasonable fetch timeout to avoid hanging requests
• Validate and sanitize data from your backend before passing it to V0 frontend components
• Test with the V0 preview before deploying, as the Vercel Sandbox runs server-side code accurately
• For complex integrations with multiple backend services, consider RapidDev for architecture planning and implementation support

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue