Next.js 中的 App Router 和 Pages Router 有什么不同？

Question

我已经开始学习next.js了，在Next.js官方文档中：

next.js 官方文档

该文档提到了两个路由器功能；应用程序路由器和页面路由器。

它们之间有什么区别？在什么情况下，其中一种比另一种更合适？

Answer 1

为了轻松理解它，我创建了下面的差异表，根据您的要求，您可以使用所需的路由器，但app router在官方文档中更喜欢。

特征	应用路由器	页面路由器
路由类型	以服务器为中心	客户端
对服务器组件的支持	是的	不
复杂	更复杂	更简单
表现	更好的	更差
灵活性	更灵活	灵活性较差

另请参阅最新的 Nextjs 13 代码模板 Next.js 13+ Power Snippets | TypeScript/Javascript

它包含广泛的代码片段，适用于ts和js. 在这里查找所有片段

Answer 2

主要区别：

特征	应用路由器	页面路由器
基于文件的路由	使用嵌套文件夹来定义路由	文件直接代表路由
成分	默认服务器组件	默认客户端组件
数据获取	fetch函数用于获取数据	getServerSideProps、getStaticProps、getInitialProps
布局	布局可以是嵌套的和动态的	布局是静态的
动态路线	支持，但语法不同	支持的
客户端导航	由 router.push 支持	支持 Link 组件
优先事项	优先于页面路由器	如果 App Router 中没有匹配的路由，则回退

其他注意事项：

• SEO：应用程序目录中的页面默认由服务器呈现，这可能更适合 SEO。
• 性能：应用程序目录中的服务器组件可以提供性能优势。
• 灵活性：App Router 为嵌套布局和数据获取提供了更大的灵活性。
• 迁移：将现有项目迁移到 App Router 可能需要一些努力。

建议：

• 新项目：从 App Router 开始，因为它具有现代功能和灵活性。
• 现有项目：在迁移到 App Router 之前评估潜在优势。
• 简单路由：页面路由器可能足以满足具有简单路由需求的小型项目。
• 复杂的路由和数据要求：App Router 可能是更好的选择。