简介

应用路由 (App Router)

Next.js 应用路由 (App Router) 引入了一种新的应用构建模式,支持 React 最新功能如 服务端组件 (Server Components)Suspense 流式渲染 (Streaming with Suspense)服务端操作 (Server Actions)

通过 创建第一个页面 开始使用应用路由 (App Router)。

常见问题

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

出于设计考虑,您无法直接访问原始请求对象。但可以通过服务端专用函数访问 headerscookies。您也可以 设置 cookies

布局 (Layouts) 不会重新渲染。它们可以被缓存并在页面间导航时复用,以避免不必要的计算。通过限制布局访问原始请求,Next.js 可以防止在布局中执行可能影响性能的耗时用户代码。

这种设计还确保了不同页面间布局行为的一致性和可预测性,简化了开发和调试流程。

根据您构建的 UI 模式,并行路由 (Parallel Routes) 允许您在同一个布局中渲染多个页面,这些页面可以访问路由段和 URL 查询参数。

如何在页面中访问 URL?

默认情况下,页面是服务端组件 (Server Components)。您可以通过 params 属性访问路由段,通过 searchParams 属性访问 URL 查询参数。

如果使用客户端组件 (Client Components),可以使用 usePathnameuseSelectedLayoutSegmentuseSelectedLayoutSegments 来处理更复杂的路由。

此外,根据您构建的 UI 模式,并行路由 (Parallel Routes) 允许您在同一个布局中渲染多个页面,这些页面可以访问路由段和 URL 查询参数。

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

您可以使用 redirect 将页面重定向到相对或绝对 URL。redirect 是临时重定向 (307),而 permanentRedirect 是永久重定向 (308)。当在流式渲染 UI 时使用这些函数,它们会插入 meta 标签在客户端触发重定向。

如何在应用路由中处理身份验证?

以下是支持应用路由 (App Router) 的常见身份验证方案:

如何设置 cookies?

您可以在 服务端操作 (Server Actions)路由处理器 (Route Handlers) 中使用 cookies 函数设置 cookies。

由于 HTTP 不允许在流式传输开始后设置 cookies,因此无法直接在页面或布局中设置 cookies。您也可以通过 中间件 (Middleware) 设置 cookies。

如何构建多租户应用?

如果您需要构建一个服务于多个租户的 Next.js 应用,我们提供了 示例项目 展示推荐架构。

如何使应用路由缓存失效?

Next.js 有多层缓存机制,因此有多种方式来使不同部分的缓存失效。了解更多缓存机制

是否有基于应用路由的开源完整应用示例?

有的。您可以查看 Next.js CommercePlatforms Starter Kit,这是两个使用应用路由 (App Router) 的大型开源示例。

了解更多