Next.js与Kinde Auth整合报错：客户端无法使用服务端函数

核心思路是拆分服务端逻辑与客户端交互：用服务端组件调用getKindeServerSession获取用户状态，再将状态传递给客户端导航栏组件，由客户端组件根据状态动态渲染内容。

1. 创建服务端组件（获取用户会话） #

新建NavBarWrapper.tsx，作为服务端组件负责获取用户信息：

// app/components/NavBarWrapper.tsx
import { getKindeServerSession } from '@kinde-oss/kinde-auth-nextjs/server';
import NavBar from './NavBar';

export default async function NavBarWrapper() {
  const { getUser } = getKindeServerSession();
  const user = await getUser();

  // 将用户状态传递给客户端导航栏组件
  return <NavBar user={user} />;
}

2. 改造客户端导航栏组件 #

修改原有的NavBar.tsx，接收服务端传来的用户状态并动态渲染：

// app/components/NavBar.tsx
'use client';

import { LoginLink, RegisterLink, LogoutLink } from '@kinde-oss/kinde-auth-nextjs/components';

type NavBarProps = {
  user: { id: string; email: string } | null;
};

export default function NavBar({ user }: NavBarProps) {
  return (
    <nav className="flex items-center justify-between p-4 border-b">
      {/* 固定导航菜单 */}
      <div className="flex gap-6">
        <a href="/" className="font-semibold text-lg">首页</a>
        <a href="/products" className="text-gray-700 hover:text-blue-600">产品</a>
        <a href="/docs" className="text-gray-700 hover:text-blue-600">文档</a>
      </div>

      {/* 动态用户导航区 */}
      <div className="flex items-center gap-4">
        {user ? (
          <>
            <span className="text-sm text-gray-600">你好, {user.email}</span>
            <a href="/dashboard" className="text-gray-700 hover:text-blue-600">控制台</a>
            <LogoutLink className="text-red-500 hover:text-red-700">退出登录</LogoutLink>
          </>
        ) : (
          <>
            <LoginLink className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">登录</LoginLink>
            <RegisterLink className="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">注册</RegisterLink>
          </>
        )}
      </div>
    </nav>
  );
}

3. 在布局中引入服务端组件 #

在根布局或页面中使用NavBarWrapper替代原有的客户端导航栏：

// app/layout.tsx
import NavBarWrapper from './components/NavBarWrapper';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body className="min-h-screen">
        <NavBarWrapper />
        <main className="container mx-auto pt-8">{children}</main>
      </body>
    </html>
  );
}

关键说明 #

• getKindeServerSession是服务端专属函数，只能在服务端组件（无'use client'指令）中调用，避免了浏览器端运行报错。
• 客户端组件负责处理交互逻辑（如Kinde的登录/注册/退出链接），同时根据服务端传来的用户状态切换渲染内容。
• 这种拆分方式符合Next.js的App Router架构设计，兼顾了服务端渲染的安全性与客户端交互的灵活性。

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