mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Getting Started Docs: Clean up docs/app and docs/pages pages (#78151)
Closes: https://linear.app/vercel/issue/DOC-4498/clean-up-appdocs - Went through the FAQ on the page and made sure the information is found in other places in our docs. - With the IA changes, we shouldn't need a FAQ that duplicates information. - We can have a dedicated App Router FAQ page in the future - if there's a need for it.
This commit is contained in:
Delba de Oliveira
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Upgrade
|
||||
title: How to upgrade your Next.js app
|
||||
nav_title: Upgrading
|
||||
description: Learn how to upgrade your Next.js application to the latest version.
|
||||
related:
|
||||
title: Version guides
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: How to build multi-tenant apps in Next.js
|
||||
nav_title: Multi-tenant
|
||||
description: Learn how to build multi-tenant apps with the App Router.
|
||||
---
|
||||
|
||||
If you are looking to build a single Next.js application that serves multiple tenants, we have [built an example](https://vercel.com/templates/next.js/platforms-starter-kit) showing our recommended architecture.
|
||||
@@ -119,6 +119,14 @@ export default function RootLayout({ children }) {
|
||||
|
||||
## Caveats
|
||||
|
||||
### How can I access the request object in a layout?
|
||||
|
||||
You intentionally cannot access the raw request object in a layout. However, you can access [`headers`](/docs/app/api-reference/functions/headers) and [`cookies`](/docs/app/api-reference/functions/cookies) through server-only functions.
|
||||
|
||||
[Layouts](/docs/app/building-your-application/routing/layouts-and-templates#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.
|
||||
|
||||
### Layouts do not receive `searchParams`
|
||||
|
||||
Unlike [Pages](/docs/app/api-reference/file-conventions/page), Layout components **do not** receive the `searchParams` prop. This is because a shared layout is [not re-rendered during navigation](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering) which could lead to stale `searchParams` between navigations.
|
||||
|
||||
+7
-70
@@ -1,74 +1,11 @@
|
||||
---
|
||||
title: App Router
|
||||
description: Use the new App Router with Next.js' and React's latest features, including Layouts, Server Components, Suspense, and more.
|
||||
description: The App Router is a file-system based router that uses React's latest features such as Server Components, Suspense, Server Functions, and more.
|
||||
related:
|
||||
title: Next Steps
|
||||
description: Get started by following the installation guide.
|
||||
links:
|
||||
- app/getting-started/installation
|
||||
---
|
||||
|
||||
The Next.js App Router introduces a new model for building applications using React's latest features such as [Server Components](/docs/app/building-your-application/rendering/server-components), [Streaming with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
|
||||
|
||||
Get started with the App Router by [creating your first page](/docs/app/building-your-application/routing/layouts-and-templates).
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
### How can I access the request object in a layout?
|
||||
|
||||
You intentionally cannot access the raw request object. However, you can access [`headers`](/docs/app/api-reference/functions/headers) and [`cookies`](/docs/app/api-reference/functions/cookies) through server-only functions. You can also [set cookies](#how-can-i-set-cookies).
|
||||
|
||||
[Layouts](/docs/app/building-your-application/routing/layouts-and-templates#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.
|
||||
|
||||
Depending on the UI pattern you're building, [Parallel Routes](/docs/app/building-your-application/routing/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 access the URL on a page?
|
||||
|
||||
By default, pages are Server Components. You can access the route segments through the [`params`](/docs/app/api-reference/file-conventions/page#params-optional) prop and the URL search params through the [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop for a given page.
|
||||
|
||||
If you are using Client Components, you can use [`usePathname`](/docs/app/api-reference/functions/use-pathname), [`useSelectedLayoutSegment`](/docs/app/api-reference/functions/use-selected-layout-segment), and [`useSelectedLayoutSegments`](/docs/app/api-reference/functions/use-selected-layout-segments) for more complex routes.
|
||||
|
||||
Further, depending on the UI pattern you're building, [Parallel Routes](/docs/app/building-your-application/routing/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?
|
||||
|
||||
You can use [`redirect`](/docs/app/api-reference/functions/redirect) to redirect from a page to a relative or absolute URL. [`redirect`](/docs/app/api-reference/functions/redirect) is a temporary (307) redirect, while [`permanentRedirect`](/docs/app/api-reference/functions/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.
|
||||
|
||||
### How can I handle authentication with the App Router?
|
||||
|
||||
Here are some common authentication solutions that support the App Router:
|
||||
|
||||
- [NextAuth.js](https://authjs.dev/getting-started/installation?framework=next.js)
|
||||
- [Clerk](https://clerk.com/docs/quickstarts/nextjs)
|
||||
- [Stack Auth](https://docs.stack-auth.com/getting-started/setup)
|
||||
- [Auth0](https://github.com/auth0/nextjs-auth0#app-router)
|
||||
- [Stytch](https://stytch.com/docs/sdks/resources/nextjs)
|
||||
- [Kinde](https://docs.kinde.com/developer-tools/sdks/backend/nextjs-sdk/)
|
||||
- [WorkOS](https://workos.com/docs/user-management/nextjs)
|
||||
- Or manually handling sessions or JWTs
|
||||
|
||||
### How can I set cookies?
|
||||
|
||||
You can set cookies in [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies) or [Route Handlers](/docs/app/building-your-application/routing/route-handlers) using the [`cookies`](/docs/app/api-reference/functions/cookies) function.
|
||||
|
||||
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](/docs/app/building-your-application/routing/middleware#using-cookies).
|
||||
|
||||
### How can I build multi-tenant apps?
|
||||
|
||||
If you are looking to build a single Next.js application that serves multiple tenants, we have [built an example](https://vercel.com/templates/next.js/platforms-starter-kit) showing our recommended architecture.
|
||||
|
||||
### How can I invalidate the App Router cache?
|
||||
|
||||
There are multiple layers of caching in Next.js, and thus, multiple ways to invalidate different parts of the cache. [Learn more about caching](/docs/app/building-your-application/caching).
|
||||
|
||||
### Are there any comprehensive, open-source applications built on the App Router?
|
||||
|
||||
Yes. You can view [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce) or the [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit) for two larger examples of using the App Router that are open-source.
|
||||
|
||||
## Learn More
|
||||
|
||||
- [Routing Fundamentals](/docs/app/building-your-application/routing)
|
||||
- [Data Fetching and Caching](/docs/app/building-your-application/data-fetching/fetching)
|
||||
- [Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration)
|
||||
- [Forms and Mutations](/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
|
||||
- [Caching](/docs/app/building-your-application/caching)
|
||||
- [Rendering Fundamentals](/docs/app/building-your-application/rendering)
|
||||
- [Server Components](/docs/app/building-your-application/rendering/server-components)
|
||||
- [Client Components](/docs/app/building-your-application/rendering/client-components)
|
||||
The **App Router** is a file-system based router that uses React's latest features such as [Server Components](https://react.dev/reference/rsc/server-components), [Suspense](https://react.dev/reference/react/Suspense), and [Server Functions](https://react.dev/reference/rsc/server-functions).
|
||||
|
||||
@@ -3,6 +3,8 @@ title: Pages Router
|
||||
description: Before Next.js 13, the Pages Router was the main way to create routes in Next.js with an intuitive file-system router.
|
||||
---
|
||||
|
||||
Before Next.js 13, the Pages Router was the main way to create routes in Next.js. It used an intuitive file-system router to map each file to a route. The Pages Router is still supported in newer versions of Next.js, but we recommend migrating to the new [App Router](/docs/app) to leverage React's latest features.
|
||||
> You're viewing the documentation for the Pages Router. See the [App Router](/docs/app) documentation for the latest features.
|
||||
|
||||
Use this section of the documentation for existing applications that use the Pages Router.
|
||||
The **Pages Router** uses an intuitive file-system router to map each file to a route.
|
||||
|
||||
Before Next.js 13, the Pages Router was the main way to create routes in Next.js. It's still supported in newer versions of Next.js, but we recommend migrating to the new [App Router](/docs/app) to leverage React's latest features.
|
||||
|
||||
Reference in New Issue
Block a user