| 特性 / 维度 | Pages Router（传统） | App Router（现代推荐） |
|---|
| 📁 路由目录结构 | /pages | /app |
| 🧭 路由方式 | 文件即路由（如：/pages/about.js → /about） | 文件夹+page.tsx 组合（如：/app/about/page.tsx → /about） |
| 🎬 页面组件写法 | 默认导出 React 组件 | 必须导出 Page 组件，支持嵌套路由 |
| 🧱 布局（Layout）系统 | 仅支持全局 _app.js、_document.js | 支持嵌套布局 layout.tsx，每级路由独立布局 |
| ⌛ 中间件（Middleware）支持 | 支持（较弱，仅配合 Pages Router 的 URL 结构） | 原生支持、自动识别 /middleware.ts，功能更强更灵活 |
| 🔁 动态路由 | [id].js, [slug].js | [id]/page.tsx, [slug]/page.tsx |
| 🔌 数据获取（静态） | getStaticProps | generateStaticParams + async 组件 |
| 🔄 数据获取（服务端） | getServerSideProps | async 页面组件直接处理 |
| 🔄 数据获取（初始 props） | getInitialProps（已不推荐） | ❌ 不支持（被替代） |
| 🌐 SEO 支持 | 手动 <Head> | generateMetadata() 方法自动生成 |
| 🧩 模块复用性 | 只能在 _app.js 控制全局 | 模块化强，布局嵌套灵活可复用 |
| 📦 API 路由支持 | /pages/api/* | /app/api/*（结构更清晰） |
| ⚡ 性能优化（懒加载） | 手动优化 | 默认开启模块懒加载 |
| 💾 缓存控制 | 搭配 HTTP 响应头控制 | 原生支持 fetch() 缓存策略（如 force-cache） |
| 🧰 Middleware 支持强度 | ✅（基本支持） | ✅✅✅ 原生集成，权限控制/AB测试首选 |
| 📅 首次引入版本 | Next.js 初始版本（长期支持） | 自 Next.js 13 开始引入 App Router（app/ 目录） |
| 🧠 元信息定义 | <Head> 内部手动编写 | generateMetadata() 函数式定义 |
| 📄 页面预加载支持 | ✅ 支持 | ✅ 支持 |
| 🧩 页面模块粒度 | 页面为单位 | 布局 + 页面 + loading + error 为粒度单位，组件化更彻底 |
| 🧪 使用复杂度 | 简单，开发者熟悉 | 稍复杂，但更强大、灵活 |
| 🧩 推荐场景 | 老项目维护、轻量网站 | 新项目开发、复杂布局、动态权限、国际化 |
-
Pages Router 示例结构
/pages
├── index.tsx
├── about.tsx
└── product/[id].tsx
-
App Router 示例结构
/app
├── layout.tsx # 根布局
├── page.tsx # 首页
├── about/
│ ├── layout.tsx # about 页面独立布局
│ └── page.tsx
└── product/
└── [id]/
└── page.tsx
推荐选择指南
| 场景 | 推荐使用模式 |
|---|
| 老项目维护 | Pages Router |
| 简单文档/博客站 | Pages Router 或 App Router（简单结构） |
| 多语言、动态主题 | App Router ✅ |
| 多租户、权限控制 | App Router ✅（结合 Middleware） |
| 页面级别模块复用需求强 | App Router ✅ |
| 新项目 | App Router ✅✅✅（官方推荐） |
注意：选择模式要慎重，这影响到以后缓存、跳转、SEO等不同使用，选择前尽量根据自己以后要实现的内容针对性学习一下
