---

title: Next.js App Router与Pages Router：对比与迁移

keywords:

• Next.js
• App Router
• Pages Router
• 服务端组件
• 数据获取

description: 对比两代路由与数据获取模型，指导从 Pages Router 迁移到 App Router 的路径与注意事项。

categories:

• 文章资讯
• 技术教程

---

Next.js App Router与Pages Router：对比与迁移

概览

App Router 引入服务端组件与全新的数据与路由组织方式，提升性能与开发体验但需迁移策略。

技术参数（已验证）

• 路由：app/ 基于文件的嵌套路由与布局；pages/ 传统基于页面。
• 数据：App Router 强调服务端数据获取与流式渲染；Pages 以客户端/SSR 方法为主。
• 组件：Server/Client 组件分层，减少客户端包体与水合开销。

实战清单

• 识别适合服务端组件的内容与数据获取路径，分阶段迁移。
• 统一约定各层的副作用与依赖，避免水合错误。