Next.js中Layout组件无法使用redirect？如何优化服务端私有路由？

我正在开发一个带有保护路由的应用，已登录用户可进入dashboard，未授权用户需跳转至登录页。目前我在每个保护路由中重复编写以下Supabase鉴权代码：

const supabase = createClient();
const {
  data: { user },
  error,
} = await supabase.auth.getUser();

if (error || !user) {
  redirect('/login');
}

该代码有效但冗余。我尝试在layout.tsx中实现全局鉴权却报错，随后尝试在layout中传入包含children的服务端组件App.tsx，在App中通过useEffect判断用户状态并调用redirect，却陷入无限循环，即使将App改为服务端组件也无法解决。请问除了在每个页面重复编写上述代码外，Next.js中是否有更好的服务端私有路由实现方式？

1. 封装可复用的服务端鉴权组件 #

把重复的鉴权逻辑封装成独立的服务端组件，在需要保护的页面或路由布局中直接使用：

// app/components/RequireAuth.tsx
import { createClient } from '@supabase/supabase-js';
import { redirect } from 'next/navigation';

export default async function RequireAuth({ children }: { children: React.ReactNode }) {
  const supabase = createClient();
  const { data: { user }, error } = await supabase.auth.getUser();

  if (error || !user) {
    redirect('/login');
  }

  return <>{children}</>;
}

使用示例：
单个保护页面：

// app/dashboard/page.tsx
import RequireAuth from '../components/RequireAuth';

export default async function DashboardPage() {
  return (
    <RequireAuth>
      <h1>Dashboard</h1>
      {/* 页面其他内容 */}
    </RequireAuth>
  );
}

整个路由组保护：

// app/dashboard/layout.tsx
import RequireAuth from '../components/RequireAuth';

export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <RequireAuth>
      <div className="dashboard-container">
        {children}
      </div>
    </RequireAuth>
  );
}

2. 用Next.js Middleware实现全局路由保护 #

Middleware能在请求到达页面之前完成鉴权，彻底避免重复代码和客户端跳转的问题：

// middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });

  const { data: { user } } = await supabase.auth.getUser();

  // 定义需要保护的路由规则
  const isProtectedRoute = req.nextUrl.pathname.startsWith('/dashboard') || req.nextUrl.pathname.startsWith('/profile');
  
  // 未登录访问保护路由，跳转到登录页
  if (isProtectedRoute && !user) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  // 已登录访问登录页，跳转到主页/仪表盘
  if (req.nextUrl.pathname === '/login' && user) {
    return NextResponse.redirect(new URL('/dashboard', req.url));
  }

  return res;
}

// 指定Middleware生效的路由范围
export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*', '/login'],
};

这种方案的优势：

• 鉴权逻辑完全在服务端执行，不会暴露到客户端
• 全局统一管控路由权限，无需逐个页面编写代码
• 避免客户端渲染后跳转带来的页面闪烁问题

3. 关于客户端useEffect跳转的问题说明 #

你之前遇到的无限循环，是因为每次redirect都会触发页面重新渲染，useEffect会再次执行判断逻辑，导致重复跳转。服务端鉴权是在页面渲染前完成的，不会出现这类问题，所以优先选择服务端组件或Middleware方案。

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