跳至内容
简介应用路由器

应用路由器

Next.js 应用路由器引入了一种构建应用程序的新模型,该模型使用 React 的最新功能,例如 服务器组件使用 Suspense 进行流式传输服务器操作

通过 创建您的第一个页面 开始使用应用路由器。

常见问题

如何在布局中访问请求对象?

您无法有意访问原始请求对象。但是,您可以通过仅服务器端函数访问 headerscookies。您还可以 设置 cookie

布局 不会重新渲染。它们可以被缓存和重复使用,以避免在页面之间导航时进行不必要的计算。通过限制布局访问原始请求,Next.js 可以防止在布局中执行可能缓慢或代价高昂的用户代码,这可能会对性能产生负面影响。

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

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

如何在页面上访问 URL?

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

如果您使用的是客户端组件,则可以使用 usePathnameuseSelectedLayoutSegmentuseSelectedLayoutSegments 来处理更复杂的路由。

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

如何从服务器组件重定向?

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

如何使用应用路由器处理身份验证?

以下是一些支持应用路由器的常见身份验证解决方案

如何设置 Cookie?

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

由于 HTTP 不允许在流开始后设置 Cookie,因此您无法直接从页面或布局设置 Cookie。您也可以从 中间件 设置 Cookie。

如何构建多租户应用程序?

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

如何使 App Router 缓存失效?

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

是否有任何基于 App Router 构建的全面开源应用程序?

是的。您可以查看 Next.js Commerce平台入门套件,以了解使用 App Router 的两个较大的开源示例。

了解更多