Next.js 14报错：React Context在Server Components中不可用（useSession问题）

错误根源有两点：

• Next.js 14 App Router默认所有组件都是Server Component，而useSession是依赖React Context的客户端钩子，无法在Server Component中调用。
• RootLayout未用SessionProvider包裹子组件，导致Session Context无法在应用中传递。

具体解决步骤： #

1. 将Home组件声明为客户端组件
   在page.tsx顶部添加'use client'指令，明确该组件为客户端组件，才能使用客户端钩子：

'use client';
import Documents from "@/components/Documents";
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import Login from "@/components/Login";
import { useSession } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession({ required: true });
  if (!session) return <Login />;

  return (
    <div>
      <Header />
      <Hero />
      <Documents />
    </div>
  );
}

2. 在RootLayout中注入SessionProvider
   修改layout.tsx，用SessionProvider包裹所有子组件，确保Session Context能在整个应用中生效：

import type { Metadata } from "next";
import { SessionProvider } from "next-auth/react";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Google Docs",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

完成以上修改后，useSession即可正常运行，不会再触发Context相关错误。

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