Next.js报错：React Context在服务端组件不可用，Google登录页面如何修复？

这个错误的核心原因是：你用的是Next.js 13+的App Router，默认创建的组件是Server Component，但useSession、signIn这类NextAuth的API属于客户端钩子，必须在Client Component中才能使用（Server Component无法访问React Context，而NextAuth的会话管理依赖Context）。

解决方法很简单，只需两步：

1. 标记组件为客户端组件 #

在你的组件文件最顶部添加'use client'指令，告诉Next.js这个组件要在客户端运行：

修改后的完整代码：

'use client'; // 必须放在文件最开头
import { useSession, signIn, signOut } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();
  if(!session){
    return(
      <div className={'bg-blue-900 w-screen h-screen flex items-center'}>
        <div className="text-center w-full">
          <button onClick={()=>signIn('google')} className="bg-white p-2 px-4 rounded-lg">Login with Google</button>
        </div>
      </div>
    )
  }

  return (
    <div>logged in {session.user.email}</div>
  )
}

2. 确保NextAuth的API路由配置正确 #

如果还没配置NextAuth的后端路由，需要在app/api/auth/[...nextauth]/route.js中添加Google认证的配置：

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID, // 从环境变量获取你的Google客户端ID
      clientSecret: process.env.GOOGLE_CLIENT_SECRET, // 从环境变量获取你的Google客户端密钥
    }),
  ],
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

另外补充：你跟着的是旧教程，旧版本Next.js（比如Pages Router）默认都是客户端组件，所以不需要加'use client'，但App Router下必须显式声明，这是新版本的核心变化之一。

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