Next.js 13+中客户端组件向服务端组件传递会话数据的最佳方案

方案1：直接在客户端组件中完成查询逻辑 #

既然已经在客户端组件通过useSession()拿到了用户邮箱，完全可以跳过服务端组件，直接在客户端发起请求到/api/users/email/。核心是要在API路由中做好身份校验，确保只有合法用户的请求能被处理。

客户端组件示例：

'use client';

import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";

export default function UserCheck() {
  const { data: session } = useSession();
  const [userExists, setUserExists] = useState<boolean | null>(null);

  useEffect(() => {
    const checkUser = async () => {
      if (!session?.user?.email) return;

      try {
        const res = await fetch(`/api/users/email?email=${encodeURIComponent(session.user.email)}`, {
          method: "GET",
          headers: { "Content-Type": "application/json" },
        });

        const data = await res.json();
        setUserExists(data.exists);
      } catch (err) {
        console.error("查询用户失败:", err);
        setUserExists(false);
      }
    };

    checkUser();
  }, [session]);

  return (
    <div>
      {userExists === null ? (
        <p>加载中...</p>
      ) : userExists ? (
        <p>该邮箱已注册</p>
      ) : (
        <p>该邮箱未注册</p>
      )}
    </div>
  );
}

API路由示例（app/api/users/email/route.ts）：

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const session = await getServerSession(authOptions);
  if (!session) {
    return NextResponse.json({ error: "未授权" }, { status: 401 });
  }

  const { searchParams } = new URL(request.url);
  const email = searchParams.get("email");
  if (!email) {
    return NextResponse.json({ error: "缺少邮箱参数" }, { status: 400 });
  }

  // 替换为你的数据库查询逻辑
  const userExists = await checkUserInDatabase(email);
  return NextResponse.json({ exists: userExists });
}

方案2：在服务端页面/组件中获取Session，传递邮箱给子组件 #

如果必须用服务端组件处理查询，可以把页面设为服务端组件，先通过getServerSession()拿到用户邮箱，再将邮箱作为props传递给子组件（支持服务端或客户端组件）。

服务端页面示例（app/user-check/page.tsx）：

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import UserCheckServerComponent from "./UserCheckServerComponent";

export default async function UserCheckPage() {
  const session = await getServerSession(authOptions);
  const userEmail = session?.user?.email;

  return (
    <div>
      {userEmail ? (
        <UserCheckServerComponent email={userEmail} />
      ) : (
        <p>请先登录</p>
      )}
    </div>
  );
}

服务端组件示例（app/user-check/UserCheckServerComponent.tsx）：

export default async function UserCheckServerComponent({ email }: { email: string }) {
  // 直接在这里调用数据库查询，无需额外API路由
  const userExists = await checkUserInDatabase(email);

  return (
    <div>
      {userExists ? (
        <p>该邮箱已注册</p>
      ) : (
        <p>该邮箱未注册</p>
      )}
    </div>
  );
}

方案3：使用Server Actions替代API路由 #

Next.js 13+支持Server Actions，可在客户端组件中直接调用服务端函数，省去单独写API路由的步骤，同时自动处理身份校验。

客户端组件示例：

'use client';

import { useSession } from "next-auth/react";
import { useState } from "react";
import { checkUserExists } from "@/actions/userActions";

export default function UserCheck() {
  const { data: session } = useSession();
  const [userExists, setUserExists] = useState<boolean | null>(null);

  const handleCheckUser = async () => {
    if (!session?.user?.email) return;

    try {
      const exists = await checkUserExists(session.user.email);
      setUserExists(exists);
    } catch (err) {
      console.error("查询失败:", err);
      setUserExists(false);
    }
  };

  return (
    <div>
      <button onClick={handleCheckUser}>检查邮箱状态</button>
      {userExists !== null && (
        <p>{userExists ? "该邮箱已注册" : "该邮箱未注册"}</p>
      )}
    </div>
  );
}

Server Action定义（app/actions/userActions.ts）：

"use server";

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";

export async function checkUserExists(email: string) {
  const session = await getServerSession(authOptions);
  if (!session) {
    throw new Error("未授权");
  }

  // 替换为你的数据库查询逻辑
  const userExists = await checkUserInDatabase(email);
  return userExists;
}

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