Next.js App Router 概述 -- 知识铺

应用路由器

Next.js App Router 引入了一种新模型，用于使用 React 的最新功能（例如服务器组件、Suspense 流式传输和服务器操作）构建应用程序。

通过创建您的第一个页面开始使用 App Router。

您故意无法访问原始请求对象。但是，您可以通过仅服务器功能访问 headers 和 cookies 。您还可以设置cookie。

布局不会重新渲染。它们可以被缓存和重用，以避免在页面之间导航时不必要的计算。

通过限制布局访问原始请求，Next.js 可以防止布局内执行可能缓慢或昂贵的用户代码，这可能会对性能产生负面影响。

此设计还强制不同页面的布局保持一致且可预测的行为，从而简化了开发和调试。

根据您正在构建的 UI 模式，并行路由允许您在同一布局中呈现多个页面，并且页面可以访问路由段以及 URL 搜索参数。

默认情况下，页面是服务器组件。您可以通过 params 属性访问路由段，并通过给定页面的 searchParams 属性访问 URL 搜索参数。

如果您使用客户端组件，则可以使用 usePathname 、 useSelectedLayoutSegment 和 useSelectedLayoutSegments 来实现更复杂的路由。

此外，根据您正在构建的 UI 模式，并行路由允许您在同一布局中呈现多个页面，并且页面可以访问路由段以及 URL 搜索参数。

您可以使用 redirect 从页面重定向到相对或绝对 URL。 redirect 是临时 (307) 重定向，而 permanentRedirect 是永久 (308) 重定向。当这些函数在流式 UI 时使用时，它们将插入一个元标记以在客户端发出重定向。

以下是一些支持 App Router 的常见身份验证解决方案：

您可以使用 cookies 函数在服务器操作或路由处理程序中设置 cookie。

由于 HTTP 不允许在流式传输开始后设置 cookie，因此您无法直接从页面或布局设置 cookie。您还可以从中间件设置 cookie。

如果您希望构建一个为多个租户提供服务的 Next.js 应用程序，我们已经构建了一个示例来展示我们推荐的架构。

Next.js 中有多层缓存，因此有多种方法可以使缓存的不同部分失效。了解有关缓存的更多信息。

是的。您可以查看 Next.js Commerce 或 Platforms Starter Kit，了解使用开源 App Router 的两个较大示例。