Next.js 13引入了App Router作为Pages Router的替代方案。到2024年，App Router是默认和推荐的方法。以下是实际上改变了什么以及如何推理它。
思维模式转变
Pages Router（next/router，/pages目录，getServerSideProps/getStaticProps）是一个文件系统路由系统，每个页面是在服务器上或构建时渲染的React组件。App Router（/app目录）将React服务器组件（RSC）实现为默认值，从根本上改变了什么在哪里运行。在Pages Router中：除非使用getServerSideProps/getStaticProps明确退出，否则所有内容都是客户端组件（在浏览器中运行）。在App Router中：默认情况下所有内容都是服务器组件（在服务器上运行，不能使用钩子、事件处理程序或浏览器API）；通过在文件顶部添加’use client’来选择客户端渲染。关键含义：服务器组件可以直接访问数据库、文件系统和服务器机密（不暴露API密钥），在服务器上渲染，只发送HTML到客户端——减少JavaScript包大小。
布局系统
App Router的布局系统用嵌套布局方法替换了_app.js和_document.js。layout.tsx文件包装其子项和所有嵌套路由——/app/dashboard/layout.tsx的布局包装/dashboard下的每个页面。布局在导航中持久（当你在共享布局的路由之间导航时它们不会重新渲染）。这对于持久侧边栏导航、经过身份验证的布局包装器和共享UI很有用。加载状态：loading.tsx文件提供自动Suspense边界——在page.tsx旁边放置loading.tsx，Next.js在页面渲染时自动显示加载UI。错误处理：error.tsx文件捕获其路由段的错误。Template.tsx：像layout.tsx但在每次导航时重新渲染（用于页面级动画或表单重置行为）。
数据获取
旧API（getServerSideProps、getStaticProps、getStaticPaths）完全被App Router的方法替换。在服务器组件中，没有缓存配置的fetch调用现在在Next.js中默认缓存——`fetch(url)`类似`getStaticProps`；`fetch(url, {cache: ‘no-store’})`类似`getServerSideProps`。重新验证：`{next: {revalidate: 60}}`每60秒重新验证缓存数据（相当于Pages Router中的ISR）。服务器操作：表单可以直接提交到服务器端函数而无需API路由（`’use server’`指令）——表单数据POST到可以写入数据库的服务器函数。这大大减少了表单处理的样板代码。实际风险：缓存行为在Next.js版本13、14和15之间有显著变化。Next.js 15将fetch缓存改为可选（默认不缓存）——检查你使用的版本，因为默认行为在各版本之间不一致。
迁移策略
Pages Router和App Router可以在同一个Next.js项目中共存——/pages路由和/app路由同时工作。推荐的迁移：在App Router中启动新功能；增量迁移现有页面；不要一次性重写整个应用程序。何时不迁移：如果你的Pages Router应用运行良好，且没有需要App Router功能的即时功能需求，迁移不紧迫。App Router有真正的学习曲线；将大型Pages Router应用转换为任何非平凡应用都是数周的项目。
