如何在Vercel上连接React与PostgreSQL？附报错及代码求助

错误信息 #

Uncaught (in promise) VercelPostgresError: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.

现有代码 #

cndb.js #

import { sql, db } from "@vercel/postgres";

export default async function handler(req, res) {
    const client = await db.connect({
        POSTGRES_URL: process.env.local.POSTGRES_URL,
    });
    try {
        await client.sql`CREATE TABLE Things (  Name varchar(255), Pass varchar(255) );`;
        const names = ["thinga", "thingb"];
        await client.sql`INSERT INTO Things (Name,Pass) VALUES (${names[0]},${names[1]});`;
    } catch (error) {
        return res.status(500).json({ error });
    }
    const things = await client.sql`SELECT * FROM Things;`;
    return res.status(200).json({ things });
}

page0.js #

import { Link } from "react-router-dom";
import { useState } from "react";

import handler from "./api/cndb";

import "./page0.css";

export function Page0() {
    const [inputvalue, setinputvalue] = useState("");
    return (
        <>
            <div className="Circle" onClick={() => handler(null, null)}>
                submit
            </div>
        </>
    );
}

文件结构 #

项目根目录下包含：

• api文件夹（内含cndb.js）
• src文件夹（内含page0.js、page0.css等组件文件）
• 根目录下的环境配置文件（.env.local、.env等）

问题修复步骤 #

1. 修复环境变量与数据库连接 #

• 环境变量读取错误：process.env.local.POSTGRES_URL写法错误，环境变量直接挂载在process.env下，应改为process.env.POSTGRES_URL。
• Vercel Postgres连接简化：db.connect()无需手动传入连接字符串，只要环境变量配置正确，库会自动读取POSTGRES_URL（或POSTGRES_URL_NON_POOLING）。
• 环境变量配置规范：
  • 本地开发：根目录创建.env.local，添加POSTGRES_URL=你的Vercel Postgres连接字符串，保存后重启开发服务器。
  • Vercel部署：在项目后台的「Environment Variables」中添加POSTGRES_URL变量，值为Vercel Postgres提供的连接字符串。

修正后的cndb.js：

import { sql, db } from "@vercel/postgres";

export default async function handler(req, res) {
    const client = await db.connect();
    try {
        // 先检查表是否存在，避免重复创建报错
        await client.sql`
            CREATE TABLE IF NOT EXISTS Things (
                Name varchar(255),
                Pass varchar(255)
            );
        `;
        const names = ["thinga", "thingb"];
        await client.sql`INSERT INTO Things (Name,Pass) VALUES (${names[0]},${names[1]});`;
        const things = await client.sql`SELECT * FROM Things;`;
        return res.status(200).json({ things });
    } catch (error) {
        return res.status(500).json({ error: error.message });
    } finally {
        // 释放连接
        client.release();
    }
}

2. 修复API路由无法访问的问题 #

• 若使用Next.js：API路由必须放在项目根目录的/api文件夹下，每个文件对应一个路由（如api/cndb.js对应/api/cndb），确保文件夹位置正确且文件名无拼写错误。
• 若使用纯React（非Next.js）：React本身无内置API路由，需通过Vercel Serverless Functions实现，此时api文件夹必须放在项目根目录，文件需符合Serverless规范（导出默认async函数接收req/res），部署后Vercel会自动识别该路由。

3. 修复前端调用API的方式 #

不能直接import并调用handler函数（它需要接收标准的req/res对象），应通过fetch发送HTTP请求调用API路由：

修正后的page0.js：

import { Link } from "react-router-dom";
import { useState } from "react";

import "./page0.css";

export function Page0() {
    const [inputvalue, setinputvalue] = useState("");

    const handleSubmit = async () => {
        try {
            const res = await fetch("/api/cndb", { method: "POST" });
            const data = await res.json();
            console.log(data);
        } catch (error) {
            console.error("请求失败:", error);
        }
    };

    return (
        <>
            <div className="Circle" onClick={handleSubmit}>
                submit
            </div>
        </>
    );
}

内容的提问来源于stack exchange，提问作者Dlorej