Next.js中如何渲染外部文件的异步函数以展示数据库用户总数

核心问题分析 #

你遇到的问题大概率和Next.js App Router的组件模型有关：

• 默认情况下，page.tsx是服务器组件，不能使用useEffect这类React客户端Hook
• 如果强行把页面改成客户端组件（加'use client'），直接调用userCount会报错——Prisma Client不能在浏览器环境运行，会暴露数据库敏感凭证且缺少运行环境

解决方案1：直接在服务器组件中调用（推荐） #

App Router的服务器组件支持直接执行异步代码，这是最简洁的实现方式：

1. 确保db.ts的userCount函数正确

// db.ts
import { PrismaClient } from '@prisma/client'

// 单例模式避免重复实例化PrismaClient
const prisma = global.prisma || new PrismaClient()
if (process.env.NODE_ENV !== 'production') global.prisma = prisma

export async function userCount() {
  return await prisma.user.count()
}

2. 在dashboard/page.tsx中异步调用

不需要加'use client'，直接作为服务器组件编写：

// app/admin/dashboard/page.tsx
import { userCount } from '@/lib/db'

export default async function DashboardPage() {
  // 服务器组件直接执行异步逻辑
  const totalUsers = await userCount()

  return (
    <div className="dashboard-container">
      <h1>后台仪表盘</h1>
      <div className="stat-item">
        <h3>用户总数</h3>
        <p className="stat-number">{totalUsers}</p>
      </div>
    </div>
  )
}

解决方案2：客户端组件+API路由（适用于需要交互的场景） #

如果你的页面需要客户端交互（比如筛选、实时刷新），可以通过API路由中转数据：

1. 创建API路由

// app/api/user-count/route.ts
import { userCount } from '@/lib/db'
import { NextResponse } from 'next/server'

export async function GET() {
  const count = await userCount()
  return NextResponse.json({ count })
}

2. 在客户端组件中获取数据

给页面加上'use client'标识，用useEffect请求API：

// app/admin/dashboard/page.tsx
'use client'

import { useState, useEffect } from 'react'

export default function DashboardPage() {
  const [totalUsers, setTotalUsers] = useState<number | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    async function fetchUserCount() {
      try {
        const res = await fetch('/api/user-count')
        const data = await res.json()
        setTotalUsers(data.count)
      } catch (err) {
        console.error('获取用户数失败:', err)
      } finally {
        setIsLoading(false)
      }
    }

    fetchUserCount()
  }, [])

  if (isLoading) return <div>加载中...</div>

  return (
    <div className="dashboard-container">
      <h1>后台仪表盘</h1>
      <div className="stat-item">
        <h3>用户总数</h3>
        <p className="stat-number">{totalUsers ?? '获取失败'}</p>
      </div>
    </div>
  )
}

排查要点 #

1. 检查.env文件中MongoDB连接字符串是否正确配置，且已重启开发服务器
2. 确认Prisma已生成客户端：执行过npx prisma generate
3. 避免在客户端组件中直接调用Prisma相关函数

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