Next.js 13 无'use client'的服务端组件登录后重定向问题

在Next.js 13的App Router架构下，服务端组件可以直接通过getSession获取Auth0会话，并使用Next.js内置的redirect函数完成服务端重定向，无需依赖已弃用的getServerSideProps。

实现代码 #

import { getSession } from '@auth0/nextjs-auth0';
import { redirect } from 'next/navigation';

export default async function Home() {
  // 在服务端获取Auth0会话
  const session = await getSession();

  // 若用户已登录，直接重定向到/chat
  if (session) {
    redirect('/chat');
  }

  // 未登录时渲染登录/注册按钮
  return (
    <div className='min-h-screen w-full bg-gray-800 flex justify-center items-center text-white text-center'>
      <div>
        <a href="/api/auth/login" className='rounded-md bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600'>
          Login
        </a>
        <a href="/api/auth/signup" className='rounded-md bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600 ml-2'>
          Sign Up
        </a>
      </div>
    </div>
  );
}

关键说明 #

• 该组件为服务端组件，无需添加'use client'指令，异步获取会话的逻辑在服务端执行
• getSession由@auth0/nextjs-auth0提供，在App Router环境下无需手动传入req/res，包内部已适配服务端上下文
• 服务端重定向可以避免客户端先渲染登录页面再跳转的闪烁问题，提升用户体验
• 确保已在app/api/auth/[auth0]/route.js中配置好Auth0的路由处理（遵循@auth0/nextjs-auth0的App Router集成规范）

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