Next.js布局重定向后子页面逻辑仍执行的问题咨询

在App Router中，布局（layout.tsx）和页面（page.tsx）的服务端渲染是并行执行的，所以即使布局里触发了重定向，页面的服务端逻辑（比如数据库调用）已经开始执行了。要解决这个问题，有两种推荐的实现方式：

1. 使用 Middleware 做路由拦截（推荐） #

Middleware 是在页面和布局渲染之前运行的请求拦截层，能直接在请求到达组件前判断权限，未授权时直接重定向，完全避免后续页面/布局的服务端代码执行。

创建项目根目录下的 middleware.ts 文件，示例代码：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 从请求中获取用户认证状态（比如cookie、token）
  const isAuthenticated = request.cookies.get('auth_token')?.value !== undefined

  // 定义需要保护的路由前缀
  const protectedRoutes = ['/dashboard', '/profile']
  const isProtectedRoute = protectedRoutes.some(route => request.nextUrl.pathname.startsWith(route))

  if (!isAuthenticated && isProtectedRoute) {
    // 未登录且访问受保护路由，重定向到登录页
    return NextResponse.redirect(new URL('/login', request.url))
  }

  // 认证通过或访问公开路由，继续请求
  return NextResponse.next()
}

// 指定需要应用中间件的路由匹配规则
export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*', '/login'],
}

2. 在页面的服务端组件中前置认证逻辑 #

如果不想用全局中间件，也可以在每个需要保护的页面的服务端组件中，先执行认证检查，未通过则直接重定向，之后再执行数据获取逻辑。

示例 app/dashboard/page.tsx：

import { redirect } from 'next/navigation'

// 服务端组件
export default async function DashboardPage() {
  // 先检查用户认证状态（比如从数据库、session获取）
  const user = await getUserFromSession()
  if (!user) {
    redirect('/login')
  }

  // 认证通过后再执行数据库调用等逻辑
  const dashboardData = await fetchDashboardData(user.id)

  return (
    <div>
      <h1>Dashboard</h1>
      {/* 渲染数据 */}
    </div>
  )
}

为什么布局里的重定向无法阻止页面执行？ #

App Router 的服务端渲染机制中，布局和页面组件是并行解析和执行的，布局的重定向逻辑和页面的数据获取逻辑会同时启动。当布局的重定向响应返回时，页面的数据库调用可能已经完成或正在进行，无法回滚。因此布局不适合做前置的权限拦截。

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