Next.js 15集成Drizzle ORM时出现'fs'模块找不到错误

问题根源 #

你使用的drizzle-orm/node-postgres和pg是Node.js环境专属的数据库客户端，在Next.js的客户端组件中引用时，Webpack会尝试打包这些依赖，但浏览器环境不存在fs、net等Node核心模块，因此报错。

解决方案 #

1. 严格区分服务器/客户端代码（推荐） #

Next.js 15默认组件是服务器组件，所有数据库操作都应该放在服务器组件、API路由、Server Actions中，绝对不要在客户端组件直接导入db实例。

示例：用服务器组件获取数据

// app/dashboard/page.tsx（默认是服务器组件）
import { db } from "@/lib/db";
import { users } from "@/schema";

export default async function DashboardPage() {
  // 服务器端执行数据库查询
  const userData = await db.select().from(users);
  
  return (
    <div>
      <h1>用户列表</h1>
      <ul>
        {userData.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

如果需要在客户端组件使用数据，通过服务器组件传递props即可：

// app/dashboard/page.tsx（服务器组件）
import ClientComponent from "./ClientComponent";
import { db } from "@/lib/db";
import { users } from "@/schema";

export default async function DashboardPage() {
  const userData = await db.select().from(users);
  return <ClientComponent users={userData} />;
}

// app/dashboard/ClientComponent.tsx（客户端组件，加'use client'指令）
'use client';

export default function ClientComponent({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

2. 改用PostgreSQL Web客户端（不推荐直接在客户端连接） #

如果确实需要在客户端操作数据库（强烈不建议，会暴露数据库凭证），可以改用drizzle-orm/postgres-js：

1. 安装依赖：

npm install drizzle-orm postgres

2. 修改数据库连接代码：

import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import { schema } from "@/schema";
import { env } from "@/config/env";

// 注意：客户端环境下绝对不要直接暴露DATABASE_URL，建议通过API代理请求
const client = postgres(env.DATABASE_URL);
export const db = drizzle(client, { schema, casing: "snake_case" });

3. Webpack fallback配置（临时 workaround，不推荐） #

如果只是临时调试，可在next.config.js中添加Webpack fallback配置，让Webpack忽略这些Node核心模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      net: false,
      tls: false,
    };
    return config;
  },
};

export default nextConfig;

这种方式可能导致依赖这些模块的功能（如SSL证书读取）失效，仅作为临时方案。

总结 #

最安全、符合Next.js架构的做法是将所有数据库操作限制在服务器端，客户端通过服务器组件、Server Actions或API路由获取数据，避免在客户端环境中引用Node.js专用的数据库库。

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