R eact 框架的Next.js 13+版本包含的功能系统
Next.js 13+ = 版本号（像 iPhone 15）的 App Router 版本的核心新功能体系（像 iPhone 15 的"灵动岛"）介绍:
Next.js 13+（版本号）
↓ 包含的主要新功能体系
├── App Router（全新路由系统）← 最大的改变
├── React Server Components（服务端组件）
├── Turbopack（新打包工具）
└── Server Actions（服务端操作）每个大版本都会推出一些"主打新功能"，App Router 就是 Next.js 13+ 的"主打功能"。
Next.js App Router 体系详解
一、App Router 是什么？
一句话定义
App Router 是 Next.js 的全新文件路由系统，用文件夹结构自动生成路由，让全栈开发更简单直观。
二、核心概念（用对比说明）
旧方式（Pages Router）
# 旧：基于pages文件夹，每个文件一个路由
pages/
├── index.js → 访问 /
├── about.js → 访问 /about
├── blog/
│ ├── index.js → 访问 /blog
│ └── [slug].js → 访问 /blog/xxx（动态路由）
└── api/
└── hello.js → 访问 /api/hello新方式（App Router）
# 新：基于app文件夹，更灵活的组织方式
app/
├── page.tsx → 访问 /
├── about/
│ └── page.tsx → 访问 /about
├── blog/
│ ├── page.tsx → 访问 /blog
│ └── [slug]/
│ └── page.tsx → 访问 /blog/xxx
├── api/
│ └── hello/
│ └── route.ts → 访问 /api/hello（注意！这是API）
└── layout.tsx ← 布局文件，以前没有这个概念！三、App Router 的核心文件约定
每个文件夹可以有这些特殊文件
一个路由文件夹（如 app/dashboard/）可以包含：
├── layout.tsx # 布局（共享的UI，如导航栏）
├── page.tsx # 页面内容（必须存在）
├── loading.tsx # 加载状态UI（自动显示）
├── error.tsx # 错误状态UI（自动显示）
├── not-found.tsx # 404页面
└── route.ts # API接口文件四、App Router 的三大革命性改进
改进1：嵌套路由与布局
# 以前：每个页面独立，布局重复
pages/
├── home.js # 需要包含Header、Footer
├── about.js # 需要包含Header、Footer
└── contact.js # 需要包含Header、Footer
# 现在：布局可嵌套继承
app/
├── layout.tsx # 根布局（包含Header、Footer）
├── page.tsx # 首页
└── dashboard/
├── layout.tsx # dashboard专用布局（侧边栏）
└── page.tsx # dashboard主页（自动包含根布局+侧边栏）改进2：并行路由
// 可以同时渲染多个独立更新的"子页面"
app/
├── @analytics/ # 分析面板（并行路由）
│ └── page.tsx
├── @users/ # 用户列表（并行路由）
│ └── page.tsx
└── dashboard/
└── page.tsx
// 访问 /dashboard 时：
// 同时显示 analytics + users + dashboard 三个面板
// 每个面板可以独立加载、更新、错误处理改进3：拦截路由
# 在另一个页面中"弹出式"显示页面
# 访问 /photo/123 显示全屏照片页
# 从相册点击照片时，以模态框形式显示照片（不离开相册页）
app/
├── @modal/ # 拦截路由
│ ├── (.)photo/ # 捕获当前层级
│ │ └── [id]/
│ │ └── page.tsx
│ └── default.tsx
├── photo/
│ └── [id]/
│ └── page.tsx # 全屏照片页
└── page.tsx # 相册主页五、数据获取的革新
旧方式（复杂）
javascript
// pages/dashboard.js
export async function getServerSideProps() {
const data = await fetchData();
return { props: { data } };
}
export default function Dashboard({ data }) {
return <div>{data}</div>;
}新方式（简单直观）
javascript
// app/dashboard/page.tsx
// 直接是异步组件！
export default async function DashboardPage() {
// 直接在组件中获取数据，不用额外函数
const data = await fetchData();
return <div>{data}</div>;
}
// 组件自动在服务器获取数据，渲染好后发送给浏览器六、路由工作原理图解
javascript
用户访问 /dashboard/settings
↓
Next.js 按文件夹结构查找：
app/
├── layout.tsx (根布局) ← 应用
├── dashboard/
│ ├── layout.tsx (dashboard布局) ← 嵌套应用
│ └── settings/
│ └── page.tsx (目标页面) ← 渲染
↓
组合渲染：
<根布局>
<dashboard布局>
<settings页面/>
</dashboard布局>
</根布局>七、与旧版对比的优势总结
| 方面 | 旧版 Pages Router | 新版 App Router | 优势 |
|---|---|---|---|
| 文件组织 | 每个路由一个文件 | 每个路由一个文件夹 | 更清晰，相关文件在一起 |
| 布局系统 | 手动通过组件复用 | 自动嵌套布局 | 无重复代码，维护简单 |
| 数据获取 | getServerSideProps等 | 直接在组件中async/await | 更直观，类型安全 |
| 加载状态 | 手动实现 | loading.tsx自动处理 | 用户体验一致 |
| 错误处理 | 手动try-catch | error.tsx自动捕获 | 错误隔离，部分出错不影响整体 |
| 路由类型 | 单一平面路由 | 嵌套、并行、拦截路由 | 支持复杂应用场景 |
八、实际项目结构示例
javascript
# 一个电商网站使用App Router
app/
├── layout.tsx # 全局布局（导航栏、页脚）
├── page.tsx # 首页
├── products/
│ ├── layout.tsx # 商品页布局（面包屑、筛选栏）
│ ├── page.tsx # 商品列表
│ ├── loading.tsx # 商品加载动画
│ └── [id]/
│ ├── page.tsx # 单个商品详情
│ └── reviews/
│ └── page.tsx # 商品评价
├── cart/
│ └── page.tsx # 购物车
├── checkout/
│ ├── layout.tsx # 结账流程布局
│ ├── page.tsx # 地址填写
│ ├── payment/
│ │ └── page.tsx # 支付页面
│ └── complete/
│ └── page.tsx # 完成页面
├── api/
│ ├── products/
│ │ └── route.ts # 商品API
│ └── orders/
│ └── route.ts # 订单API
└── dashboard/ # 后台管理（需要登录）
├── layout.tsx # 管理后台布局
└── page.tsxApp Router 的本质
App Router 是 Next.js 的"新操作方式"，它：
-
用文件夹结构定义路由
-
用约定文件处理布局、加载、错误
-
支持嵌套、并行、拦截等高级路由
-
让全栈开发更简单直观
App Router 让前端路由从"写配置"变成了"放文件"，就像从"手写快递单"变成了"把包裹放到对应区域就自动处理"。