“App Router”在 Next.js 13 中引入，现已成为标准。这个概念与之前的 Pages Router 相比发生了很大的变化，因此有些人可能仍然对迁移犹豫不决。 本文提供了了解 App Router 基础知识的分步指南。
第 1 步：了解目录结构的差异
在之前的 Pages Router 中，“pages”目录中的文件名被用作 URL 路由（例如，“pages/about.tsx”→“/about”）。
App Router 使用“app”目录。 URL 路由由文件夹名称确定，并且规则已更改为始终将名为“page.tsx”的文件放置在该文件夹中（例如“app/about/page.tsx”→“/about”）。 虽然乍一看这似乎很麻烦，但它有一个很大的优点，可以让与路由无关的组件和测试文件共存于同一个文件夹中。
第 2 步：理解布局概念
App Router 的一个强大功能是“布局”。
创建 app/layout.tsx 允许您将通用 UI（页眉、页脚等）应用到该文件夹下的所有页面。
值得注意的是，这个Layout部分在页面转换时并没有重新渲染。这样可以在保留状态的同时实现平滑的屏幕转换，从而极大地提高应用程序性能。
步骤 3：在服务器和客户端之间划清界限
这是最重要的变化。 App Router 中的组件默认为 React Server Components（在服务器端运行的组件）。 您不能在服务器组件内使用浏览器 API（例如“window”）或 React hook（例如“useState”和“useEffect”）。
如果需要按钮单击事件等，则需要通过在文件顶部写入“use client”来显式将其转换为客户端组件。 App Router 成功的关键是要记住“基本上，服务器执行一些轻微渲染，只有交互部分留给客户端。”
步骤 4：简化数据获取
以前所需的 Next.js 特定函数（例如“getServerSideProps”和“getStaticProps”）已被弃用。 相反，只需在组件中直接通过“await”使用标准“fetch” API。 Next.js 内部扩展了 fetch ，现在您只需使用 fetch 的可选参数即可直观地控制缓存。
如果你一步步理解它，App Router 并不可怕。请向更先进、更快的 Web 应用程序开发迈出第一步。