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

Question

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

next.js 官方文档

该文档提到了两个路由器功能；应用程序路由器和页面路由器。哪一个最适合开发？

谁能解释一下 App Router 和 Pages Router 之间的区别吗？

我应该学习两者还是一个？

Answer 1

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

app router

。

特点	应用程序路由器	页面路由器
路由类型	以服务器为中心	客户端
支持服务器组件	是的	没有
复杂性	更复杂	更简单
性能	更好	更糟
灵活性	更灵活	不太灵活

---

另请参阅最新的 Nextjs 13 代码模板 Next.js 13+ 强大片段 | TypeScript/Javascript

它包含

ts

和

js

的广泛代码片段。查找所有片段 此处

---

Answer 2

在Next.js中，有两种类型的路由器：App路由器和Page路由器。让我们逐点讨论它们之间的差异：

目的：

1. 应用程序路由器：应用程序路由器处理整个应用程序的整体路由和导航。它负责根据 URL 渲染正确的页面并管理页面之间的转换。
2. 页面路由器：页面路由器处理应用程序各个页面内的路由。它允许您定义动态路由并访问路由参数以在页面上呈现特定内容。
   
   

地点：

1. 应用程序路由器：应用程序路由器通常在 _app.js 或 _app.tsx 文件中实现。它包装您的整个应用程序并控制所有页面的路由和布局。
2. 页面路由器：页面路由器在每个单独的页面组件中实现。它定义了路由逻辑，根据当前路由决定要渲染的内容。
   
   
   简而言之，应用程序路由器负责应用程序的整体路由和导航，而页面路由器则专注于各个页面内的路由。应用路由器在 _app.js 或 _app.tsx 文件中配置，并提供全局路由功能，而页面路由器在每个页面组件内实现，并处理特定于该页面的路由。

Answer 3

你好，

如上面所解释和直观地说明的，使用应用程序路由提供了许多改进。作为开发人员，我强烈建议您直接使用应用程序路由启动项目。我本人目前正在将现有项目转换为这种方法，我们公司的许多其他项目也是如此。

享受开发和编码的乐趣！

Answer 4

应用程序路由器 (_app.js) 用于配置应用程序范围的设置和组件，例如页眉和页脚。页面路由器（页面目录中的文件）用于定义路由并处理单个页面渲染，包括动态路由。您通常需要学习两者才能完成完整的申请。