使用async/await调用getServerSession导致Next.js页面空白求助

核心问题 #

1. getServerSession缺少配置参数：Next.js App Router环境下，getServerSession必须传入你的NextAuth配置项（authOptions），否则无法正确获取会话，会抛出错误导致页面渲染失败。
2. 未处理session为undefined的情况：当会话不存在时，直接访问session.user会触发TypeError，导致组件崩溃、页面空白。

修复步骤 #

1. 确保NextAuth配置文件存在 #

先确认你已创建NextAuth的API路由文件app/api/auth/[...nextauth]/route.ts，示例配置如下（根据你的认证提供商调整）：

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

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
};

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

2. 修改Nav组件 #

导入authOptions并传入getServerSession，同时增加空值判断避免报错：

import Login from "./Login";
import Logged from "./Logged";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route"; // 路径需匹配你的配置文件位置

export default async function Nav() {
  const session = await getServerSession(authOptions);
  const hasUser = session?.user !== undefined;

  return (
    <nav className="flex justify-end">
      {!hasUser && <Login />}
      {hasUser && <Logged />}
    </nav>
  );
}

3. 可选：完善Logged组件的登出功能 #

给Logged组件添加客户端交互（登出需要调用客户端API）：

"use client";
import { signOut } from "next-auth/react";

export default function Logged() {
  return (
    <button 
      className="text-black cursor-pointer underline text-lg p-6 hover:text-gray-600"
      onClick={() => signOut()}
    >
      Sign out
    </button>
  );
}

验证 #

修改完成后重启开发服务器，页面即可正常渲染：未登录时显示登录按钮，登录后显示登出按钮。

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