Connecting external databases to V0-generated UIs

Why connecting databases to V0 UIs requires server-side patterns

V0 generates frontend UI components, but database connections must happen server-side to protect credentials and avoid exposing your database to the browser. In Next.js App Router, you have three server-side options: Server Components that fetch data directly during rendering, API routes in app/api/ that expose REST endpoints, and Server Actions that handle form submissions. V0's Connect panel offers one-click integrations for Neon, Supabase, and Upstash that automatically configure environment variables and install the required packages. For other databases, you add the connection string to the Vars panel and import the database client in server-only files.

• Database client imported in a Client Component ("use client"), exposing connection credentials to the browser
• Connection string hardcoded in source code instead of stored in the V0 Vars panel
• Missing "use server" annotation on Server Actions that perform database mutations
• Connection pool exhaustion from creating new database connections on every request instead of reusing them
• Environment variables not set in the Vercel project settings after deploying from V0

Error messages you might see

Before you start

• A V0 project that needs to display or manipulate data from an external database
• A hosted database (Neon, Supabase, PlanetScale, or Upstash) with a connection string
• Access to the V0 Connect panel or Vars panel for environment variable configuration

How to fix it

// No database connection configured

// After connecting Neon via Connect panel:
// - @neondatabase/serverless package installed
// - DATABASE_URL added to Vars panel
// - Connection utility created automatically

// Hardcoded connection string — NEVER do this
import { neon } from "@neondatabase/serverless";
const sql = neon("postgres://user:pass@host/db");

// Using Vars panel environment variable
import { neon } from "@neondatabase/serverless";
const sql = neon(process.env.DATABASE_URL!);

// Client Component trying to query database — fails
"use client";
import { neon } from "@neondatabase/serverless";
export function ProductList() {
  // This cannot run in the browser
  const sql = neon(process.env.DATABASE_URL!);
}

// Server Component — queries database during rendering
import { neon } from "@neondatabase/serverless";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export default async function ProductsPage() {
  const sql = neon(process.env.DATABASE_URL!);
  const products = await sql`SELECT id, name, price FROM products ORDER BY name`;
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6">
      {products.map((product) => (
        <Card key={product.id}>
          <CardHeader>
            <CardTitle>{product.name}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-2xl font-bold">${product.price}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

// No API route — client cannot fetch data

// app/api/products/route.ts
import { neon } from "@neondatabase/serverless";
import { NextResponse } from "next/server";
export async function GET(request: Request) {
  const sql = neon(process.env.DATABASE_URL!);
  const { searchParams } = new URL(request.url);
  const category = searchParams.get("category");
  const products = category
    ? await sql`SELECT * FROM products WHERE category = ${category}`
    : await sql`SELECT * FROM products`;
  return NextResponse.json(products);
}

Complete code example

1import { neon } from "@neondatabase/serverless";
2
3// Create a reusable database query function
4// This file should only be imported in Server Components,
5// API routes, and Server Actions — never in "use client" files
6
7export function getDb() {
8  if (!process.env.DATABASE_URL) {
9    throw new Error(
10      "DATABASE_URL is not set. Add it in the V0 Vars panel."
11    );
12  }
13  return neon(process.env.DATABASE_URL);
14}
15
16// Type-safe query helpers
17export async function getProducts() {
18  const sql = getDb();
19  return sql`SELECT id, name, description, price, category FROM products ORDER BY name`;
20}
21
22export async function getProductById(id: string) {
23  const sql = getDb();
24  const rows = await sql`SELECT * FROM products WHERE id = ${id}`;
25  return rows[0] ?? null;
26}
27
28export async function createProduct(data: {
29  name: string;
30  description: string;
31  price: number;
32  category: string;
33}) {
34  const sql = getDb();
35  const rows = await sql`
36    INSERT INTO products (name, description, price, category)
37    VALUES (${data.name}, ${data.description}, ${data.price}, ${data.category})
38    RETURNING *
39  `;
40  return rows[0];
41}

Best practices to prevent this

• Never import database clients in files with "use client" — all database access must happen in Server Components, API routes, or Server Actions
• Store all database credentials in the V0 Vars panel and set them in Vercel's environment variables panel before deploying
• Use V0's Connect panel for Neon, Supabase, and Upstash — it handles installation and configuration automatically
• Use connection pooling (Neon's pooled connection string or Supabase's connection pooler) to avoid exhausting connection limits in serverless environments
• Create a shared lib/db.ts utility file to centralize database connection logic and avoid duplicating connection code
• For complex database architectures involving multiple databases, migrations, and ORM setup, RapidDev can configure the complete data layer

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