简介

应用路由 (App Router)

Next.js 应用路由 (App Router) 是利用 React 最新功能构建应用程序的新范式。如果您已经熟悉 Next.js,会发现应用路由是现有页面路由 (Pages Router) 基于文件系统路由的自然演进。

对于新应用,我们推荐使用应用路由。对于现有应用,您可以逐步迁移到应用路由。也可以在同一个应用中同时使用两种路由。

常见问题

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

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

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

这种设计还确保了布局在不同页面间具有一致且可预测的行为,简化了开发和调试过程,因为开发者可以信赖布局的行为不会因应用的具体页面而改变。

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

如何在页面中访问 URL?

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

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

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

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

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

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

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

如何设置 cookies?

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

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

如何构建多租户应用?

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

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

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

是否有基于应用路由构建的综合开源应用?

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

了解更多