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

--- 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 组件分层，减少客户端包体与水合开销。 ## 实战清单 - 识别适合服务端组件的内容与数据获取路径，分阶段迁移。 - 统一约定各层的副作用与依赖，避免水合错误。