How to Integrate MySQL with V0

Start by prompting V0 to create the React components for your data management interface. V0 is excellent at generating tables, forms, and CRUD interfaces with Tailwind CSS — describe the shape of your data and the operations you need and V0 will produce a complete, well-styled component. For a table-based view, tell V0 the column names you need to display and whether users should be able to sort, search, or filter. Specify the API endpoints your UI will call: GET /api/[resource] for fetching data, POST /api/[resource]/create for creating new records, PATCH /api/[resource]/[id] for updates, and DELETE /api/[resource]/[id] for deletions. When V0 knows the exact endpoint structure, it generates the fetch calls correctly. For forms, describe the fields with their types — text inputs, number inputs, dropdowns with specific options, date pickers. V0 will generate TypeScript interfaces matching your data shape and wire up the form with controlled React state or react-hook-form depending on complexity. Review V0's generated component carefully before moving on. Check that it handles loading states (showing a spinner while the API responds), empty states (showing a message when there are no records), and error states (displaying a helpful message when an API call fails). These three states matter for production-quality UIs and V0 usually includes them, but verify they are present. Since V0 is generating mock data for the preview, the UI will show placeholder content rather than real MySQL data. That is expected — the real data connection happens through the API routes you will create in the next steps.

The mysql2 package is the standard MySQL driver for Node.js and is fully compatible with Next.js. Install it by adding it to your package.json and committing — Vercel will install it automatically during the build process. Create a shared database client module at lib/db.ts that exports a connection pool. This module is imported by all your API routes and ensures a single pool is used across all routes rather than creating multiple separate pools. Using a single pool is critical for preventing connection exhaustion under load. The connection pool configuration deserves careful attention. The connectionLimit setting controls how many simultaneous connections from a single serverless function instance are allowed — set this to 5-10 for typical apps. For MySQL databases hosted on PlanetScale or Railway, the default limits are generous enough that this rarely causes issues. For a self-managed MySQL server with a low max_connections setting, you may need to reduce this further. The connection string pattern for mysql2 is a DATABASE_URL format or individual credential parameters (host, user, password, database, port). Using DATABASE_URL is cleaner for Vercel environment variables. If your MySQL host requires SSL (common on cloud-hosted databases), add ssl: { rejectUnauthorized: true } to the connection configuration — some managed MySQL services provide CA certificates that you can include for stricter verification. Always use mysql2's promise-based API (the /promise import) rather than the callback-based API. Next.js App Router API routes are async/await-based, so the promise interface integrates cleanly without callback pyramid patterns.

1import mysql from 'mysql2/promise';
2
3// Create a connection pool that persists across serverless function invocations
4// when the module is cached. connectionLimit prevents exhausting MySQL's max_connections.
5const pool = mysql.createPool({
6  uri: process.env.DATABASE_URL,
7  connectionLimit: 10,
8  waitForConnections: true,
9  queueLimit: 0,
10  // Enable SSL for cloud-hosted MySQL databases
11  ssl: process.env.NODE_ENV === 'production'
12    ? { rejectUnauthorized: true }
13    : undefined,
14});
15
16export default pool;

Create the Next.js API routes that your V0 UI will call to perform database operations. Place these in app/api/[resource]/ directories following Next.js App Router conventions. For the GET route (fetching records), import the pool from lib/db.ts and use pool.query() with a parameterized SQL statement. Always use parameterized queries — never string-interpolate user-provided values into SQL strings. The parameterized form passes values separately from the SQL string, which the database driver handles safely to prevent SQL injection. For pagination, use LIMIT and OFFSET in your SELECT queries rather than fetching all records. A typical pattern is to accept page and pageSize query parameters and calculate OFFSET as (page - 1) * pageSize. Return both the data array and a totalCount from a separate COUNT query so the frontend can display pagination controls. For the POST route (creating records), read the request body with request.json(), validate required fields, and use INSERT INTO with parameterized values. Return the inserted record's ID from result.insertId so the frontend can display the newly created item. For DELETE routes, use a dynamic segment in the file path: app/api/customers/[id]/route.ts. The route parameter is available via params.id. Always validate that the ID is a valid format before using it in a query — a simple parseInt check prevents accidental non-numeric values. One important consideration: mysql2 returns rows as plain JavaScript objects, but the column names from your database will be exactly as defined in MySQL — often snake_case (first_name, created_at). Your V0-generated TypeScript interfaces might use camelCase. Either adjust your SQL to alias columns (SELECT first_name AS firstName) or transform the response objects in your API route before returning them to the frontend.

1import { NextRequest, NextResponse } from 'next/server';
2import pool from '@/lib/db';
3
4export async function GET(request: NextRequest) {
5  try {
6    const search = request.nextUrl.searchParams.get('search') || '';
7    const page = parseInt(request.nextUrl.searchParams.get('page') || '1');
8    const pageSize = 20;
9    const offset = (page - 1) * pageSize;
10
11    let query: string;
12    let params: (string | number)[];
13
14    if (search) {
15      // Parameterized LIKE query — safe against SQL injection
16      query = `
17        SELECT id, name, email, company, created_at AS createdAt
18        FROM customers
19        WHERE name LIKE ? OR email LIKE ?
20        ORDER BY created_at DESC
21        LIMIT ? OFFSET ?
22      `;
23      params = [`%${search}%`, `%${search}%`, pageSize, offset];
24    } else {
25      query = `
26        SELECT id, name, email, company, created_at AS createdAt
27        FROM customers
28        ORDER BY created_at DESC
29        LIMIT ? OFFSET ?
30      `;
31      params = [pageSize, offset];
32    }
33
34    const [rows] = await pool.query(query, params);
35    const [countRows] = await pool.query(
36      search
37        ? 'SELECT COUNT(*) AS total FROM customers WHERE name LIKE ? OR email LIKE ?'
38        : 'SELECT COUNT(*) AS total FROM customers',
39      search ? [`%${search}%`, `%${search}%`] : []
40    );
41
42    const total = (countRows as any[])[0].total;
43
44    return NextResponse.json({ customers: rows, total, page, pageSize });
45  } catch (error) {
46    console.error('MySQL query error:', error);
47    return NextResponse.json(
48      { error: 'Failed to fetch customers' },
49      { status: 500 }
50    );
51  }
52}
53
54export async function POST(request: NextRequest) {
55  try {
56    const { name, email, company } = await request.json();
57
58    if (!name || !email) {
59      return NextResponse.json(
60        { error: 'name and email are required' },
61        { status: 400 }
62      );
63    }
64
65    const [result] = await pool.query(
66      'INSERT INTO customers (name, email, company, created_at) VALUES (?, ?, ?, NOW())',
67      [name, email, company || null]
68    );
69
70    const insertId = (result as any).insertId;
71
72    return NextResponse.json(
73      { id: insertId, name, email, company },
74      { status: 201 }
75    );
76  } catch (error: any) {
77    if (error.code === 'ER_DUP_ENTRY') {
78      return NextResponse.json(
79        { error: 'A customer with this email already exists' },
80        { status: 409 }
81      );
82    }
83    console.error('MySQL insert error:', error);
84    return NextResponse.json(
85      { error: 'Failed to create customer' },
86      { status: 500 }
87    );
88  }
89}

Your API routes read the DATABASE_URL environment variable to connect to MySQL. Add this to Vercel's environment configuration. Go to Vercel Dashboard → your project → Settings → Environment Variables. Add DATABASE_URL with a value in the format: mysql://username:password@hostname:3306/database_name. For cloud-hosted MySQL services: - Railway: Go to your Railway MySQL service → Connect → copy the MySQL connection URL. Railway provides DATABASE_URL directly. - PlanetScale: Go to your PlanetScale database → Connect → select 'Node.js' driver → copy the connection string. PlanetScale uses a slightly different format with SSL enforced. - Aiven: Find the connection string in the Aiven Console under Services → your MySQL service → Connection Information. - AWS RDS: Construct the URL as mysql://admin:password@your-instance.rds.amazonaws.com:3306/yourdb. Ensure RDS security groups allow connections from Vercel's IP ranges (or 0.0.0.0/0 if you rely on password auth). DATABASE_URL should not use the NEXT_PUBLIC_ prefix — it contains your database password and must remain server-only. For local development, create .env.local in your project root with DATABASE_URL pointing to your local MySQL instance (mysql://root:password@127.0.0.1:3306/mydb) or a cloud database with a development database name. Never point your local development environment at the production database. After saving the environment variable in Vercel, push a commit to trigger redeployment so the new variable takes effect.

Test your MySQL integration by exercising the API routes through your V0 UI. Start with the GET route — load your data table page and confirm records appear. If no records appear, check the Vercel Function Logs (Vercel Dashboard → your project → Functions) for MySQL error messages. Common first-run issues include: the MySQL host not being accessible from Vercel's infrastructure (check firewall rules), SSL configuration mismatches, incorrect database or table names, and column name mismatches between your SQL queries and your TypeScript interfaces. For the write operations, test creating a new record through the form V0 generated. Verify the record appears in the list after creation. Then test the duplicate-entry case (if you have a UNIQUE index on email) to confirm the error handling returns a useful message rather than an unhandled 500 error. For production MySQL on Vercel, monitor your connection count. MySQL's SHOW STATUS LIKE 'Threads_connected' command shows current connections. If you see the count climbing toward your max_connections limit, reduce connectionLimit in your pool configuration or consider migrating to a MySQL-compatible database with better serverless connection handling like PlanetScale, which uses a proprietary connection multiplexer. For complex MySQL integrations with multi-table joins, stored procedures, or full-text search, the query structure can become involved. RapidDev's team can help optimize MySQL query performance and connection management for V0 apps under production load.