Next.js 13页面路由版首页强制登录跳转问题求助

问题分析 #

你的代码存在两个核心问题：

• 误用了App Router专属的redirect API：Pages路由下应使用next/router提供的路由方法，而非next/navigation的redirect。
• 直接在组件顶层执行跳转逻辑：useSession的status初始值为loading，此时直接触发跳转会导致组件渲染异常，甚至引发循环跳转。

修复后的代码 #

import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Index() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === "authenticated") {
      router.push("/dashboard");
    } else if (status === "unauthenticated") {
      router.push("/api/auth/signin");
    }
  }, [status, router]);

  // 处理加载状态，避免状态未明确时触发错误逻辑
  if (status === "loading") {
    return <div>加载中...</div>;
  }

  return null;
}

关键说明 #

• 使用useRouter获取路由实例，通过router.push完成跳转，这是Pages路由的标准用法。
• 将跳转逻辑放入useEffect中，依赖status和router，确保仅当认证状态明确时执行跳转。
• 增加loading状态的处理，既避免错误跳转，也给用户提供加载反馈。

此外，请确保你的NextAuth配置文件（[...nextauth].js）已正确设置认证提供者与回调函数，保证useSession能正常获取用户状态。

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