Next.js13 App目录迁移getServerSideProps：如何获取会话与上下文？

在App Router架构中，无需再使用getServerSideProps，可以直接在服务器组件（默认组件类型）中通过getServerSession完成会话检查，以下是具体实现方案：

核心思路 #

App Router的服务器组件会自动关联当前请求上下文，无需手动传递context参数。使用NextAuth.js的getServerSession方法替代原getSession，它会自动从请求中获取会话信息。

完整页面实现（替代原getServerSideProps逻辑） #

import { getServerSession } from "next-auth/next";
// 导入你在auth配置文件中定义的authOptions
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { getProviders } from "next-auth/react";

export default async function HomePage() {
  // 自动从请求上下文获取会话，无需手动传req/res
  const session = await getServerSession(authOptions);

  // 存在会话则触发服务器端重定向
  if (session) {
    return Response.redirect(new URL("/portal", process.env.NEXT_PUBLIC_APP_URL));
  }

  // 获取登录提供商列表
  const providers = await getProviders();

  return (
    <div className="login-container">
      {Object.values(providers || {}).map((provider) => (
        <a
          key={provider.id}
          href={`/api/auth/signin/${provider.id}`}
          className="login-btn"
        >
          使用{provider.name}登录
        </a>
      ))}
    </div>
  );
}

抽离会话检查逻辑到单独函数 #

如果需要复用会话检查逻辑，可以把逻辑封装成独立函数，无需传递context：

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

async function checkAndRedirectIfAuthenticated() {
  const session = await getServerSession(authOptions);
  if (session) {
    return Response.redirect(new URL("/portal", process.env.NEXT_PUBLIC_APP_URL));
  }
}

// 在页面组件中调用
export default async function HomePage() {
  // 若存在会话，此处会直接触发重定向，后续代码不会执行
  await checkAndRedirectIfAuthenticated();

  const providers = await getProviders();

  return (
    {/* 登录页面内容 */}
  );
}

注意事项 #

• 确保页面是服务器组件：不要添加'use client'指令，getServerSession仅能在服务器环境运行。
• 客户端组件会话检查：如果需要在客户端组件中处理会话，使用useSession钩子，重定向需通过next/navigation的redirect函数实现，但这种方式是客户端侧重定向，不如服务器端重定向高效。

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