Next.js 系列之 app router 和 page router 的区别
date
Apr 5, 2025
AI 摘要
slug
nextjs-series-difference-between-app-router-and-page-router
status
Published
tags
front-end
summary
Next.js 中的 App Router（应用路由）和 Page Router（页面路由）是两种不同的路由架构，主要区别在于 目录结构、功能特性、数据加载方式及布局管理。- App Router 是 Next.js 的未来方向，提供更强大的布局管理、流式渲染和服务端组件支持，适合追求高性能和现代特性的项目。- Page Router 适合维护旧项目或简单应用，但功能扩展性较弱。- 建议新项目直接采用 App Router，旧项目可逐步迁移以利用新特性。
type
Post
Next.js 中的 App Router（应用路由）和 Page Router（页面路由）是两种不同的路由架构，主要区别在于 目录结构、功能特性、数据加载方式及布局管理。以下是详细对比：
1. 目录结构与路由定义
特性 | App Router (Next.js 13+) | Page Router (Next.js 12 及更早) |
目录位置 | app 目录 | pages 目录 |
路由生成方式 | 基于文件夹路径定义路由（如 app/about/page.js → /about） | 基于文件名自动生成路由（如 pages/about.js → /about） |
动态路由 | 文件夹名用 [param] 标记（如 app/posts/[id]/page.js） | 文件名用 [param] 标记（如 pages/posts/[id].js） |
API 路由 | 支持 API 路由（如 app/api/route.ts） | 使用 pages/api 目录 |
2. 核心功能差异
（1）布局与嵌套路由
- App Router
• 嵌套布局：通过
layout.js 文件定义层级布局，自动包裹子页面（如 app/dashboard/layout.js 包裹 app/dashboard/page.js）。• 模板与错误处理：支持
template.js（局部刷新布局）和 error.js（错误边界）。• 流式加载：通过
loading.js 定义页面加载时的骨架屏。- Page Router
• 全局布局：需通过
_app.js 和 _document.js 自定义全局布局，无法自动嵌套。• 手动处理嵌套：需在组件内显式引入布局（如
<Layout><Page /></Layout>）。（2）数据加载
- App Router
• 服务端数据获取：组件可直接使用
async/await 获取数据（默认为 React Server Component）。• 并行加载：通过
<Suspense> 分块加载多个数据源。• 动态 SEO：通过导出
metadata 对象动态设置页面标题、描述等。- Page Router
• 数据方法：需使用
getStaticProps（SSG）、getServerSideProps（SSR）或 getInitialProps（混合渲染）。• SEO 静态化：需手动在
_document.js 或页面组件内设置 <Head> 标签。3. 渲染模式与性能
特性 | App Router | Page Router |
默认渲染模式 | 支持 React Server Components（服务端组件优先） | 默认客户端渲染（需手动选择 SSG/SSR） |
流式渲染（Streaming） | 支持分块传输内容，优先显示关键部分 | 需自行实现（如使用 React.lazy） |
静态生成（SSG） | 通过 generateStaticParams 预生成动态路由 | 通过 getStaticPaths 预生成路由 |
4. 混合使用与迁移
- 共存支持：Next.js 13+ 允许
app和pages目录共存，可逐步迁移旧项目。
- 优先级：若同一路由在
app和pages中均有定义，app目录的页面优先。
- 适配性：部分第三方库（如
next-auth）可能需调整配置以兼容 App Router。
5. 适用场景对比
场景 | App Router 优势 | Page Router 优势 |
新项目 | ✅ 推荐使用（功能更现代，性能更优） | ❌ 不推荐 |
旧项目维护 | ⚠️ 需逐步迁移 | ✅ 适合保留原有结构 |
复杂布局需求 | ✅ 嵌套布局和模板支持完善 | ❌ 需手动管理嵌套 |
服务端组件需求 | ✅ 默认支持服务端渲染和数据获取 | ❌ 需通过 getServerSideProps 实现 |
总结
- App Router 是 Next.js 的未来方向，提供更强大的布局管理、流式渲染和服务端组件支持，适合追求高性能和现代特性的项目。
- Page Router 适合维护旧项目或简单应用，但功能扩展性较弱。
- 建议新项目直接采用 App Router，旧项目可逐步迁移以利用新特性。