Next.js连接Neon数据库报错：client.query is not a function

核心问题 #

你在客户端组件（标记了"use client"的Provider组件）里直接执行数据库操作，但Neon的serverless客户端和Drizzle的neon-serverless适配器仅支持服务端环境，浏览器中无法正常初始化数据库连接，导致调用db.query时触发错误。

解决方案 #

将数据库操作逻辑移到服务端路由（API Route）中，客户端组件通过API调用间接执行数据库操作，具体步骤如下：

1. 创建服务端API路由 #

新建app/api/user/validate/route.js，把用户校验和插入逻辑放在这里：

import { db } from "@/configs/db";
import { eq } from "drizzle-orm";
import { Users } from "@/configs/schema";
import { NextResponse } from "next/server";

export async function POST(request) {
  try {
    const { email, name, imageUrl } = await request.json();
    
    if (!email) {
      return NextResponse.json({ error: "Email is required" }, { status: 400 });
    }

    const result = await db
      .select()
      .from(Users)
      .where(eq(Users.email, email));

    if (!result.length) {
      await db.insert(Users).values({
        name,
        email,
        imageUrl,
      });
      return NextResponse.json({ message: "New user added" }, { status: 201 });
    }

    return NextResponse.json({ message: "User already exists" }, { status: 200 });
  } catch (error) {
    console.error("Error validating user:", error);
    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
  }
}

2. 修改客户端Provider组件 #

更新app/provider.js，通过fetch调用上述API，而非直接操作数据库：

"use client";
import React, { useEffect } from "react";
import { useUser } from "@clerk/nextjs";

function Provider({ children }) {
  const { user } = useUser();

  const validateUser = async () => {
    try {
      const response = await fetch("/api/user/validate", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: user?.primaryEmailAddress?.emailAddress,
          name: user?.fullName,
          imageUrl: user?.profileImageUrl,
        }),
      });

      const data = await response.json();
      console.log(data.message);
    } catch (error) {
      console.error("Error validating user:", error);
    }
  };

  useEffect(() => {
    if (user) {
      validateUser();
    }
  }, [user]);

  return <div>{children}</div>;
}

export default Provider;

原因说明 #

• Neon的neon函数依赖Node.js专属的网络API，浏览器环境没有这些API，无法在客户端初始化数据库连接。
• Drizzle的neon-serverless适配器是为服务端设计的，直接在客户端调用会导致连接初始化失败，进而出现client.query is not a function错误。
• 通过API Route中转，所有数据库操作都在服务端执行，客户端仅负责发送请求和处理响应，符合Next.js的架构规范。

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