棕色网站设计,小白node怎么做网站,网站改域名审核时间,wordpress3.5.2下载#题引#xff1a;我认为跟着官方文档学习不会走歪路
一#xff1a;App Router与Page Router
在 v13 版本中#xff0c;Next.js 引入了一个基于 React 服务器组件 构建的新的 App Router#xff0c;而在这之前#xff0c;Next.js 使用的是Page Router。
目录结构 pages …#题引我认为跟着官方文档学习不会走歪路
一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 组件按特定层次结构渲染 在嵌套路由中段的组件将嵌套在其父段的组件内部
