Next.js：应用路由器 vs 页面路由器

我们来谈谈如何设置 Next.js 项目，重点是如何在 App Router 和 Pages Router 之间进行选择。在我深入研究 React 的过程中，我最初接触了 create-react-app 命令，它让设置过程和理解基本文件结构变得非常容易。然而，后来发现 create-react-app 已经不再推荐使用，于是我开始使用 Next.js。

事实证明，过渡到 Next.js 的学习曲线更加陡峭，与“create-react-app”相比，其设置的复杂性也更加凸显。以下列出了运行“create-next-app”时可能会遇到的问题。

npx create-next-app@latest mysite
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) › No / Yes

当您刚接触 Next.js 时，决定使用 Pages Router 还是 App Router 可能会令人困惑，并且无法立即清楚了解每个路由器如何影响项目的文件结构。

页面路由器

初次接触 Next.js 时，Pages Router 似乎是个简单的选择。它基于一个简单的原则：pages 目录。你在这个目录中创建一个文件，就这样，你就为你的网站创建了一个新网页（或路由）。这个过程对初学者非常友好，因为它遵循将文件结构直接链接到网站 URL 路径的约定。例如，如果你想在你的网站上添加一个 /contact 页面，你只需在 pages 目录中创建一个 contact.js 文件即可。然而，作为初学者，你可能无法立即看出在路由器之间的选择会对项目的长期组织和可扩展性产生怎样的影响。

这是页面路由器结构（没有 src 目录）

Pages/
├── _app.js
├── _document.js
└── index.js
Styles/
├── global.css
├── Home.module.css

应用路由器

Next.js 后续版本引入了应用路由器 (App Router)，它提供了一种更明确的路由方法。与 Pages 路由器不同，Pages 路由器会根据 pages 目录中的文件名隐式创建路由，而应用路由器则要求你在应用目录中使用 JavaScript API 定义路由。这种方法赋予了更大的控制力和灵活性，尤其适用于具有复杂路由需求或动态内容的项目。对于初学者来说，应用路由器会带来一定程度的复杂性，需要从一开始就深入了解 Next.js 的概念。这是一种实践性很强的方法，一开始可能不太容易理解，尤其是在尝试理解它与 Pages 路由器的简洁性有何不同，以及它如何影响应用程序的结构和开发时。

这是应用程序路由器结构（没有 src 目录）

app/
├── favicon.ico
├── global.css
├── layout.js
├── page.js
└── page.module.css

初学者的主要区别

简洁 vs. 控制：如果您追求简洁，Pages Router 是您的不二之选。它非常适合静态网站或路由需求简单的应用。而 App Router 则能提供更强的控制力，更适合复杂的路由场景。

约定 vs. 配置：使用 Pages Router 时，你需要遵循约定（文件名和结构）。而 App Router 更注重配置，你需要通过代码定义路由。

动态路由：两种路由器都支持动态路由，但 App Router 提供了更明确的方法，对于复杂情况可能更易于管理和理解。

学习曲线：Pages Router 通常对初学者来说更容易掌握。App Router 引入的概念对于那些熟悉其他 JavaScript 框架或有更复杂路由需求的人来说可能更熟悉。

您应该选择哪一个？

如果您刚刚起步，不妨先尝试一下 Pages Router。它前期管理工作较少，您可以快速搭建并运行网站。随着您对 Next.js 的熟悉程度不断提升，或者项目的路由需求变得更加复杂，考虑使用 App Router 可能会带来颠覆性的改变，它能为您提供管理更复杂路由模式的灵活性和能力。

更多详细信息请参阅官方文档。Next.js项目结构