CodeXunNext.js 系列之 app router 和 page router 的区别
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 对象动态设置页面标题、描述等。
// App Router 页面示例（app/page.js）
export default async function Page() {
const data = await fetchData(); // 直接异步获取数据
return <div>{data}</div>;
}
export const metadata = {
title: 'Home Page',
};
- Page Router
• 数据方法：需使用 getStaticProps（SSG）、getServerSideProps（SSR）或 getInitialProps（混合渲染）。
• SEO 静态化：需手动在 \_document.js 或页面组件内设置 <Head> 标签。
// Page Router 页面示例（pages/index.js）
export async function getServerSideProps() {
const data = await fetchData();
return { props: { data } };
}
export default function Page({ data }) {
return <div>{data}</div>;
}
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，旧项目可逐步迁移以利用新特性。
系列文章
Next.js 系列之客户端组件（Client Components）和服务端组件（Server Components）的区别
Next.js 系列之Serverless（无服务器架构）介绍