How to Integrate PostgreSQL with V0

The Vercel Marketplace integration makes adding PostgreSQL to your project as simple as adding an app on your phone. You do not need to create a Neon account separately, generate credentials, or copy and paste connection strings. Vercel handles the entire setup workflow. First, make sure your V0 project is deployed to Vercel. In V0, click the Share button (top right) and then Publish to Production to create your initial deployment. Once deployed, go to vercel.com and find your project in the dashboard. In your Vercel project, navigate to the Storage tab in the top navigation. This is where all Vercel-integrated data services live. Click 'Browse Marketplace' or look for the 'Add' button next to Storage. In the Marketplace, find 'Neon Serverless Postgres' and click on it. Click 'Add Integration'. Vercel will walk you through a short setup flow: 1. Choose your Neon plan (the free tier is sufficient to start — 0.5 GB storage, 10 branch databases) 2. Select which Vercel environments should have access (default is Production + Preview + Development — keep all three checked) 3. Click 'Connect' or 'Deploy' Vercel provisions the Neon database in seconds and automatically injects the following environment variables into your project: `DATABASE_URL`, `DATABASE_URL_UNPOOLED`, `PGHOST`, `PGUSER`, `PGDATABASE`, `PGPASSWORD`. The `DATABASE_URL` is the primary connection string your application code will use. You can confirm this worked by going to your project's Settings → Environment Variables. You will see all the database variables listed there with encrypted values managed by Vercel.

With the database provisioned and DATABASE_URL available, install the Neon serverless client package in your Next.js project. Clone your GitHub repository locally (or work in V0's Dev Mode on paid plans). In the project root, run `npm install @neondatabase/serverless` to add the package. The `@neondatabase/serverless` package provides two ways to query Neon: - **`neon()`** — an HTTP-based query function for simple queries. Each call opens an HTTP connection, sends the query, and closes. Perfect for single queries in serverless functions where connection reuse is not possible. - **`Pool`** — a connection pool class for transactions and multiple queries that need to run in the same session. Use this when you need `BEGIN`/`COMMIT` transaction semantics. For most V0 app use cases, the `neon()` function is what you want — it is simpler, works without any connection management, and handles Neon's serverless scale-to-zero behavior automatically. Before creating API routes, set up your database schema. You can run SQL directly in the Neon Console (accessible from your Vercel project's Storage tab → Open in Neon Console) or through a migration tool. For a simple V0 app getting started quickly, running a CREATE TABLE statement directly in the Neon SQL Editor is the fastest approach. Create the tables your application needs with proper column types, primary keys, and indexes. The Neon Console has a full SQL Editor interface where you can write and execute SQL statements, browse your table structure, and view data. For simple starting schemas, this is faster than setting up a migration framework.

1-- Run in Neon Console SQL Editor to create example tables
2CREATE TABLE IF NOT EXISTS users (
3  id SERIAL PRIMARY KEY,
4  email TEXT UNIQUE NOT NULL,
5  display_name TEXT NOT NULL,
6  bio TEXT DEFAULT '',
7  avatar_url TEXT DEFAULT '',
8  created_at TIMESTAMPTZ DEFAULT NOW()
9);
10
11CREATE TABLE IF NOT EXISTS products (
12  id SERIAL PRIMARY KEY,
13  name TEXT NOT NULL,
14  description TEXT,
15  price NUMERIC(10, 2) NOT NULL,
16  category TEXT NOT NULL,
17  image_url TEXT DEFAULT '',
18  created_at TIMESTAMPTZ DEFAULT NOW()
19);
20
21-- Index for full-text search on products
22CREATE INDEX IF NOT EXISTS products_search_idx
23  ON products USING GIN(to_tsvector('english', name || ' ' || COALESCE(description, '')));

Now create the API routes that your V0-generated React components will call to read and write data. Each API route imports the `neon` function from `@neondatabase/serverless`, initializes it with `process.env.DATABASE_URL`, and runs SQL queries against your Neon database. Create the file `app/api/products/route.ts` for a product catalog route. The route accepts a GET request with optional `q` (search query) and `category` (filter) query parameters, builds a SQL query with those filters, and returns the results as JSON. For the `neon()` HTTP client, you initialize it once per module with the DATABASE_URL and call it as a tagged template literal: `await sql\`SELECT * FROM products\``. The tagged template literal automatically handles SQL parameter escaping — use `${variable}` inside the template and Neon will parameterize it safely, preventing SQL injection. For write operations (POST, PUT, DELETE), use the same pattern but with INSERT, UPDATE, or DELETE statements. For operations that need atomicity across multiple statements (like creating an order and updating inventory simultaneously), use the `Pool` class with explicit transactions. The `DATABASE_URL` environment variable is automatically available in your API routes because Vercel injected it during the Marketplace setup. You do not need to add it manually in `.env.local` — Vercel's CLI (if you use it) or the `vercel env pull` command can download the variables for local development. Alternatively, go to Vercel Dashboard → Settings → Environment Variables → find DATABASE_URL and copy the value into a `.env.local` file for local testing.

1// app/api/products/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { neon } from '@neondatabase/serverless';
4
5const sql = neon(process.env.DATABASE_URL!);
6
7export async function GET(request: NextRequest) {
8  const { searchParams } = new URL(request.url);
9  const query = searchParams.get('q') ?? '';
10  const category = searchParams.get('category') ?? '';
11
12  try {
13    let rows;
14
15    if (query) {
16      // Full-text search using PostgreSQL tsvector
17      rows = await sql`
18        SELECT id, name, description, price, category, image_url
19        FROM products
20        WHERE (
21          to_tsvector('english', name || ' ' || COALESCE(description, ''))
22          @@ plainto_tsquery('english', ${query})
23        )
24        ${category ? sql`AND category = ${category}` : sql``}
25        ORDER BY name
26        LIMIT 50
27      `;
28    } else {
29      rows = await sql`
30        SELECT id, name, description, price, category, image_url
31        FROM products
32        ${category ? sql`WHERE category = ${category}` : sql``}
33        ORDER BY name
34        LIMIT 50
35      `;
36    }
37
38    return NextResponse.json({ products: rows });
39  } catch (error) {
40    console.error('Database query error:', error);
41    return NextResponse.json(
42      { error: 'Failed to fetch products' },
43      { status: 500 }
44    );
45  }
46}
47
48export async function POST(request: NextRequest) {
49  try {
50    const body = await request.json();
51    const { name, description, price, category, image_url } = body;
52
53    const [product] = await sql`
54      INSERT INTO products (name, description, price, category, image_url)
55      VALUES (${name}, ${description}, ${price}, ${category}, ${image_url})
56      RETURNING *
57    `;
58
59    return NextResponse.json({ product }, { status: 201 });
60  } catch (error) {
61    console.error('Insert error:', error);
62    return NextResponse.json(
63      { error: 'Failed to create product' },
64      { status: 500 }
65    );
66  }
67}

With your database and API routes in place, use V0 to generate the React components that display and interact with your PostgreSQL data. In V0's chat panel, describe the UI you want — reference the API route paths you created so V0 knows where to fetch data from. V0 generates React components using Tailwind CSS and shadcn/ui. When you reference a specific API endpoint in your prompt, V0 will include the correct fetch call and data mapping in the generated component. Review the preview to make sure the layout matches your expectations. For the product catalog example, V0 will generate a page with a search input, category filter buttons, and a product grid. The component will fetch from `/api/products` with the search and category parameters. Check that the component handles: - Loading state: skeleton cards or a spinner while fetching - Empty state: a message when no results match the filter - Error state: a user-friendly error message if the fetch fails - The correct data fields: your component should use the same field names your API route returns (`id`, `name`, `price`, `category`, `image_url`) If the V0-generated component uses slightly different field names or expects a different response structure, either regenerate with a more specific prompt or edit the component's data mapping code to match your actual API response. Once satisfied, push to GitHub using V0's Git panel to trigger a Vercel deployment. Because Vercel already has DATABASE_URL injected from the Marketplace setup, your deployment will immediately connect to the real Neon database without any additional configuration.

One of Neon's most powerful features for V0/Vercel workflows is database branching. Just like Git branches let you work on code changes without affecting the main branch, Neon database branches let each Vercel preview deployment have its own isolated copy of the database. This means you can safely test schema migrations, seed test data, and try out new features in pull request deployments without any risk to your production data. When Vercel Marketplace provisioned Neon, it configured this branching automatically. Every time you create a pull request on your GitHub repository and Vercel creates a preview deployment, Neon creates a new database branch forked from the main branch at that point in time. The preview deployment's DATABASE_URL points to this branch — completely isolated from production. To take advantage of this for schema changes: first run your new CREATE TABLE or ALTER TABLE statements on the Neon main branch in the Neon Console to update production. Then create a new branch in Neon manually (Neon Console → Branches → Create Branch) to test more experimental changes. Vercel's preview deployments will use their auto-created branches. To seed test data for previews, you can add a `seed.sql` file to your repository and run it against the preview branch's DATABASE_URL using the Neon CLI or a Vercel build hook. For simple apps, it is often easier to just insert test rows directly in the Neon Console for the specific branch you are testing. The combination of Vercel preview deployments and Neon database branching gives you a complete staging environment per pull request — the most robust testing workflow available for V0-built apps.

1// Example: Use transactions with Pool for multi-step operations
2import { Pool } from '@neondatabase/serverless';
3
4export async function POST(request: NextRequest) {
5  const pool = new Pool({ connectionString: process.env.DATABASE_URL });
6
7  try {
8    const body = await request.json();
9    const { userId, productId, quantity, totalPrice } = body;
10
11    // Transaction: create order AND update inventory atomically
12    const client = await pool.connect();
13    try {
14      await client.query('BEGIN');
15
16      const { rows: [order] } = await client.query(
17        `INSERT INTO orders (user_id, product_id, quantity, total_price)
18         VALUES ($1, $2, $3, $4) RETURNING *`,
19        [userId, productId, quantity, totalPrice]
20      );
21
22      await client.query(
23        `UPDATE products SET stock = stock - $1 WHERE id = $2`,
24        [quantity, productId]
25      );
26
27      await client.query('COMMIT');
28      return NextResponse.json({ order }, { status: 201 });
29    } catch (err) {
30      await client.query('ROLLBACK');
31      throw err;
32    } finally {
33      client.release();
34    }
35  } catch (error) {
36    return NextResponse.json({ error: 'Transaction failed' }, { status: 500 });
37  } finally {
38    await pool.end();
39  }
40}