NextJS验证邮箱跳转仪表盘时useClient引发模块错误求助

你的代码报错核心原因是：Mongoose、MongoDB驱动这类数据库工具是仅适用于服务器端的库，无法在浏览器环境（客户端组件）中运行。当你在标记'use client'的组件里导入getUserByEmail（它依赖Mongoose）时，Webpack会尝试把这些服务器端模块打包到客户端代码中，而这些模块依赖Node.js专属API和部分仅存在于服务器环境的依赖包，因此触发了大量"模块找不到"的错误。

方案1：改用服务器组件+getServerSession（推荐） #

既然你的核心需求是验证用户存在性并跳转，完全可以把页面改成服务器组件，用NextAuth的getServerSession替代客户端的useSession钩子，直接在服务器端调用数据库逻辑，彻底避免客户端打包服务器库的冲突。

修改page.jsx：

import { getServerSession } from 'next-auth/next'
import { redirect } from 'next/navigation'
import { getUserByEmail } from '@/utils/user'
import { authOptions } from '@/app/api/auth/[...nextauth]/route' // 导入你的NextAuth配置文件

export default async function DashboardPage() {
  const session = await getServerSession(authOptions)

  if (!session) {
    redirect('/login') // 未登录直接跳转到登录页
  }

  const user = await getUserByEmail(session.user.email)
  if (!user) {
    redirect('/onboarding')
  }

  return <div>Welcome to Dashboard</div>
}

注意：确保你的authOptions配置文件能被服务器组件正常导入，且getUserByEmail中的数据库连接逻辑是服务器端安全的。

方案2：使用Server Actions（Next.js 13.4+） #

如果页面必须保留客户端组件（比如包含大量交互逻辑），可以把数据库查询逻辑封装为Server Action——它会在服务器端执行，不会被打包到客户端代码中。

步骤1：创建Server Action #

在utils/user.js中添加标记为服务器动作的函数：

'use server' // 必须添加此标记，表明这是服务器端执行的动作

import { getUserByEmail } from './user' // 导入原有的用户查询函数

export async function checkUserExists(email) {
  return await getUserByEmail(email)
}

步骤2：在客户端组件中调用该动作 #

修改page.jsx：

'use client'

import { useSession } from 'next-auth/react'
import { redirect } from 'next/navigation'
import { checkUserExists } from '@/utils/user'
import { useEffect, useState } from 'react'

export default function DashboardPage() {
  const { data: session, status } = useSession()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    async function verifyUser() {
      if (status === 'authenticated' && session?.user?.email) {
        const user = await checkUserExists(session.user.email)
        if (!user) {
          redirect('/onboarding')
        }
        setIsLoading(false)
      } else if (status === 'unauthenticated') {
        redirect('/login')
        setIsLoading(false)
      }
    }

    verifyUser()
  }, [session, status])

  if (isLoading) {
    return <div>Loading...</div>
  }

  return <div>Welcome to Dashboard</div>
}

方案3：创建API路由（传统方案） #

另一种可选方法是搭建一个API端点，客户端组件通过fetch调用该端点完成用户验证。

步骤1：创建API路由app/api/check-user/route.js #

import { NextResponse } from 'next/server'
import { getServerSession } from 'next-auth/next'
import { authOptions } from '../auth/[...nextauth]/route'
import { getUserByEmail } from '@/utils/user'

export async function GET(request) {
  const session = await getServerSession(authOptions)
  if (!session) {
    return NextResponse.json({ exists: false }, { status: 401 })
  }

  const user = await getUserByEmail(session.user.email)
  return NextResponse.json({ exists: !!user })
}

步骤2：在客户端组件中调用API #

修改page.jsx：

'use client'

import { useSession } from 'next-auth/react'
import { redirect } from 'next/navigation'
import { useEffect, useState } from 'react'

export default function DashboardPage() {
  const { data: session, status } = useSession()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    async function verifyUser() {
      if (status === 'authenticated') {
        const res = await fetch('/api/check-user')
        const data = await res.json()
        if (!data.exists) {
          redirect('/onboarding')
        }
        setIsLoading(false)
      } else if (status === 'unauthenticated') {
        redirect('/login')
        setIsLoading(false)
      }
    }

    verifyUser()
  }, [session, status])

  if (isLoading) {
    return <div>Loading...</div>
  }

  return <div>Welcome to Dashboard</div>
}

优先选择方案1，它最简洁且贴合Next.js App Router的设计逻辑，彻底规避了客户端与服务器端库的冲突。如果必须保留客户端组件，方案2（Server Actions）是更现代的选择，比方案3（API路由）更简洁高效。

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