Next.js- App Router 概览

#题引：我认为跟着官方文档学习不会走歪路

一：App Router与Page Router

在 v13 版本中，Next.js 引入了一个基于 React 服务器组件 构建的新的 App Router，而在这之前，Next.js 使用的是Page Router。

1. 目录结构
   pages 目录：使用传统的文件系统路由，每个文件对应一个路由。页面组件通常是 React 组件。
   app 目录：引入了全新的路由机制，支持更灵活的布局和嵌套路由。可以使用服务端组件、客户端组件和布局。
2. 服务端组件
   pages 目录：不支持服务端组件，只能使用客户端组件和传统的数据获取方法（如 getServerSideProps 和 getStaticProps）。
   app 目录：原生支持服务端组件，可以直接在组件中获取数据，简化了数据获取流程。
3. 数据获取
   pages 目录：通过 getStaticProps、getServerSideProps 和 getStaticPaths 来处理数据获取。
   app 目录：可以使用 React 的 async 组件，直接在组件中获取数据，简化了数据处理。
4. 布局
   pages 目录：布局通常需要在每个页面中显式定义。
   app 目录：支持嵌套布局，可以在不同层级的目录中定义布局，提升了组件复用性。
5. 文件名约定
   pages 目录：文件名直接对应路由。
   app 目录：除了文件名外，还可以使用 layout.js、page.js 等特殊文件名来定义布局和页面。
6. 静态和动态路由
   pages 目录：静态和动态路由都可以通过文件名实现，但动态路由的处理相对复杂。
   app 目录：动态路由和静态路由处理更加灵活，可以使用文件夹和文件组合来实现。
   
   app 目录与 pages 目录一起工作时，App Router 优先级高于 Pages Router，这使你可以将应用程序的某些路由选择使用新行为，同时保持其他路由在 pages 目录中使用以前的行为。

二：App Router的一些规定

文件与路由的映射

在 app 目录中，每个文件和文件夹都会自动映射为一个路由。例如，app/dashboard/settings文件会对应 /dashboard/settings路由, 要创建嵌套路由，可以将文件夹嵌套在一起。

特殊文件

使用特殊的 page.js 文件（特殊文件可以使用 .js、.jsx、.ts 或 .tsx 文件扩展名） 可以使路由段公开访问，在下面这张图中，在这个例子中，/dashboard/analytics URL 路径是不可公开访问的，因为它没有对应的 page.js 文件。这个文件夹可以用来存储组件、样式表、图片或其他相关文件。

所以，路由是一个从根文件夹到包含 page.js 文件的最终叶子文件夹的嵌套文件夹的单一路径。

文件约定：Next.js 提供了一组特殊文件，用于在嵌套路由中创建具有特定行为的 UI

组件层次结构

使用特殊文件约定来为每个路由段（路由中的每个文件夹代表一个路由段，如/dashboard/settings中的dashboard和settings）创建 UI.

路由段中特殊文件中定义的 React 组件按特定层次结构渲染

在嵌套路由中，段的组件将嵌套在其父段的组件内部