Skip to main content

应用路由

Next.js App Router 引入了一种使用 React 最新功能（例如 服务器组件、使用 Suspense 的流式 和 服务器操作）构建应用的新模型。

¥The Next.js App Router introduces a new model for building applications using React's latest features such as Server Components, Streaming with Suspense, and Server Actions.

创建你的第一页 开始使用 App Router。

¥Get started with the App Router by creating your first page.

常见问题​

¥Frequently Asked Questions

如何访问布局中的请求对象？​

¥How can I access the request object in a layout?

你故意无法访问原始请求对象。但是，你可以通过仅服务器功能访问 headers 和 cookies。你也可以 设置 cookie。

¥You intentionally cannot access the raw request object. However, you can access headers and cookies through server-only functions. You can also set cookies.

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

¥Layouts do not rerender. They can be cached and reused to avoid unnecessary computation when navigating between pages. By restricting layouts from accessing the raw request, Next.js can prevent the execution of potentially slow or expensive user code within the layout, which could negatively impact performance.

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

¥This design also enforces consistent and predictable behavior for layouts across different pages, which simplifies development and debugging.

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

¥Depending on the UI pattern you're building, Parallel Routes allow you to render multiple pages in the same layout, and pages have access to the route segments as well as the URL search params.

如何访问页面上的 URL？​

¥How can I access the URL on a page?

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

¥By default, pages are Server Components. You can access the route segments through the params prop and the URL search params through the searchParams prop for a given page.

如果你使用客户端组件，则可以使用 usePathname、useSelectedLayoutSegment 和 useSelectedLayoutSegments 来实现更复杂的路由。

¥If you are using Client Components, you can use usePathname, useSelectedLayoutSegment, and useSelectedLayoutSegments for more complex routes.

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

¥Further, depending on the UI pattern you're building, Parallel Routes allow you to render multiple pages in the same layout, and pages have access to the route segments as well as the URL search params.

如何从服务器组件重定向？​

¥How can I redirect from a Server Component?

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

¥You can use redirect to redirect from a page to a relative or absolute URL. redirect is a temporary (307) redirect, while permanentRedirect is a permanent (308) redirect. When these functions are used while streaming UI, they will insert a meta tag to emit the redirect on the client side.

如何使用 App Router 处理身份验证？​

¥How can I handle authentication with the App Router?

以下是一些支持 App Router 的常见身份验证解决方案：

¥Here are some common authentication solutions that support the App Router:

我如何设置 cookies？​

¥How can I set cookies?

你可以使用 cookies 功能在 服务器操作 或 路由处理程序 中设置 cookie。

¥You can set cookies in Server Actions or Route Handlers using the cookies function.

由于 HTTP 不允许在流式传输开始后设置 cookie，因此你无法直接从页面或布局设置 cookie。你还可以设置来自 中间件 的 cookie。

¥Since HTTP does not allow setting cookies after streaming starts, you cannot set cookies from a page or layout directly. You can also set cookies from Middleware.

如何构建多租户应用？​

¥How can I build multi-tenant apps?

如果你希望构建一个为多个租户提供服务的 Next.js 应用，我们有 建立了一个例子 展示了我们推荐的架构。

¥If you are looking to build a single Next.js application that serves multiple tenants, we have built an example showing our recommended architecture.

如何使 App Router 缓存失效？​

¥How can I invalidate the App Router cache?

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

¥There are multiple layers of caching in Next.js, and thus, multiple ways to invalidate different parts of the cache. Learn more about caching.

是否有任何基于 App Router 构建的全面的开源应用？​

¥Are there any comprehensive, open-source applications built on the App Router?

是的。你可以查看 Next.js 商务 或 平台入门套件，了解使用开源 App Router 的两个较大示例。

¥Yes. You can view Next.js Commerce or the Platforms Starter Kit for two larger examples of using the App Router that are open-source.

了解更多​

¥Learn More