应用路由 (App Router)
Next.js 应用路由 (App Router) 引入了一种新的应用构建模式,支持 React 最新功能如 服务端组件 (Server Components)、Suspense 流式渲染 (Streaming with Suspense) 和 服务端操作 (Server Actions)。
通过 创建第一个页面 开始使用应用路由 (App Router)。
常见问题
如何在布局中访问请求对象?
出于设计考虑,您无法直接访问原始请求对象。但可以通过服务端专用函数访问 headers
和 cookies
。您也可以 设置 cookies。
布局 (Layouts) 不会重新渲染。它们可以被缓存并在页面间导航时复用,以避免不必要的计算。通过限制布局访问原始请求,Next.js 可以防止在布局中执行可能影响性能的耗时用户代码。
这种设计还确保了不同页面间布局行为的一致性和可预测性,简化了开发和调试流程。
根据您构建的 UI 模式,并行路由 (Parallel Routes) 允许您在同一个布局中渲染多个页面,这些页面可以访问路由段和 URL 查询参数。
如何在页面中访问 URL?
默认情况下,页面是服务端组件 (Server Components)。您可以通过 params
属性访问路由段,通过 searchParams
属性访问 URL 查询参数。
如果使用客户端组件 (Client Components),可以使用 usePathname
、useSelectedLayoutSegment
和 useSelectedLayoutSegments
来处理更复杂的路由。
此外,根据您构建的 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 Commerce 或 Platforms Starter Kit,这是两个使用应用路由 (App Router) 的大型开源示例。