App Router
Next.js App Router 引入了一种使用 React 最新功能构建应用程序的新模型,例如 服务器组件、使用 Suspense 进行流式处理 和 服务器操作。
通过创建你的第一个页面开始使用 App Router。
常见问题
如何在布局中访问请求对象?
你无法有意访问原始请求对象。但是,你可以通过仅服务器函数访问 headers
和 cookies
。你也可以设置 Cookie。
布局不会重新渲染。它们可以被缓存和重用,以避免在页面之间导航时进行不必要的计算。通过限制布局访问原始请求,Next.js 可以防止在布局中执行可能缓慢或昂贵的用户代码,这可能会对性能产生负面影响。
此设计还为不同页面上的布局强制执行一致且可预测的行为,从而简化开发和调试。
根据你正在构建的 UI 模式,并行路由 允许你在同一布局中渲染多个页面,并且页面可以访问路由段以及 URL 搜索参数。
如何在页面上访问 URL?
默认情况下,页面是服务器组件。你可以通过 params
属性访问路由段,并通过 searchParams
属性访问给定页面的 URL 搜索参数。
如果你正在使用客户端组件,你可以使用 usePathname
、useSelectedLayoutSegment
和 useSelectedLayoutSegments
来处理更复杂的路由。
此外,根据你正在构建的 UI 模式,并行路由 允许你在同一布局中渲染多个页面,并且页面可以访问路由段以及 URL 搜索参数。
如何从服务器组件重定向?
你可以使用 redirect
从页面重定向到相对或绝对 URL。redirect
是临时重定向 (307),而 permanentRedirect
是永久重定向 (308)。当在流式处理 UI 时使用这些函数时,它们将插入一个 meta 标签以在客户端发出重定向。
如何在 App Router 中处理身份验证?
以下是一些支持 App Router 的常见身份验证解决方案
- NextAuth.js
- Clerk
- Stack Auth
- Auth0
- Stytch
- Kinde
- WorkOS
- 或者手动处理会话或 JWT
如何设置 Cookie?
你可以在 服务器操作 或 路由处理程序 中使用 cookies
函数设置 Cookie。
由于 HTTP 不允许在流式处理开始后设置 Cookie,因此你不能直接从页面或布局设置 Cookie。你也可以从 中间件 设置 Cookie。
如何构建多租户应用?
如果你正在寻找构建一个服务于多个租户的单个 Next.js 应用程序,我们构建了一个示例,展示了我们推荐的架构。
如何使 App Router 缓存失效?
Next.js 中有多个缓存层,因此,有多种方法可以使缓存的不同部分失效。了解有关缓存的更多信息。
是否有基于 App Router 构建的综合性开源应用程序?
是的。你可以查看 Next.js Commerce 或 Platforms Starter Kit,这两个是使用 App Router 的更大的开源示例。
了解更多
开始使用
指南
构建你的应用程序
深入探讨
API 参考
这是否有帮助?