Next.js App Router 怎么实现嵌套路由与布局组件

图 1：Next.js App Router 嵌套路由与布局的映射模型及运行时组合

一、嵌套路由的基本构建方式

在 Next.js 的 Pages Router（旧版）时代，路由完全取决于文件名，如果要实现通用布局，开发者往往需要手写自定义的 getLayout 函数或者在页面内部手动引用布局外壳。而在 App Router 中，文件夹本身就是路由的一部分，特定的保留文件名承担特定的角色。

要实现一个嵌套路由，只需要遵循如下规则：

• 嵌套文件夹定义路径段：在 app/ 目录下创建层级文件夹。例如 app/dashboard/settings 对应的实际访问路径就是 /dashboard/settings。
• page.tsx 决定路由的可访问性：只有当某个目录下包含 page.tsx（或 .jsx）时，该路径才是一个合法的公开路由段；如果该目录只有 layout.tsx 没有 page.tsx，直接访问该路径会触发 404。

下面是一个典型的后台管理多层级目录示例：

my-next-app/
└── app/
    ├── layout.tsx             # 根布局：应用全局通用外壳
    ├── page.tsx               # 首页 (/)
    └── dashboard/             # 一级路由段 (/dashboard)
        ├── layout.tsx         # 仪表盘布局：侧边栏与头部
        ├── page.tsx           # 仪表盘主页 (/dashboard)
        ├── analytics/         # 二级路由段 (/dashboard/analytics)
        │   └── page.tsx       # 数据分析页
        └── settings/          # 二级路由段 (/dashboard/settings)
            └── page.tsx       # 设置中心页

二、布局组件（Layout）的层级嵌套机制

布局（Layout）是跨多个路由页面共享的 UI。布局组件有以下两个不可忽视的核心特征：

1. 自动包裹子节点：布局组件必须接收一个 children 属性。Next.js 在渲染时，会自动将子级的 layout.tsx 或终点 page.tsx 注入到 children 中。
2. 持久化与无损切换（Preserving State）：当用户在 /dashboard/analytics 与 /dashboard/settings 之间跳转时，app/dashboard/layout.tsx 不会重新挂载，布局内的 React 状态（例如折叠状态、输入草稿、搜索框内容）会被完整保留。

1. 根布局（Root Layout）：app/layout.tsx

根布局位于 app 目录的根部，在整个项目中是必须存在的，且在所有路由之间共享。根布局必须显式包含 <html> 和 <body> 标签：

// 根布局是服务端组件 (Server Component)，运行在最外层
export const metadata = {
  title: '企业管理控制台',
  description: '基于 Next.js App Router 搭建',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body style={{ margin: 0, fontFamily: 'sans-serif' }}>
        <header style={{ background: '#456581', color: '#fff', padding: '12px 24px' }}>
          <span style={{ fontWeight: 'bold' }}>企业通用顶栏</span>
        </header>
        {/* 此处的 children 即为子布局或顶层页面 */}
        <main>{children}</main>
      </body>
    </html>
  );
}

2. 嵌套子布局：app/dashboard/layout.tsx

在 app/dashboard/ 文件夹中创建的 layout.tsx 仅对 /dashboard 及其所有子路由生效。它会被根布局的 children 包裹，同时它自己的 children 则用来容纳其下级页面：

import Link from 'next/link';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 50px)' }}>
      {/* 侧边导航栏：切换子路由时不会重新渲染 */}
      <aside style={{ width: 220, background: '#F7F9FB', borderRight: '1px solid #D1D9E0', padding: 16 }}>
        <h3 style={{ color: '#456581', margin: '0 0 16px' }}>控制台导航</h3>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Link href="/dashboard" style={{ color: '#2C3E50', textDecoration: 'none' }}>概览首页</Link>
          <Link href="/dashboard/analytics" style={{ color: '#2C3E50', textDecoration: 'none' }}>数据统计</Link>
          <Link href="/dashboard/settings" style={{ color: '#2C3E50', textDecoration: 'none' }}>系统设置</Link>
        </nav>
      </aside>

      {/* 业务内容区域：由具体访问的子路由 page.tsx 动态填充 */}
      <section style={{ flex: 1, padding: 24 }}>
        {children}
      </section>
    </div>
  );
}

图 2：Next.js App Router 嵌套路由与布局的 4 步搭建流程

三、状态保持与局部重新渲染原理

理解嵌套布局最大的价值在于理解它的性能与交互优势。在单页应用（SPA）或传统 SSR 中，路由切换经常导致整个视口重新刷出或顶级组件被销毁并重新初始化。

Next.js App Router 在底层通过 **Partial Rendering（局部渲染）** 机制彻底解决了这一痛点：

图 3：Next.js App Router 局部渲染与布局组件状态保持运行机理

四、进阶模式：路由分组（Route Groups）与多套布局

在真实业务中，我们经常遇到这样的需求：后台管理系统需要带有侧边栏的 DashboardLayout，而面向大众的营销首页、关于我们页面则需要完全不同的全宽大屏布局（不需要侧边栏）。

如果直接按照传统的文件夹嵌套，所有的子目录都会不可避免地继承父级 layout.tsx。Next.js 提供了**路由分组（Route Groups）**特性，通过用圆括号包裹文件夹名称（例如 (marketing) 或 (admin)）来解决这一问题。

路由分组的关键特性：

• 不影响 URL 路径：文件夹名为 app/(marketing)/about/page.tsx，其访问 URL 仍然是简短的 /about，中间的 (marketing) 会被自动忽略。
• 允许拥有完全独立的布局：每个分组内可以放置各自的 layout.tsx，实现不同业务模块的布局隔离。

app/
├── (marketing)/                # 营销页面分组（不占用 URL 路径）
│   ├── layout.tsx              # 营销专属布局（浅色顶部大图导航）
│   ├── page.tsx                # 对应访问路径：/
│   └── about/
│       └── page.tsx            # 对应访问路径：/about
└── (admin)/                    # 管理后台分组（不占用 URL 路径）
    ├── layout.tsx              # 后台专属布局（深色后台侧边栏）
    └── dashboard/
        └── page.tsx            # 对应访问路径：/dashboard

五、常见问题与开发避坑指南

在实现嵌套路由与布局组件时，开发者经常在初次接触时遇到以下细节问题：

图 4：Next.js App Router 嵌套路由与布局核心规则速查清单

总结

Next.js App Router 通过文件系统路由将界面的物理目录结构、URL 访问路径与 React 组件的嵌套关系统一在了一起。只要遵循在对应文件夹中创建 layout.tsx 并渲染 children 的简单范式，开发者便能轻松构建层级清晰、能够实现局部高效渲染并能稳定保持交互状态的多层级 Web 界面。