域名主机 网站建设无锡百度
#题引：我认为跟着官方文档学习不会走歪路
一：App Router与Page Router
在 v13 版本中，Next.js 引入了一个基于 React 服务器组件 构建的新的 App Router，而在这之前，Next.js 使用的是Page Router。
- 目录结构
pages目录：使用传统的文件系统路由，每个文件对应一个路由。页面组件通常是 React 组件。
app目录：引入了全新的路由机制，支持更灵活的布局和嵌套路由。可以使用服务端组件、客户端组件和布局。 - 服务端组件
pages目录：不支持服务端组件，只能使用客户端组件和传统的数据获取方法（如 getServerSideProps 和 getStaticProps）。
app目录：原生支持服务端组件，可以直接在组件中获取数据，简化了数据获取流程。 - 数据获取
pages目录：通过 getStaticProps、getServerSideProps 和 getStaticPaths 来处理数据获取。
app目录：可以使用 React 的 async 组件，直接在组件中获取数据，简化了数据处理。 - 布局
pages目录：布局通常需要在每个页面中显式定义。
app目录：支持嵌套布局，可以在不同层级的目录中定义布局，提升了组件复用性。 - 文件名约定
pages目录：文件名直接对应路由。
app目录：除了文件名外，还可以使用 layout.js、page.js 等特殊文件名来定义布局和页面。 - 静态和动态路由
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 组件按特定层次结构渲染
在嵌套路由中，段的组件将嵌套在其父段的组件内部
