App Router和Pages Router在Next.js中有什么区别？

Question

23

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

[next.js官方文档链接]

文档提到了两个路由功能：App Router和Pages Router。哪一个对开发来说更好？

有人可以解释一下App Router和Pages Router之间的区别吗？

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

- Ragu

3

如果完整的文章也对非Medium会员开放就好了。 - undefined

尝试使用隐身模式。 - undefined

@kiranvj 仍然无法访问完整的文章。 - undefined

5个回答

2

应用程序路由可能是单页面应用程序的更好选择。尽管静态页面变体对于搜索引擎优化和初始性能可能更好。支持静态网站生成（SSG）。此外，它更简单。

- jube1907

2

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

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

位置：

App Router：App 路由器通常在 _app.js 或 _app.tsx 文件中实现。它包裹整个应用程序，控制所有页面的路由和布局。
Page Router：每个单独的页面组件中都实现了 Page 路由器。它定义了路由逻辑��根据当前路由确定要呈现的内容。

简而言之，App 路由器负责应用程序的整体路由和导航，而 Page 路由器专注于各个页面内部的路由。App 路由器在 _app.js 或 _app.tsx 文件中进行配置，并提供全局路由功能，而 Page 路由器在每个页面组件中实现，处理特定页面的路由。

- ANOOP NAYAK

这是机器生成的文本。 - undefined

写了一个段落来解释两者的作用，然后通过人工智能工具改进了英语和语法，以便解释清晰易懂。 - undefined

-1

你好，

如上所述和可视化展示的那样，使用应用程序路由提供了许多改进。作为开发者，我强烈建议您直接从应用程序路由开始您的项目。我自己目前正在将我的现有项目转换为这种方法，我们公司中的许多其他人也在进行同样的转换。

祝您开发和编码愉快！

- Nikoll

1

这个问题要求的是区别，而不是意见。 - dcolazin

-5

App Router（_app.js）用于配置应用程序范围的设置和组件，例如标题和页脚。页面路由器（位于页面目录中的文件）用于定义路由并处理单个页面的渲染，包括动态路由。通常需要同时学习这两者才能完成一个完整的应用程序。

- bhogan2017

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- krishnaacharyaa · Accepted Answer

为了更容易理解，我创建了下面的差异表格，根据您的要求，您可以使用所需的路由器，但是在官方文档中推荐使用“app router”。

功能 App Router Pages Router 路由类型服务器为中心客户端为中心支持服务器组件是否复杂性更复杂更简单性能更好更差灵活性更灵活不太灵活

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