NextJS 13（App Router）+NextAuth：未登录时全局重定向至首页

方案一：使用Next.js Middleware（推荐，彻底解决页面闪烁） #

Middleware是App Router体系下全局拦截请求的最优方案，它在页面渲染前执行，能从根源避免未登录时的页面闪烁问题。

步骤1：创建Middleware文件 #

在项目根目录新建middleware.ts（或.js）文件：

import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
  // 获取当前请求路径
  const path = req.nextUrl.pathname;

  // 定义无需保护的公开路由（按需调整）
  const publicPaths = ["/", "/api/auth/signin", "/api/auth/signout"];
  const isPublicPath = publicPaths.includes(path);

  // 从请求中获取NextAuth的JWT Token
  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });

  // 公开路由直接放行
  if (isPublicPath) {
    return NextResponse.next();
  }

  // 无Token且访问私有路由，重定向到首页
  if (!token) {
    return NextResponse.redirect(new URL("/", req.nextUrl));
  }

  // 已登录，放行请求
  return NextResponse.next();
}

// 指定Middleware作用的路由范围（替换为你的后台路由前缀，支持通配符）
export const config = {
  matcher: ["/dashboard/:path*", "/products/:path*", "/orders/:path*"],
};

关键说明 #

• getToken在服务器端验证登录状态，完全跳过客户端渲染环节，彻底消除页面闪烁。
• matcher支持通配符规则，比如/dashboard/:path*会匹配dashboard下所有子路由。
• 可根据业务需求调整publicPaths，比如加入注册页、密码重置页等无需登录的页面。

方案二：使用根布局组件（Layout） #

如果不想依赖Middleware，也可以在根布局中统一处理登录校验，但必须用服务器组件结合getServerSession，避免客户端渲染导致的闪烁。

步骤1：修改app/layout.tsx #

import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/[...nextauth]/route"; // 导入你的NextAuth配置
import { redirect } from "next/navigation";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(authOptions);
  const pathname = new URL(headers().get("referer") || "").pathname;
  const publicPaths = ["/", "/api/auth/signin"];

  // 非公开路由且未登录，触发重定向
  if (!publicPaths.includes(pathname) && !session) {
    redirect("/");
  }

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

关键说明 #

• 根布局默认是服务器组件，getServerSession在服务器端执行，不会在客户端渲染未授权内容。
• 服务器组件无法直接使用usePathname，这里通过headers()获取referer判断当前路径，若需要更精准的路径判断，建议结合Middleware方案。

注意事项 #

• 确保环境变量中已配置NEXTAUTH_SECRET，否则getToken和getServerSession无法正常工作。
• 路由匹配规则要准确，避免遗漏需要保护的页面，或误拦截公开页面。
• Middleware方案优先级更高、体验更好，推荐作为首选。

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