From 2f6054f419aa622bbee06198ca0517cc49c797a0 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:41:49 +0100
Subject: [PATCH] Docs: RC Updates (#70031)

**Do not merge.**

- [x] `staticgeneration*` options
- [x] `next/form` now available in pages, `prefetch` prop added to app
- [x]  ~`next/after` stable~ reverted changes
- [x]  `instrumentation.js` stable
- [x]  More secure server actions
- [x]  Update turbopack docs
    - [x]  https://nextjs.org/docs/architecture/turbopack
- [x] https://nextjs.org/docs/app/api-reference/next-config-js/turbo
    - [x]  Move `turbo` config option out of experimental
- [x]  Document `connection()`
- [x] De-prioritize `unstable_noStore` - add note about using
`connection()`
    - [x]  Replace examples of `noStore` with `connection`
- [x]  Async APIs
    - [x]  Reference Pages
        - [x]  `cookies`
        - [x]  `headers`
        - [x]  `draftMode`
        - [x]  `page.js` (`searchParams` and `params` prop)
        - [x]  `layout.js` (`params` prop)
        - [x]  `route.js` (`params` prop)
        - [x]  `default.js` (`params` prop)
- [x] Clarify `use` usage
https://vercel.slack.com/archives/C06N3AXRQ82/p1726483924090979?thread_ts=1726250070.321229&cid=C06N3AXRQ82
    - [x]  Update **examples** throughout the docs:
        - [x]  `cookies`
        - [x]  `headers`
        - [x]  `draftMode`
        - [x]  `searchParams`
        - [x]  `params`
- [x] Update Dynamic API section in the Server Components Page:
https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering
- [x] Update Dynamic API mentions in Route Handler page:
https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-functions
- [x] Update upgrade guide for Next 15 RC:
https://nextjs.org/docs/app/building-your-application/upgrading/version-15
- [x] Document codemods for async APIs. PR:
https://github.com/vercel/next.js/pull/69572
- [x] Document geo codemod. Done here:
https://github.com/vercel/next.js/pull/70064

Closes: https://linear.app/vercel/issue/DOC-3018/nextjs-15-rc-2

---------

Co-authored-by: Rich Haines <hello@richardhaines.dev>
Co-authored-by: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Co-authored-by: Nikhil S <nikhilsnayak3473@gmail.com>
---
 .../01-routing/13-route-handlers.mdx          |  34 ++--
 .../02-data-fetching/01-fetching.mdx          |   6 +-
 .../03-server-actions-and-mutations.mdx       |  42 +++-
 .../03-rendering/01-server-components.mdx     |  36 ++--
 .../03-rendering/04-partial-prerendering.mdx  |  26 +--
 .../04-caching/index.mdx                      |  42 ++--
 .../06-optimizing/04-metadata.mdx             |   8 +-
 .../06-optimizing/09-instrumentation.mdx      |   2 -
 .../06-optimizing/10-open-telemetry.mdx       |   2 -
 .../03-environment-variables.mdx              |  37 +++-
 .../07-configuring/11-draft-mode.mdx          |  16 +-
 .../15-content-security-policy.mdx            |   8 +-
 .../09-authentication/index.mdx               |  64 +++---
 .../10-deploying/01-production-checklist.mdx  |   2 +-
 .../10-deploying/index.mdx                    |  41 +++-
 .../11-upgrading/01-codemods.mdx              |   2 +-
 .../11-upgrading/02-version-15.mdx            |   2 +-
 .../11-upgrading/04-app-router-migration.mdx  |  16 +-
 .../02-api-reference/01-components/form.mdx   |  90 ++++++++-
 .../01-metadata/app-icons.mdx                 |   4 +-
 .../01-metadata/manifest.mdx                  |   2 +-
 .../01-metadata/opengraph-image.mdx           |   4 +-
 .../01-metadata/robots.mdx                    |   2 +-
 .../01-metadata/sitemap.mdx                   |   2 +-
 .../02-file-conventions/default.mdx           |  33 +++-
 .../02-file-conventions/instrumentation.mdx   |  37 +---
 .../02-file-conventions/layout.mdx            | 158 +++++++++++----
 .../02-file-conventions/not-found.mdx         |   4 +-
 .../02-file-conventions/page.mdx              | 182 +++++++++++++++---
 .../route-segment-config.mdx                  |  22 ++-
 .../02-file-conventions/route.mdx             | 102 +++++++---
 .../04-functions/connection.mdx               |  57 ++++++
 .../02-api-reference/04-functions/cookies.mdx | 100 +++++-----
 .../04-functions/draft-mode.mdx               |  55 ++++--
 .../04-functions/generate-image-metadata.mdx  |   4 +-
 .../04-functions/generate-metadata.mdx        |   4 +-
 .../04-functions/generate-static-params.mdx   |  28 +--
 .../02-api-reference/04-functions/headers.mdx | 102 +++-------
 .../04-functions/unstable_after.mdx           |  52 +++--
 .../04-functions/unstable_noStore.mdx         |   4 +-
 .../04-functions/unstable_rethrow.mdx         |   6 +-
 .../04-functions/use-router.mdx               |   2 +-
 .../05-next-config-js/devIndicators.mdx       |   2 +-
 .../05-next-config-js/instrumentationHook.mdx |  28 ---
 .../05-next-config-js/reactCompiler.mdx       |   2 +-
 .../serverComponentsHmrCache.mdx              |   2 +-
 .../05-next-config-js/staticGeneration.mdx    |  41 ++++
 .../05-next-config-js/turbo.mdx               | 139 +++++++------
 .../02-api-reference/01-components/form.mdx   |   7 +
 .../04-next-config-js/instrumentationHook.mdx |   7 -
 docs/04-architecture/turbopack.mdx            |   4 +-
 errors/app-static-to-dynamic-error.mdx        |   4 +-
 errors/sync-dynamic-apis.mdx                  |   2 +-
 53 files changed, 1088 insertions(+), 592 deletions(-)
 create mode 100644 docs/02-app/02-api-reference/04-functions/connection.mdx
 delete mode 100644 docs/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx
 create mode 100644 docs/02-app/02-api-reference/05-next-config-js/staticGeneration.mdx
 create mode 100644 docs/03-pages/02-api-reference/01-components/form.mdx
 delete mode 100644 docs/03-pages/02-api-reference/04-next-config-js/instrumentationHook.mdx

diff --git a/docs/02-app/01-building-your-application/01-routing/13-route-handlers.mdx b/docs/02-app/01-building-your-application/01-routing/13-route-handlers.mdx
index 292f7719ee78b..628aae57f26bd 100644
--- a/docs/02-app/01-building-your-application/01-routing/13-route-handlers.mdx
+++ b/docs/02-app/01-building-your-application/01-routing/13-route-handlers.mdx
@@ -84,7 +84,7 @@ export async function GET() {
 
 ### Special Route Handlers
 
-Special Route Handlers like [`sitemap.ts`](/docs/app/api-reference/file-conventions/metadata/sitemap), [`opengraph-image.tsx`](/docs/app/api-reference/file-conventions/metadata/opengraph-image), and [`icon.tsx`](/docs/app/api-reference/file-conventions/metadata/app-icons), and other [metadata files](/docs/app/api-reference/file-conventions/metadata) remain static by default unless they use dynamic functions or dynamic config options.
+Special Route Handlers like [`sitemap.ts`](/docs/app/api-reference/file-conventions/metadata/sitemap), [`opengraph-image.tsx`](/docs/app/api-reference/file-conventions/metadata/opengraph-image), and [`icon.tsx`](/docs/app/api-reference/file-conventions/metadata/app-icons), and other [metadata files](/docs/app/api-reference/file-conventions/metadata) remain static by default unless they use Dynamic APIs or dynamic config options.
 
 ### Route Resolution
 
@@ -141,11 +141,7 @@ export async function GET() {
 }
 ```
 
-### Dynamic Functions
-
-Route Handlers can be used with dynamic functions from Next.js, like [`cookies`](/docs/app/api-reference/functions/cookies) and [`headers`](/docs/app/api-reference/functions/headers).
-
-#### Cookies
+### Cookies
 
 You can read or set cookies with [`cookies`](/docs/app/api-reference/functions/cookies) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function.
 
@@ -155,7 +151,7 @@ Alternatively, you can return a new `Response` using the [`Set-Cookie`](https://
 import { cookies } from 'next/headers'
 
 export async function GET(request: Request) {
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   const token = cookieStore.get('token')
 
   return new Response('Hello, Next.js!', {
@@ -169,7 +165,7 @@ export async function GET(request: Request) {
 import { cookies } from 'next/headers'
 
 export async function GET(request) {
-  const cookieStore = cookies()
+  const cookieStore = await cookies()
   const token = cookieStore.get('token')
 
   return new Response('Hello, Next.js!', {
@@ -195,7 +191,7 @@ export async function GET(request) {
 }
 ```
 
-#### Headers
+### Headers
 
 You can read headers with [`headers`](/docs/app/api-reference/functions/headers) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function.
 
@@ -205,7 +201,7 @@ This `headers` instance is read-only. To set headers, you need to return a new `
 import { headers } from 'next/headers'
 
 export async function GET(request: Request) {
-  const headersList = headers()
+  const headersList = await headers()
   const referer = headersList.get('referer')
 
   return new Response('Hello, Next.js!', {
@@ -219,7 +215,7 @@ export async function GET(request: Request) {
 import { headers } from 'next/headers'
 
 export async function GET(request) {
-  const headersList = headers()
+  const headersList = await headers()
   const referer = headersList.get('referer')
 
   return new Response('Hello, Next.js!', {
@@ -272,23 +268,23 @@ Route Handlers can use [Dynamic Segments](/docs/app/building-your-application/ro
 ```ts filename="app/items/[slug]/route.ts" switcher
 export async function GET(
   request: Request,
-  { params }: { params: { slug: string } }
+  { params }: { params: Promise<{ slug: string }> }
 ) {
-  const slug = params.slug // 'a', 'b', or 'c'
+  const slug = (await params).slug // 'a', 'b', or 'c'
 }
 ```
 
 ```js filename="app/items/[slug]/route.js" switcher
 export async function GET(request, { params }) {
-  const slug = params.slug // 'a', 'b', or 'c'
+  const slug = (await params).slug // 'a', 'b', or 'c'
 }
 ```
 
-| Route                       | Example URL | `params`        |
-| --------------------------- | ----------- | --------------- |
-| `app/items/[slug]/route.js` | `/items/a`  | `{ slug: 'a' }` |
-| `app/items/[slug]/route.js` | `/items/b`  | `{ slug: 'b' }` |
-| `app/items/[slug]/route.js` | `/items/c`  | `{ slug: 'c' }` |
+| Route                       | Example URL | `params`                 |
+| --------------------------- | ----------- | ------------------------ |
+| `app/items/[slug]/route.js` | `/items/a`  | `Promise<{ slug: 'a' }>` |
+| `app/items/[slug]/route.js` | `/items/b`  | `Promise<{ slug: 'b' }>` |
+| `app/items/[slug]/route.js` | `/items/c`  | `Promise<{ slug: 'c' }>` |
 
 ### URL Query Parameters
 
diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx
index d4344d961a7a3..c3270ed0080a2 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching.mdx
@@ -87,7 +87,7 @@ export default async function Page() {
 }
 ```
 
-If you are not using any [dynamic functions](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) anywhere else in this route, it will be prerendered during `next build` to a static page. The data can then be updated using [Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration).
+If you are not using any [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) anywhere else in this route, it will be prerendered during `next build` to a static page. The data can then be updated using [Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration).
 
 If you do _not_ want to cache the response from `fetch`, you can do the following:
 
@@ -129,7 +129,7 @@ export default async function Page() {
 }
 ```
 
-If you are not using any [dynamic functions](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) anywhere else in this route, it will be prerendered during `next build` to a static page. The data can then be updated using [Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration).
+If you are not using any [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) anywhere else in this route, it will be prerendered during `next build` to a static page. The data can then be updated using [Incremental Static Regeneration](/docs/app/building-your-application/data-fetching/incremental-static-regeneration).
 
 To prevent the page from prerendering, you can add the following to your file:
 
@@ -137,7 +137,7 @@ To prevent the page from prerendering, you can add the following to your file:
 export const dynamic = 'force-dynamic'
 ```
 
-However, you will commonly use functions like `cookies()`, `headers()`, or reading the incoming `searchParams` from the page props, which will automatically make the page render dynamically. In this case, you do _not_ need to explicitly use `force-dynamic`.
+However, you will commonly use functions like `cookies`, `headers`, or reading the incoming `searchParams` from the page props, which will automatically make the page render dynamically. In this case, you do _not_ need to explicitly use `force-dynamic`.
 
 ### Fetching data on the client
 
diff --git a/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
index 1c0abc01d116f..6fc0488ee6387 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
@@ -838,14 +838,16 @@ You can `get`, `set`, and `delete` cookies inside a Server Action using the [`co
 import { cookies } from 'next/headers'
 
 export async function exampleAction() {
+  const cookieStore = await cookies()
+
   // Get cookie
-  const value = cookies().get('name')?.value
+  cookieStore.get('name')?.value
 
   // Set cookie
-  cookies().set('name', 'Delba')
+  cookieStore.set('name', 'Delba')
 
   // Delete cookie
-  cookies().delete('name')
+  cookieStore.delete('name')
 }
 ```
 
@@ -856,13 +858,16 @@ import { cookies } from 'next/headers'
 
 export async function exampleAction() {
   // Get cookie
-  const value = cookies().get('name')?.value
+  const cookieStore = await cookies()
+
+  // Get cookie
+  cookieStore.get('name')?.value
 
   // Set cookie
-  cookies().set('name', 'Delba')
+  cookieStore.set('name', 'Delba')
 
   // Delete cookie
-  cookies().delete('name')
+  cookieStore.delete('name')
 }
 ```
 
@@ -870,9 +875,32 @@ See [additional examples](/docs/app/api-reference/functions/cookies#deleting-coo
 
 ## Security
 
+By default, when a Server Action is created and exported, it creates a public HTTP endpoint
+and should be treated with the same security assumptions and authorization checks. This means, even if a Server Action or utility function is not imported elsewhere in your code, it’s still a publicly accessible.
+
+To improve security, Next.js has the following built-in features:
+
+- **Dead code elimination:** Unused Server Actions won’t have their IDs exposed to the client-side JavaScript bundle, reducing bundle size and improving performance.
+- **Secure action IDs:** Next.js creates unguessable, non-deterministic IDs to allow the client to reference and call the Server Action. These IDs are periodically recalculated for enhanced security.
+
+```jsx
+// app/actions.js
+'use server'
+
+// This action **is** used in our application, so Next.js
+// will create a secure ID to allow the client to reference
+// and call the Server Action.
+export async function updateUserAction(formData) {}
+
+// This action **is not** used in our application, so Next.js
+// will automatically remove this code during `next build`
+// and will not create a public endpoint.
+export async function deleteUserAction(formData) {}
+```
+
 ### Authentication and authorization
 
-You should treat Server Actions as you would public-facing API endpoints, and ensure that the user is authorized to perform the action. For example:
+You should ensure that the user is authorized to perform the action. For example:
 
 ```tsx filename="app/actions.ts"
 'use server'
diff --git a/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx b/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx
index 87a818125484f..f8031dc8e3557 100644
--- a/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx
+++ b/docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx
@@ -62,16 +62,12 @@ There are three subsets of server rendering: Static, Dynamic, and Streaming.
 
 ### Static Rendering (Default)
 
-{/* Static Rendering Diagram */}
-
 With Static Rendering, routes are rendered at **build time**, or in the background after [data revalidation](/docs/app/building-your-application/data-fetching/incremental-static-regeneration). The result is cached and can be pushed to a [Content Delivery Network (CDN)](https://developer.mozilla.org/docs/Glossary/CDN). This optimization allows you to share the result of the rendering work between users and server requests.
 
 Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.
 
 ### Dynamic Rendering
 
-{/* Dynamic Rendering Diagram */}
-
 With Dynamic Rendering, routes are rendered for each user at **request time**.
 
 Dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params.
@@ -86,30 +82,30 @@ Dynamic rendering is useful when a route has data that is personalized to the us
 
 #### Switching to Dynamic Rendering
 
-During rendering, if a [dynamic function](#dynamic-functions) or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route. This table summarizes how dynamic functions and data caching affect whether a route is statically or dynamically rendered:
+During rendering, if a [Dynamic API](#dynamic-apis) or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route. This table summarizes how Dynamic APIs and data caching affect whether a route is statically or dynamically rendered:
 
-| Dynamic Functions | Data       | Route                |
-| ----------------- | ---------- | -------------------- |
-| No                | Cached     | Statically Rendered  |
-| Yes               | Cached     | Dynamically Rendered |
-| No                | Not Cached | Dynamically Rendered |
-| Yes               | Not Cached | Dynamically Rendered |
+| Dynamic APIs | Data       | Route                |
+| ------------ | ---------- | -------------------- |
+| No           | Cached     | Statically Rendered  |
+| Yes          | Cached     | Dynamically Rendered |
+| No           | Not Cached | Dynamically Rendered |
+| Yes          | Not Cached | Dynamically Rendered |
 
 In the table above, for a route to be fully static, all data must be cached. However, you can have a dynamically rendered route that uses both cached and uncached data fetches.
 
 As a developer, you do not need to choose between static and dynamic rendering as Next.js will automatically choose the best rendering strategy for each route based on the features and APIs used. Instead, you choose when to [cache](/docs/app/building-your-application/data-fetching/fetching) or [revalidate specific data](/docs/app/building-your-application/data-fetching/incremental-static-regeneration), and you may choose to [stream](#streaming) parts of your UI.
 
-#### Dynamic Functions
-
-Dynamic functions rely on information that can only be known at request time such as a user's cookies, current requests headers, or the URL's search params. In Next.js, these dynamic APIs are:
+### Dynamic APIs
 
-- [`cookies()`](/docs/app/api-reference/functions/cookies)
-- [`headers()`](/docs/app/api-reference/functions/headers)
-- [`unstable_noStore()`](/docs/app/api-reference/functions/unstable_noStore)
-- [`unstable_after()`](/docs/app/api-reference/functions/unstable_after):
-- [`searchParams` prop](/docs/app/api-reference/file-conventions/page#searchparams-optional)
+Dynamic APIs rely on information that can only be known at request time (and not ahead of time during prerendering). Using any of these APIs signals the developer's intention and will opt the whole route into dynamic rendering at the request time. These APIs include:
 
-Using any of these functions will opt the whole route into dynamic rendering at request time.
+- [`cookies`](https://www.notion.so/docs/app/api-reference/functions/cookies)
+- [`headers`](https://www.notion.so/docs/app/api-reference/functions/headers)
+- [`unstable_noStore`](https://www.notion.so/docs/app/api-reference/functions/unstable_noStore)
+- [`unstable_after`](https://www.notion.so/docs/app/api-reference/functions/unstable_after)
+- [`connection`](https://www.notion.so/docs/app/api-reference/functions/connection)
+- [`draftMode`](https://www.notion.so/docs/app/api-reference/functions/draft-mode)
+- [`searchParams` prop](https://www.notion.so/docs/app/api-reference/file-conventions/page#searchparams-optional)
 
 ### Streaming
 
diff --git a/docs/02-app/01-building-your-application/03-rendering/04-partial-prerendering.mdx b/docs/02-app/01-building-your-application/03-rendering/04-partial-prerendering.mdx
index 601a6bc87ae6d..2e51f677cb32e 100644
--- a/docs/02-app/01-building-your-application/03-rendering/04-partial-prerendering.mdx
+++ b/docs/02-app/01-building-your-application/03-rendering/04-partial-prerendering.mdx
@@ -127,15 +127,15 @@ module.exports = nextConfig
 
 ## Dynamic Components
 
-When creating the prerender for your route during `next build`, Next.js requires that dynamic functions are wrapped with React Suspense. The `fallback` is then included in the prerender.
+When creating the prerender for your route during `next build`, Next.js requires that Dynamic APIs are wrapped with React Suspense. The `fallback` is then included in the prerender.
 
-For example, using functions like `cookies()` or `headers()`:
+For example, using functions like `cookies` or `headers`:
 
 ```jsx filename="app/user.js" switcher
 import { cookies } from 'next/headers'
 
-export function User() {
-  const session = cookies().get('session')?.value
+export async function User() {
+  const session = (await cookies()).get('session')?.value
   return '...'
 }
 ```
@@ -143,8 +143,8 @@ export function User() {
 ```tsx filename="app/user.tsx" switcher
 import { cookies } from 'next/headers'
 
-export function User() {
-  const session = cookies().get('session')?.value
+export async function User() {
+  const session = (await cookies()).get('session')?.value
   return '...'
 }
 ```
@@ -224,17 +224,21 @@ export default function Page({ searchParams }) {
 Inside of the table component, accessing the value from `searchParams` will make the component run dynamically:
 
 ```tsx filename="app/table.tsx" switcher
-export function Table({ searchParams }: { searchParams: { sort: string } }) {
-  const sort = searchParams.sort === 'true'
+export async function Table({
+  searchParams,
+}: {
+  searchParams: Promise<{ sort: string }>
+}) {
+  const sort = (await searchParams).sort === 'true'
   return '...'
 }
 ```
 
 ```jsx filename="app/table.js" switcher
-export function Table({ searchParams }: {
-  searchParams: { sort: string }
+export async function Table({ searchParams }: {
+  searchParams: Promise<{ sort: string }>
 }) {
-  const sort = searchParams.sort === 'true';
+  const sort = (await searchParams).sort === 'true';
   return '...'
 }
 ```
diff --git a/docs/02-app/01-building-your-application/04-caching/index.mdx b/docs/02-app/01-building-your-application/04-caching/index.mdx
index 3a2dcc95ace14..9fc363c2a6105 100644
--- a/docs/02-app/01-building-your-application/04-caching/index.mdx
+++ b/docs/02-app/01-building-your-application/04-caching/index.mdx
@@ -306,7 +306,7 @@ There are two ways you can invalidate the Full Route Cache:
 
 You can opt out of the Full Route Cache, or in other words, dynamically render components for every incoming request, by:
 
-- **Using a [Dynamic Function](#dynamic-functions)**: This will opt the route out from the Full Route Cache and dynamically render it at request time. The Data Cache can still be used.
+- **Using a [Dynamic API](#dynamic-apis)**: This will opt the route out from the Full Route Cache and dynamically render it at request time. The Data Cache can still be used.
 - **Using the `dynamic = 'force-dynamic'` or `revalidate = 0` route segment config options**: This will skip the Full Route Cache and the Data Cache. Meaning components will be rendered and data fetched on every incoming request to the server. The Router Cache will still apply as it's a client-side cache.
 - **Opting out of the [Data Cache](#data-cache)**: If a route has a `fetch` request that is not cached, this will opt the route out of the Full Route Cache. The data for the specific `fetch` request will be fetched for every incoming request. Other `fetch` requests that do not opt out of caching will still be cached in the Data Cache. This allows for a hybrid of cached and uncached data.
 
@@ -372,24 +372,24 @@ When configuring the different caching mechanisms, it's important to understand
 
 The following table provides an overview of how different Next.js APIs affect caching:
 
-| API                                                                     | Router Cache               | Full Route Cache      | Data Cache            | React Request Memoization |
-| ----------------------------------------------------------------------- | -------------------------- | --------------------- | --------------------- | ------------------------- |
-| [`<Link prefetch>`](#link)                                              | Cache                      |                       |                       |                           |
-| [`router.prefetch`](#routerprefetch)                                    | Cache                      |                       |                       |                           |
-| [`router.refresh`](#routerrefresh)                                      | Revalidate                 |                       |                       |                           |
-| [`fetch`](#fetch)                                                       |                            |                       | Cache                 | Cache                     |
-| [`fetch` `options.cache`](#fetch-optionscache)                          |                            |                       | Cache or Opt out      |                           |
-| [`fetch` `options.next.revalidate`](#fetch-optionsnextrevalidate)       |                            | Revalidate            | Revalidate            |                           |
-| [`fetch` `options.next.tags`](#fetch-optionsnexttags-and-revalidatetag) |                            | Cache                 | Cache                 |                           |
-| [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)             | Revalidate (Server Action) | Revalidate            | Revalidate            |                           |
-| [`revalidatePath`](#revalidatepath)                                     | Revalidate (Server Action) | Revalidate            | Revalidate            |                           |
-| [`const revalidate`](#segment-config-options)                           |                            | Revalidate or Opt out | Revalidate or Opt out |                           |
-| [`const dynamic`](#segment-config-options)                              |                            | Cache or Opt out      | Cache or Opt out      |                           |
-| [`cookies`](#cookies)                                                   | Revalidate (Server Action) | Opt out               |                       |                           |
-| [`headers`, `searchParams`](#dynamic-functions)                         |                            | Opt out               |                       |                           |
-| [`generateStaticParams`](#generatestaticparams)                         |                            | Cache                 |                       |                           |
-| [`React.cache`](#react-cache-function)                                  |                            |                       |                       | Cache                     |
-| [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache)    |                            |                       | Cache                 |                           |
+| API                                                                     | Router Cache               | Full Route Cache      | Data Cache            | React Cache |
+| ----------------------------------------------------------------------- | -------------------------- | --------------------- | --------------------- | ----------- |
+| [`<Link prefetch>`](#link)                                              | Cache                      |                       |                       |             |
+| [`router.prefetch`](#routerprefetch)                                    | Cache                      |                       |                       |             |
+| [`router.refresh`](#routerrefresh)                                      | Revalidate                 |                       |                       |             |
+| [`fetch`](#fetch)                                                       |                            |                       | Cache                 | Cache       |
+| [`fetch` `options.cache`](#fetch-optionscache)                          |                            |                       | Cache or Opt out      |             |
+| [`fetch` `options.next.revalidate`](#fetch-optionsnextrevalidate)       |                            | Revalidate            | Revalidate            |             |
+| [`fetch` `options.next.tags`](#fetch-optionsnexttags-and-revalidatetag) |                            | Cache                 | Cache                 |             |
+| [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag)             | Revalidate (Server Action) | Revalidate            | Revalidate            |             |
+| [`revalidatePath`](#revalidatepath)                                     | Revalidate (Server Action) | Revalidate            | Revalidate            |             |
+| [`const revalidate`](#segment-config-options)                           |                            | Revalidate or Opt out | Revalidate or Opt out |             |
+| [`const dynamic`](#segment-config-options)                              |                            | Cache or Opt out      | Cache or Opt out      |             |
+| [`cookies`](#cookies)                                                   | Revalidate (Server Action) | Opt out               |                       |             |
+| [`headers`, `searchParams`](#dynamic-apis)                              |                            | Opt out               |                       |             |
+| [`generateStaticParams`](#generatestaticparams)                         |                            | Cache                 |                       |             |
+| [`React.cache`](#react-cache-function)                                  |                            |                       |                       | Cache       |
+| [`unstable_cache`](/docs/app/api-reference/functions/unstable_cache)    |                            |                       | Cache                 |             |
 
 ### `<Link>`
 
@@ -494,9 +494,9 @@ See the [`revalidatePath` API reference](/docs/app/api-reference/functions/reval
 >
 > The difference is that `revalidatePath` purges the Data Cache and Full Route Cache, whereas `router.refresh()` does not change the Data Cache and Full Route Cache, as it is a client-side API.
 
-### Dynamic Functions
+### Dynamic APIs
 
-Dynamic functions like `cookies` and `headers`, and the `searchParams` prop in Pages depend on runtime incoming request information. Using them will opt a route out of the Full Route Cache, in other words, the route will be dynamically rendered.
+Dynamic APIs like `cookies` and `headers`, and the `searchParams` prop in Pages depend on runtime incoming request information. Using them will opt a route out of the Full Route Cache, in other words, the route will be dynamically rendered.
 
 #### `cookies`
 
diff --git a/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx b/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
index 8e447b2137d06..414db77be54b4 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
@@ -52,8 +52,8 @@ You can use `generateMetadata` function to `fetch` metadata that requires dynami
 import type { Metadata, ResolvingMetadata } from 'next'
 
 type Props = {
-  params: { id: string }
-  searchParams: { [key: string]: string | string[] | undefined }
+  params: Promise<{ id: string }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }
 
 export async function generateMetadata(
@@ -61,7 +61,7 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   // read route params
-  const id = params.id
+  const id = (await params).id
 
   // fetch data
   const product = await fetch(`https://.../${id}`).then((res) => res.json())
@@ -83,7 +83,7 @@ export default function Page({ params, searchParams }: Props) {}
 ```jsx filename="app/products/[id]/page.js" switcher
 export async function generateMetadata({ params, searchParams }, parent) {
   // read route params
-  const id = params.id
+  const id = (await params).id
 
   // fetch data
   const product = await fetch(`https://.../${id}`).then((res) => res.json())
diff --git a/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx b/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
index a83a2739f34e4..a2e92ed34defc 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/09-instrumentation.mdx
@@ -5,7 +5,6 @@ related:
   title: Learn more about Instrumentation
   links:
     - app/api-reference/file-conventions/instrumentation
-    - app/api-reference/next-config-js/instrumentationHook
 ---
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
@@ -40,7 +39,6 @@ See the [Next.js with OpenTelemetry example](https://github.com/vercel/next.js/t
 
 > **Good to know**:
 >
-> - This feature is **experimental**. To use it, you must explicitly opt in by defining [`experimental.instrumentationHook = true;`](/docs/app/api-reference/next-config-js/instrumentationHook) in your `next.config.js`.
 > - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
 > - If you use the [`pageExtensions` config option](/docs/app/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
 
diff --git a/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx b/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
index 553e5b2ed95c9..270105d3a87a0 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/10-open-telemetry.mdx
@@ -5,8 +5,6 @@ description: Learn how to instrument your Next.js app with OpenTelemetry.
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
 
-> **Good to know**: This feature is **experimental**, you need to explicitly opt-in by providing `experimental.instrumentationHook = true;` in your `next.config.js`.
-
 Observability is crucial for understanding and optimizing the behavior and performance of your Next.js app.
 
 As applications become more complex, it becomes increasingly difficult to identify and diagnose issues that may arise. By leveraging observability tools, such as logging and metrics, developers can gain insights into their application's behavior and identify areas for optimization. With observability, developers can proactively address issues before they become major problems and provide a better user experience. Therefore, it is highly recommended to use observability in your Next.js applications to improve performance, optimize resources, and enhance user experience.
diff --git a/docs/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx b/docs/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
index b4c468f7c70af..6c41834932b85 100644
--- a/docs/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
+++ b/docs/02-app/01-building-your-application/07-configuring/03-environment-variables.mdx
@@ -189,14 +189,35 @@ Next.js can support both build time and runtime environment variables.
 
 **By default, environment variables are only available on the server**. To expose an environment variable to the browser, it must be prefixed with `NEXT_PUBLIC_`. However, these public environment variables will be inlined into the JavaScript bundle during `next build`.
 
-To read runtime environment variables, we recommend using `getServerSideProps` or [incrementally adopting the App Router](/docs/app/building-your-application/upgrading/app-router-migration). With the App Router, we can safely read environment variables on the server during dynamic rendering. This allows you to use a singular Docker image that can be promoted through multiple environments with different values.
+<PagesOnly>
+
+To read runtime environment variables, we recommend using `getServerSideProps` or [incrementally adopting the App Router](/docs/app/building-your-application/upgrading/app-router-migration).
+
+</PagesOnly>
+
+<AppOnly>
+
+You can safely read environment variables on the server during dynamic rendering:
+
+```tsx filename="app/page.ts" switcher
+import { connection } from 'next/server'
+
+export default async function Component() {
+  await connection()
+  // cookies, headers, and other Dynamic APIs
+  // will also opt into dynamic rendering, meaning
+  // this env variable is evaluated at runtime
+  const value = process.env.MY_VALUE
+  // ...
+}
+```
 
-```jsx
-import { unstable_noStore as noStore } from 'next/cache'
+```jsx filename="app/page.js" switcher
+import { connection } from 'next/server'
 
-export default function Component() {
-  noStore()
-  // cookies(), headers(), and other dynamic functions
+export default async function Component() {
+  await connection()
+  // cookies, headers, and other Dynamic APIs
   // will also opt into dynamic rendering, meaning
   // this env variable is evaluated at runtime
   const value = process.env.MY_VALUE
@@ -204,6 +225,10 @@ export default function Component() {
 }
 ```
 
+</AppOnly>
+
+This allows you to use a singular Docker image that can be promoted through multiple environments with different values.
+
 **Good to know:**
 
 - You can run code on server startup using the [`register` function](/docs/app/building-your-application/optimizing/instrumentation).
diff --git a/docs/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx b/docs/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
index 7d671435628a1..908f1bca3bfc4 100644
--- a/docs/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
+++ b/docs/02-app/01-building-your-application/07-configuring/11-draft-mode.mdx
@@ -34,7 +34,8 @@ Then, import the [`draftMode`](/docs/app/api-reference/functions/draft-mode) fun
 import { draftMode } from 'next/headers'
 
 export async function GET(request: Request) {
-  draftMode().enable()
+  const draft = await draftMode()
+  draft.enable()
   return new Response('Draft mode is enabled')
 }
 ```
@@ -43,7 +44,8 @@ export async function GET(request: Request) {
 import { draftMode } from 'next/headers'
 
 export async function GET(request) {
-  draftMode().enable()
+  const draft = await draftMode()
+  draft.enable()
   return new Response('Draft mode is enabled')
 }
 ```
@@ -99,7 +101,8 @@ export async function GET(request: Request) {
   }
 
   // Enable Draft Mode by setting the cookie
-  draftMode().enable()
+  const draft = await draftMode()
+  draft.enable()
 
   // Redirect to the path from the fetched post
   // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
@@ -133,7 +136,8 @@ export async function GET(request) {
   }
 
   // Enable Draft Mode by setting the cookie
-  draftMode().enable()
+  const draft = await draftMode()
+  draft.enable()
 
   // Redirect to the path from the fetched post
   // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
@@ -156,7 +160,7 @@ Furthermore, the value of `isEnabled` will be `true`.
 import { draftMode } from 'next/headers'
 
 async function getData() {
-  const { isEnabled } = draftMode()
+  const { isEnabled } = await draftMode()
 
   const url = isEnabled
     ? 'https://draft.example.com'
@@ -184,7 +188,7 @@ export default async function Page() {
 import { draftMode } from 'next/headers'
 
 async function getData() {
-  const { isEnabled } = draftMode()
+  const { isEnabled } = await draftMode()
 
   const url = isEnabled
     ? 'https://draft.example.com'
diff --git a/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx b/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
index 49efab01e0df1..84ba41ab82f70 100644
--- a/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
+++ b/docs/02-app/01-building-your-application/07-configuring/15-content-security-policy.mdx
@@ -177,8 +177,8 @@ You can now read the nonce from a [Server Component](/docs/app/building-your-app
 import { headers } from 'next/headers'
 import Script from 'next/script'
 
-export default function Page() {
-  const nonce = headers().get('x-nonce')
+export default async function Page() {
+  const nonce = (await headers()).get('x-nonce')
 
   return (
     <Script
@@ -194,8 +194,8 @@ export default function Page() {
 import { headers } from 'next/headers'
 import Script from 'next/script'
 
-export default function Page() {
-  const nonce = headers().get('x-nonce')
+export default async function Page() {
+  const nonce = (await headers()).get('x-nonce')
 
   return (
     <Script
diff --git a/docs/02-app/01-building-your-application/09-authentication/index.mdx b/docs/02-app/01-building-your-application/09-authentication/index.mdx
index 8977737b21cda..d044ccb4c3808 100644
--- a/docs/02-app/01-building-your-application/09-authentication/index.mdx
+++ b/docs/02-app/01-building-your-application/09-authentication/index.mdx
@@ -550,7 +550,7 @@ To create and manage stateless sessions, there are a few steps you need to follo
 
 1. Generate a secret key, which will be used to sign your session, and store it as an [environment variable](/docs/app/building-your-application/configuring/environment-variables).
 2. Write logic to encrypt/decrypt session data using a session management library.
-3. Manage cookies using the Next.js [`cookies()`](/docs/app/api-reference/functions/cookies) API.
+3. Manage cookies using the Next.js [`cookies`](/docs/app/api-reference/functions/cookies) API.
 
 In addition to the above, consider adding functionality to [update (or refresh)](#updating-or-refreshing-sessions) the session when the user returns to the application, and [delete](#deleting-the-session) the session when the user logs out.
 
@@ -641,7 +641,7 @@ export async function decrypt(session) {
 
 #### 3. Setting cookies (recommended options)
 
-To store the session in a cookie, use the Next.js [`cookies()`](/docs/app/api-reference/functions/cookies) API. The cookie should be set on the server, and include the recommended options:
+To store the session in a cookie, use the Next.js [`cookies`](/docs/app/api-reference/functions/cookies) API. The cookie should be set on the server, and include the recommended options:
 
 - **HttpOnly**: Prevents client-side JavaScript from accessing the cookie.
 - **Secure**: Use https to send the cookie.
@@ -657,15 +657,17 @@ import { cookies } from 'next/headers'
 
 export async function createSession(userId: string) {
   const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
-  const session = await encrypt({ userId, expiresAt })
-
-  cookies().set('session', session, {
-    httpOnly: true,
-    secure: true,
-    expires: expiresAt,
-    sameSite: 'lax',
-    path: '/',
-  })
+  const session = await encrypt({ userId, expiresAt })(await cookies()).set(
+    'session',
+    session,
+    {
+      httpOnly: true,
+      secure: true,
+      expires: expiresAt,
+      sameSite: 'lax',
+      path: '/',
+    }
+  )
 }
 ```
 
@@ -676,8 +678,9 @@ import { cookies } from 'next/headers'
 export async function createSession(userId) {
   const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
   const session = await encrypt({ userId, expiresAt })
+  const cookieStore = await cookies()
 
-  cookies().set('session', session, {
+  cookieStore().set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expiresAt,
@@ -738,7 +741,7 @@ import { cookies } from 'next/headers'
 import { decrypt } from '@/app/lib/session'
 
 export async function updateSession() {
-  const session = cookies().get('session')?.value
+  const session = (await cookies()).get('session')?.value
   const payload = await decrypt(session)
 
   if (!session || !payload) {
@@ -746,7 +749,9 @@ export async function updateSession() {
   }
 
   const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
-  cookies().set('session', session, {
+
+  const cookieStore = await cookies()
+  cookieStore().set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expires,
@@ -762,15 +767,16 @@ import { cookies } from 'next/headers'
 import { decrypt } from '@/app/lib/session'
 
 export async function updateSession() {
-  const session = cookies().get('session').value
+  const session = (await cookies()).get('session')?.value
   const payload = await decrypt(session)
 
   if (!session || !payload) {
     return null
   }
 
-  const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
-  cookies().set('session', session, {
+  const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)(
+    await cookies()
+  ).set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expires,
@@ -790,8 +796,9 @@ To delete the session, you can delete the cookie:
 import 'server-only'
 import { cookies } from 'next/headers'
 
-export function deleteSession() {
-  cookies().delete('session')
+export async function deleteSession() {
+  const cookieStore = await cookies()
+  cookieStore().delete('session')
 }
 ```
 
@@ -799,8 +806,9 @@ export function deleteSession() {
 import 'server-only'
 import { cookies } from 'next/headers'
 
-export function deleteSession() {
-  cookies().delete('session')
+export async function deleteSession() {
+  const cookieStore = await cookies()
+  cookieStore().delete('session')
 }
 ```
 
@@ -911,7 +919,8 @@ export async function createSession(id: number) {
   const session = await encrypt({ sessionId, expiresAt })
 
   // 3. Store the session in cookies for optimistic auth checks
-  cookies().set('session', session, {
+  const cookieStore = await cookies()
+  cookieStore().set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expiresAt,
@@ -945,7 +954,8 @@ export async function createSession(id) {
   const session = await encrypt({ sessionId, expiresAt })
 
   // 3. Store the session in cookies for optimistic auth checks
-  cookies().set('session', session, {
+  const cookieStore = await cookies()
+  cookieStore().set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expiresAt,
@@ -1056,7 +1066,7 @@ export default async function middleware(req: NextRequest) {
   const isPublicRoute = publicRoutes.includes(path)
 
   // 3. Decrypt the session from the cookie
-  const cookie = cookies().get('session')?.value
+  const cookie = (await cookies()).get('session')?.value
   const session = await decrypt(cookie)
 
   // 4. Redirect to /login if the user is not authenticated
@@ -1098,7 +1108,7 @@ export default async function middleware(req) {
   const isPublicRoute = publicRoutes.includes(path)
 
   // 3. Decrypt the session from the cookie
-  const cookie = cookies().get('session')?.value
+  const cookie = (await cookies()).get('session')?.value
   const session = await decrypt(cookie)
 
   // 5. Redirect to /login if the user is not authenticated
@@ -1149,7 +1159,7 @@ import { cookies } from 'next/headers'
 import { decrypt } from '@/app/lib/session'
 
 export const verifySession = cache(async () => {
-  const cookie = cookies().get('session')?.value
+  const cookie = (await cookies()).get('session')?.value
   const session = await decrypt(cookie)
 
   if (!session?.userId) {
@@ -1167,7 +1177,7 @@ import { cookies } from 'next/headers'
 import { decrypt } from '@/app/lib/session'
 
 export const verifySession = cache(async () => {
-  const cookie = cookies().get('session').value
+  const cookie = (await cookies()).get('session')?.value
   const session = await decrypt(cookie)
 
   if (!session.userId) {
diff --git a/docs/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx b/docs/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx
index efc0a236093f4..b20252c787f18 100644
--- a/docs/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx
+++ b/docs/02-app/01-building-your-application/10-deploying/01-production-checklist.mdx
@@ -43,7 +43,7 @@ While building your application, we recommend using the following features to en
 - **[`<Link>` component](/docs/app/building-your-application/routing/linking-and-navigating#link-component):** Use the `<Link>` component for [client-side navigation and prefetching](/docs/app/building-your-application/routing/linking-and-navigating#how-routing-and-navigation-works).
 - **[Error Handling](/docs/app/building-your-application/routing/error-handling):** Gracefully handle [catch-all errors](/docs/app/building-your-application/routing/error-handling) and [404 errors](/docs/app/api-reference/file-conventions/not-found) in production by creating custom error pages.
 - **[Composition Patterns](/docs/app/building-your-application/rendering/composition-patterns):** Follow the recommended composition patterns for Server and Client Components, and check the placement of your [`"use client"` boundaries](/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree) to avoid unnecessarily increasing your client-side JavaScript bundle.
-- **[Dynamic Functions](/docs/app/building-your-application/rendering/server-components#dynamic-functions):** Be aware that dynamic functions like [`cookies()`](/docs/app/api-reference/functions/cookies) and the [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop will opt the entire route into [Dynamic Rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) (or your whole application if used in the [Root Layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)). Ensure dynamic function usage is intentional and wrap them in `<Suspense>` boundaries where appropriate.
+- **[Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis):** Be aware that Dynamic APIs like [`cookies`](/docs/app/api-reference/functions/cookies) and the [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop will opt the entire route into [Dynamic Rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) (or your whole application if used in the [Root Layout](/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required)). Ensure Dynamic API usage is intentional and wrap them in `<Suspense>` boundaries where appropriate.
 
 > **Good to know**: [Partial Prerendering (experimental)](/blog/next-14#partial-prerendering-preview) will allow parts of a route to be dynamic without opting the whole route into dynamic rendering.
 
diff --git a/docs/02-app/01-building-your-application/10-deploying/index.mdx b/docs/02-app/01-building-your-application/10-deploying/index.mdx
index 8e3461b69b11d..ac40a28286161 100644
--- a/docs/02-app/01-building-your-application/10-deploying/index.mdx
+++ b/docs/02-app/01-building-your-application/10-deploying/index.mdx
@@ -100,21 +100,46 @@ Next.js can support both build time and runtime environment variables.
 
 **By default, environment variables are only available on the server**. To expose an environment variable to the browser, it must be prefixed with `NEXT_PUBLIC_`. However, these public environment variables will be inlined into the JavaScript bundle during `next build`.
 
-To read runtime environment variables, we recommend using `getServerSideProps` or [incrementally adopting the App Router](/docs/app/building-your-application/upgrading/app-router-migration). With the App Router, we can safely read environment variables on the server during dynamic rendering. This allows you to use a singular Docker image that can be promoted through multiple environments with different values.
+<PagesOnly>
+
+To read runtime environment variables, we recommend using `getServerSideProps` or [incrementally adopting the App Router](/docs/app/building-your-application/upgrading/app-router-migration).
+
+</PagesOnly>
+
+<AppOnly>
+
+You safely read environment variables on the server during dynamic rendering.
+
+```tsx filename="app/page.ts" switcher
+import { connection } from 'next/server'
 
-```jsx
-import { unstable_noStore as noStore } from 'next/cache';
+export default async function Component() {
+  await connection()
+  // cookies, headers, and other Dynamic APIs
+  // will also opt into dynamic rendering, meaning
+  // this env variable is evaluated at runtime
+  const value = process.env.MY_VALUE
+  // ...
+}
+```
 
-export default function Component() {
-  noStore();
-  // cookies(), headers(), and other dynamic functions
-  // will also opt into dynamic rendering, making
+```jsx filename="app/page.js" switcher
+import { connection } from 'next/server'
+
+export default async function Component() {
+  await connection()
+  // cookies, headers, and other Dynamic APIs
+  // will also opt into dynamic rendering, meaning
   // this env variable is evaluated at runtime
   const value = process.env.MY_VALUE
-  ...
+  // ...
 }
 ```
 
+</AppOnly>
+
+This allows you to use a singular Docker image that can be promoted through multiple environments with different values.
+
 > **Good to know:**
 >
 > - You can run code on server startup using the [`register` function](/docs/app/building-your-application/optimizing/instrumentation).
diff --git a/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx b/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx
index af2ff2048f62d..2b9c7e4bf59fb 100644
--- a/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx
+++ b/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx
@@ -22,7 +22,7 @@ Replacing `<transform>` and `<path>` with appropriate values.
 - `--dry` Do a dry-run, no code will be edited
 - `--print` Prints the changed output for comparison
 
-## Next.js Codemods
+## Codemods
 
 ### 15.0
 
diff --git a/docs/02-app/01-building-your-application/11-upgrading/02-version-15.mdx b/docs/02-app/01-building-your-application/11-upgrading/02-version-15.mdx
index 971dd2d287782..fac5991f19768 100644
--- a/docs/02-app/01-building-your-application/11-upgrading/02-version-15.mdx
+++ b/docs/02-app/01-building-your-application/11-upgrading/02-version-15.mdx
@@ -38,7 +38,7 @@ Previously synchronous Dynamic APIs that rely on runtime information are now **a
 - [`cookies`](/docs/app/api-reference/functions/cookies)
 - [`headers`](/docs/app/api-reference/functions/headers)
 - [`draftMode`](/docs/app/api-reference/functions/draft-mode)
-- `params` in [`layout.js`](/docs/app/api-reference/file-conventions/layout), [`page.js`](/docs/app/api-reference/file-conventions/page), [`route.js`](/docs/app/api-reference/file-conventions/route), and [`default.js`](/docs/app/api-reference/file-conventions/default).
+- `params` in [`layout.js`](/docs/app/api-reference/file-conventions/layout), [`page.js`](/docs/app/api-reference/file-conventions/page), [`route.js`](/docs/app/api-reference/file-conventions/route), [`default.js`](/docs/app/api-reference/file-conventions/default), [`opengraph-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image), [`twitter-image`](/docs/app/api-reference/file-conventions/metadata/opengraph-image), [`icon`](/docs/app/api-reference/file-conventions/metadata/app-icons), and [`apple-icon`](/docs/app/api-reference/file-conventions/metadata/app-icons).
 - `searchParams` in [`page.js`](/docs/app/api-reference/file-conventions/page)
 
 To ease the burden of migration, a [codemod is available](/docs/app/building-your-application/upgrading/codemods#150) to automate the process and the APIs can temporarily be accessed synchronously.
diff --git a/docs/02-app/01-building-your-application/11-upgrading/04-app-router-migration.mdx b/docs/02-app/01-building-your-application/11-upgrading/04-app-router-migration.mdx
index 98c6da98e32c9..cb8014e589dc7 100644
--- a/docs/02-app/01-building-your-application/11-upgrading/04-app-router-migration.mdx
+++ b/docs/02-app/01-building-your-application/11-upgrading/04-app-router-migration.mdx
@@ -629,23 +629,23 @@ export default function Page(props) {
 
 The `app` directory exposes new read-only functions to retrieve request data:
 
-- [`headers()`](/docs/app/api-reference/functions/headers): Based on the Web Headers API, and can be used inside [Server Components](/docs/app/building-your-application/rendering/server-components) to retrieve request headers.
-- [`cookies()`](/docs/app/api-reference/functions/cookies): Based on the Web Cookies API, and can be used inside [Server Components](/docs/app/building-your-application/rendering/server-components) to retrieve cookies.
+- [`headers`](/docs/app/api-reference/functions/headers): Based on the Web Headers API, and can be used inside [Server Components](/docs/app/building-your-application/rendering/server-components) to retrieve request headers.
+- [`cookies`](/docs/app/api-reference/functions/cookies): Based on the Web Cookies API, and can be used inside [Server Components](/docs/app/building-your-application/rendering/server-components) to retrieve cookies.
 
 ```tsx filename="app/page.tsx" switcher
 // `app` directory
 import { cookies, headers } from 'next/headers'
 
 async function getData() {
-  const authHeader = headers().get('authorization')
+  const authHeader = (await headers()).get('authorization')
 
   return '...'
 }
 
 export default async function Page() {
-  // You can use `cookies()` or `headers()` inside Server Components
+  // You can use `cookies` or `headers` inside Server Components
   // directly or in your data fetching function
-  const theme = cookies().get('theme')
+  const theme = (await cookies()).get('theme')
   const data = await getData()
   return '...'
 }
@@ -656,15 +656,15 @@ export default async function Page() {
 import { cookies, headers } from 'next/headers'
 
 async function getData() {
-  const authHeader = headers().get('authorization')
+  const authHeader = (await headers()).get('authorization')
 
   return '...'
 }
 
 export default async function Page() {
-  // You can use `cookies()` or `headers()` inside Server Components
+  // You can use `cookies` or `headers` inside Server Components
   // directly or in your data fetching function
-  const theme = cookies().get('theme')
+  const theme = (await cookies()).get('theme')
   const data = await getData()
   return '...'
 }
diff --git a/docs/02-app/02-api-reference/01-components/form.mdx b/docs/02-app/02-api-reference/01-components/form.mdx
index 1fe3cfbcaf6e9..fa052e8347964 100644
--- a/docs/02-app/02-api-reference/01-components/form.mdx
+++ b/docs/02-app/02-api-reference/01-components/form.mdx
@@ -1,16 +1,17 @@
 ---
 title: <Form>
 description: Learn how to use the `<Form>` component to handle form submissions and search params updates with client-side navigation.
-version: canary
 ---
 
-The `<Form>` component extends the HTML `<form>` element to provide [**prefetching**](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) of [loading UI](/docs/app/building-your-application/routing/loading-ui-and-streaming), **client-side navigation** on submission, and **progressive enhancement**.
+The `<Form>` component extends the HTML `<form>` element to provide <AppOnly>[**prefetching**](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) of [loading UI](/docs/app/building-your-application/routing/loading-ui-and-streaming),</AppOnly> **client-side navigation** on submission, and **progressive enhancement**.
 
 It's useful for forms that update URL search params as it reduces the boilerplate code needed to achieve the above.
 
 Basic usage:
 
-```tsx filename="/app/page.tsx" switcher
+<AppOnly>
+
+```tsx filename="/app/ui/search.js" switcher
 import Form from 'next/form'
 
 export default function Page() {
@@ -40,17 +41,66 @@ export default function Search() {
 }
 ```
 
+</AppOnly>
+
+<PagesOnly>
+
+```tsx filename="/ui/search.js" switcher
+import Form from 'next/form'
+
+export default function Page() {
+  return (
+    <Form action="/search">
+      {/* On submission, the input value will be appended to 
+          the URL, e.g. /search?query=abc */}
+      <input name="query" />
+      <button type="submit">Submit</button>
+    </Form>
+  )
+}
+```
+
+```jsx filename="/ui/search.js" switcher
+import Form from 'next/form'
+
+export default function Search() {
+  return (
+    <Form action="/search">
+      {/* On submission, the input value will be appended to 
+          the URL, e.g. /search?query=abc */}
+      <input name="query" />
+      <button type="submit">Submit</button>
+    </Form>
+  )
+}
+```
+
+</PagesOnly>
+
 ## Reference
 
 The behavior of the `<Form>` component depends on whether the `action` prop is passed a `string` or `function`.
 
+<AppOnly>
+
 - When `action` is a **string**, the `<Form>` behaves like a native HTML form that uses a **`GET`** method. The form data is encoded into the URL as search params, and when the form is submitted, it navigates to the specified URL. In addition, Next.js:
   - [Prefetches](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) the path when the form becomes visible, this preloads shared UI (e.g. `layout.js` and `loading.js`), resulting in faster navigation.
   - Performs a [client-side navigation](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation) instead of a full page reload when the form is submitted. This retains shared UI and client-side state.
 - When `action` is a **function** (Server Action), `<Form>` behaves like a [React form](https://react.dev/reference/react-dom/components/form), executing the action when the form is submitted.
 
+</AppOnly>
+
+<PagesOnly>
+
+- When `action` is a **string**, the `<Form>` behaves like a native HTML form that uses a **`GET`** method. The form data is encoded into the URL as search params, and when the form is submitted, it navigates to the specified URL. In addition, Next.js:
+  - Performs a [client-side navigation](/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation) instead of a full page reload when the form is submitted. This retains shared UI and client-side state.
+
+</PagesOnly>
+
 ### `action` (string) Props
 
+<PagesOnly>
+
 When `action` is a string, the `<Form>` component supports the following props:
 
 | Prop      | Example            | Type                            | Required |
@@ -61,8 +111,27 @@ When `action` is a string, the `<Form>` component supports the following props:
 
 - **`action`**: The URL or path to navigate to when the form is submitted.
   - An empty string `""` will navigate to the same route with updated search params.
+- **`replace`**: Replaces the current history state instead of pushing a new one to the [browser's history](https://developer.mozilla.org/en-US/docs/Web/API/History_API) stack. Default is `false`.
 - **`scroll`**: Controls the scroll behavior during navigation. Defaults to `true`, this means it will scroll to the top of the new route, and maintain the scroll position for backwards and forwards navigation.
+
+</PagesOnly>
+
+<AppOnly>
+
+When `action` is a string, the `<Form>` component supports the following props:
+
+| Prop       | Example            | Type                            | Required |
+| ---------- | ------------------ | ------------------------------- | -------- |
+| `action`   | `action="/search"` | `string` (URL or relative path) | Yes      |
+| `replace`  | `replace={false}`  | `boolean`                       | -        |
+| `scroll`   | `scroll={true}`    | `boolean`                       | -        |
+| `prefetch` | `prefetch={true}`  | `boolean`                       | -        |
+
+- **`action`**: The URL or path to navigate to when the form is submitted.
+  - An empty string `""` will navigate to the same route with updated search params.
 - **`replace`**: Replaces the current history state instead of pushing a new one to the [browser's history](https://developer.mozilla.org/en-US/docs/Web/API/History_API) stack. Default is `false`.
+- **`scroll`**: Controls the scroll behavior during navigation. Defaults to `true`, this means it will scroll to the top of the new route, and maintain the scroll position for backwards and forwards navigation.
+- **`prefetch`**: Controls whether the path should be prefetched when the form becomes visible in the user's viewport. Defaults to `true`.
 
 ### `action` (function) Props
 
@@ -76,17 +145,26 @@ When `action` is a function, the `<Form>` component supports the following prop:
 
 > **Good to know**: When `action` is a function, the `replace` and `scroll` props are ignored.
 
+</AppOnly>
+
 ### Caveats
 
-- **`onSubmit`**: Can be used to handle form submission logic. However, calling `event.preventDefault()` will override `<Form>` behavior such as navigating to the specified URL.
+<AppOnly>
+
 - **`formAction`**: Can be used in a `<button>` or `<input type="submit">` fields to override the `action` prop. Next.js will perform a client-side navigation, however, this approach doesn't support prefetching.
   - When using [`basePath`](/docs/app/api-reference/next-config-js/basePath), you must also include it in the `formAction` path. e.g. `formAction="/base-path/search"`.
+- **`key`**: Passing a `key` prop to a string `action` is not supported. If you'd like to trigger a re-render or perform a mutation, consider using a function `action` instead.
+
+</AppOnly>
+
+- **`onSubmit`**: Can be used to handle form submission logic. However, calling `event.preventDefault()` will override `<Form>` behavior such as navigating to the specified URL.
 - **[`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method), [`encType`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype), [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target)**: Are not supported as they override `<Form>` behavior.
   - Similarly, `formMethod`, `formEncType`, and `formTarget` can be used to override the `method`, `encType`, and `target` props respectively, and using them will fallback to native browser behavior.
   - If you need to use these props, use the HTML `<form>` element instead.
-- **`key`**: Passing a `key` prop to a string `action` is not supported. If you'd like to trigger a re-render or perform a mutation, consider using a function `action` instead.
 - **`<input type="file">`**: Using this input type when the `action` is a string will match browser behavior by submitting the filename instead of the file object.
 
+<AppOnly>
+
 ## Examples
 
 ### Search form that leads to a search result page
@@ -318,3 +396,5 @@ export default async function PostPage({ params }) {
 ```
 
 See the [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) docs for more examples.
+
+</AppOnly>
diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
index a6b2d39117cc3..41e4af2890d99 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx
@@ -166,10 +166,10 @@ export default function Icon() {
 
 > **Good to know**:
 >
-> - By default, generated icons are [**statically optimized**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (generated at build time and cached) unless they use [dynamic functions](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) or uncached data.
+> - By default, generated icons are [**statically optimized**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (generated at build time and cached) unless they use [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-apis) or uncached data.
 > - You can generate multiple icons in the same file using [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
 > - You cannot generate a `favicon` icon. Use [`icon`](#icon) or a [favicon.ico](#favicon) file instead.
-> - App icons are special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
+> - App icons are special Route Handlers that is cached by default unless it uses a [Dynamic API](/docs/app/building-your-application/caching#dynamic-apis) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
 
 ### Props
 
diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
index 24942e0918f4b..ce0f84af009af 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/manifest.mdx
@@ -21,7 +21,7 @@ Add or generate a `manifest.(json|webmanifest)` file that matches the [Web Manif
 
 Add a `manifest.js` or `manifest.ts` file that returns a [`Manifest` object](#manifest-object).
 
-> Good to know: `manifest.js` is special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
+> Good to know: `manifest.js` is special Route Handlers that is cached by default unless it uses a [Dynamic API](/docs/app/building-your-application/caching#dynamic-apis) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
 
 ```ts filename="app/manifest.ts" switcher
 import type { MetadataRoute } from 'next'
diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
index 1e930f0228e89..d1e9343831048 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx
@@ -88,9 +88,9 @@ Generate a route segment's shared image by creating an `opengraph-image` or `twi
 
 > **Good to know**:
 >
-> - By default, generated images are [**statically optimized**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (generated at build time and cached) unless they use [dynamic functions](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) or uncached data.
+> - By default, generated images are [**statically optimized**](/docs/app/building-your-application/rendering/server-components#static-rendering-default) (generated at build time and cached) unless they use [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-apis) or uncached data.
 > - You can generate multiple Images in the same file using [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata).
-> - `opengraph-image.js` and `twitter-image.js` are special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
+> - `opengraph-image.js` and `twitter-image.js` are special Route Handlers that is cached by default unless it uses a [Dynamic API](/docs/app/building-your-application/caching#dynamic-apis) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
 
 The easiest way to generate an image is to use the [ImageResponse](/docs/app/api-reference/functions/image-response) API from `next/og`.
 
diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
index 3d822bb4499a1..a21f5426b653c 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/robots.mdx
@@ -19,7 +19,7 @@ Sitemap: https://acme.com/sitemap.xml
 
 Add a `robots.js` or `robots.ts` file that returns a [`Robots` object](#robots-object).
 
-> **Good to know**: `robots.js` is a special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
+> **Good to know**: `robots.js` is a special Route Handlers that is cached by default unless it uses a [Dynamic API](/docs/app/building-your-application/caching#dynamic-apis) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
 
 ```ts filename="app/robots.ts" switcher
 import type { MetadataRoute } from 'next'
diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
index f7e0cba5539f3..aeefcdde6f423 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/sitemap.mdx
@@ -41,7 +41,7 @@ For smaller applications, you can create a `sitemap.xml` file and place it in th
 
 You can use the `sitemap.(js|ts)` file convention to programmatically **generate** a sitemap by exporting a default function that returns an array of URLs. If using TypeScript, a [`Sitemap`](#returns) type is available.
 
-> **Good to know**: `sitemap.js` is a special Route Handlers that is cached by default unless it uses a [dynamic function](/docs/app/building-your-application/caching#dynamic-functions) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
+> **Good to know**: `sitemap.js` is a special Route Handlers that is cached by default unless it uses a [Dynamic API](/docs/app/building-your-application/caching#dynamic-apis) or [dynamic config](/docs/app/building-your-application/caching#segment-config-options) option.
 
 ```ts filename="app/sitemap.ts" switcher
 import type { MetadataRoute } from 'next'
diff --git a/docs/02-app/02-api-reference/02-file-conventions/default.mdx b/docs/02-app/02-api-reference/02-file-conventions/default.mdx
index b1275af15d817..eca38db9ef485 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/default.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/default.mdx
@@ -27,13 +27,32 @@ On refresh, Next.js will render a `default.js` for `@analytics`. If `default.js`
 
 Additionally, since `children` is an implicit slot, you also need to create a `default.js` file to render a fallback for `children` when Next.js cannot recover the active state of the parent page.
 
-## Props
+## Reference
 
 ### `params` (optional)
 
-An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) from the root segment down to the slot's subpages. For example:
-
-| Example                                    | URL          | `params`                            |
-| ------------------------------------------ | ------------ | ----------------------------------- |
-| `app/[artist]/@sidebar/default.js`         | `/zack`      | `{ artist: 'zack' }`                |
-| `app/[artist]/[album]/@sidebar/default.js` | `/zack/next` | `{ artist: 'zack', album: 'next' }` |
+A promise that resolves to an object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) from the root segment down to the slot's subpages. For example:
+
+```tsx filename="app/[artist]/@sidebar/default.js" switcher
+export default async function Default({
+  params,
+}: {
+  params: Promise<{ artist: string }>
+}) {
+  const artist = (await params).artist
+}
+```
+
+```jsx filename="app/[artist]/@sidebar/default.js" switcher
+export default async function Default({ params }) {
+  const artist = (await params).artist
+}
+```
+
+| Example                                    | URL          | `params`                                     |
+| ------------------------------------------ | ------------ | -------------------------------------------- |
+| `app/[artist]/@sidebar/default.js`         | `/zack`      | `Promise<{ artist: 'zack' }>`                |
+| `app/[artist]/[album]/@sidebar/default.js` | `/zack/next` | `Promise<{ artist: 'zack', album: 'next' }>` |
+
+- Since the `params` prop is a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function to access the values.
+  - In version 14 and earlier, `params` was a synchronous prop. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
diff --git a/docs/02-app/02-api-reference/02-file-conventions/instrumentation.mdx b/docs/02-app/02-api-reference/02-file-conventions/instrumentation.mdx
index b77adac4325f2..73a5659152f6a 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/instrumentation.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/instrumentation.mdx
@@ -11,33 +11,6 @@ The `instrumentation.js|ts` file is used to integrate observability tools into y
 
 To use it, place the file in the **root** of your application or inside a [`src` folder](/docs/app/building-your-application/configuring/src-directory) if using one.
 
-## Enabling Instrumentation
-
-Instrumentation is currently an experimental feature, to use the `instrumentation.js` file, you must explicitly opt-in by defining [`experimental.instrumentationHook = true;`](/docs/app/api-reference/next-config-js/instrumentationHook) in your `next.config.js`:
-
-```ts filename="next.config.ts" switcher
-import type { NextConfig } from 'next'
-
-const nextConfig: NextConfig = {
-  experimental: {
-    instrumentationHook: true,
-  },
-}
-
-export default nextConfig
-```
-
-```js filename="next.config.js" switcher
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    instrumentationHook: true,
-  },
-}
-
-module.exports = nextConfig
-```
-
 ## Exports
 
 ### `register` (optional)
@@ -161,8 +134,8 @@ export function onRequestError() {
 
 ## Version History
 
-| Version   | Changes                                                 |
-| --------- | ------------------------------------------------------- |
-| `v15.0.0` | `onRequestError` introduced                             |
-| `v14.0.4` | Turbopack support for `instrumentation`                 |
-| `v13.2.0` | `instrumentation` introduced as an experimental feature |
+| Version      | Changes                                                 |
+| ------------ | ------------------------------------------------------- |
+| `v15.0.0-RC` | `onRequestError` introduced, `instrumentation` stable   |
+| `v14.0.4`    | Turbopack support for `instrumentation`                 |
+| `v13.2.0`    | `instrumentation` introduced as an experimental feature |
diff --git a/docs/02-app/02-api-reference/02-file-conventions/layout.mdx b/docs/02-app/02-api-reference/02-file-conventions/layout.mdx
index df018a00dd338..dc0933a108b8d 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/layout.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/layout.mdx
@@ -3,7 +3,7 @@ title: layout.js
 description: API reference for the layout.js file.
 ---
 
-A **layout** is UI that is shared between routes.
+The `layout` file is used to define a layout in your Next.js application.
 
 ```tsx filename="app/dashboard/layout.tsx" switcher
 export default function DashboardLayout({
@@ -47,59 +47,78 @@ export default function RootLayout({ children }) {
 }
 ```
 
-## Props
+## Reference
 
-### `children` (required)
+### Props
 
-Layout components should accept and use a `children` prop. During rendering, `children` will be populated with the route segments the layout is wrapping. These will primarily be the component of a child [Layout](/docs/app/building-your-application/routing/pages) (if it exists) or [Page](/docs/app/building-your-application/routing/pages), but could also be other special files like [Loading](/docs/app/building-your-application/routing/loading-ui-and-streaming) or [Error](/docs/app/building-your-application/routing/error-handling) when applicable.
-
-### `params` (optional)
+#### `children` (required)
 
-The [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) object from the root segment down to that layout.
+Layout components should accept and use a `children` prop. During rendering, `children` will be populated with the route segments the layout is wrapping. These will primarily be the component of a child [Layout](/docs/app/building-your-application/routing/pages) (if it exists) or [Page](/docs/app/building-your-application/routing/pages), but could also be other special files like [Loading](/docs/app/building-your-application/routing/loading-ui-and-streaming) or [Error](/docs/app/building-your-application/routing/error-handling) when applicable.
 
-| Example                           | URL            | `params`                  |
-| --------------------------------- | -------------- | ------------------------- |
-| `app/dashboard/[team]/layout.js`  | `/dashboard/1` | `{ team: '1' }`           |
-| `app/shop/[tag]/[item]/layout.js` | `/shop/1/2`    | `{ tag: '1', item: '2' }` |
-| `app/blog/[...slug]/layout.js`    | `/blog/1/2`    | `{ slug: ['1', '2'] }`    |
+#### `params` (optional)
 
-For example:
+A promise that resolves to an object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) object from the root segment down to that layout.
 
-```tsx filename="app/shop/[tag]/[item]/layout.tsx" switcher
-export default function ShopLayout({
-  children,
+```tsx filename="app/dashboard/[team]/layout.tsx" switcher
+export default async function Layout({
   params,
 }: {
-  children: React.ReactNode
-  params: {
-    tag: string
-    item: string
-  }
+  params: Promise<{ team: string }>
 }) {
-  // URL -> /shop/shoes/nike-air-max-97
-  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
-  return <section>{children}</section>
+  const team = (await params).team
 }
 ```
 
-```jsx filename="app/shop/[tag]/[item]/layout.js" switcher
-export default function ShopLayout({ children, params }) {
-  // URL -> /shop/shoes/nike-air-max-97
-  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
-  return <section>{children}</section>
+```jsx filename="app/dashboard/[team]/layout.js" switcher
+export default async function Layout({ params }) {
+  const team = (await params).team
 }
 ```
 
-## Good to know
+| Example Route                     | URL            | `params`                           |
+| --------------------------------- | -------------- | ---------------------------------- |
+| `app/dashboard/[team]/layout.js`  | `/dashboard/1` | `Promise<{ team: '1' }>`           |
+| `app/shop/[tag]/[item]/layout.js` | `/shop/1/2`    | `Promise<{ tag: '1', item: '2' }>` |
+| `app/blog/[...slug]/layout.js`    | `/blog/1/2`    | `Promise<{ slug: ['1', '2'] }>`    |
+
+- Since the `params` prop is a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function to access the values.
+  - In version 14 and earlier, `params` was a synchronous prop. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
 
 ### Root Layouts
 
-- The `app` directory **must** include a root `app/layout.js`.
+The `app` directory **must** include a root `app/layout.js`.
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
 - The root layout **must** define `<html>` and `<body>` tags.
-  - You should **not** manually add `<head>` tags such as `<title>` and `<meta>` to root layouts. Instead, you should use the [Metadata API](/docs/app/api-reference/functions/generate-metadata) which automatically handles advanced requirements such as streaming and de-duplicating `<head>` elements.
+  - You should **not** manually add `<head>` tags such as `<title>` and `<meta>` to root layouts. Instead, you should use the [Metadata API](/docs/app/building-your-application/optimizing/metadata) which automatically handles advanced requirements such as streaming and de-duplicating `<head>` elements.
 - You can use [route groups](/docs/app/building-your-application/routing/route-groups) to create multiple root layouts.
   - Navigating **across multiple root layouts** will cause a **full page load** (as opposed to a client-side navigation). For example, navigating from `/cart` that uses `app/(shop)/layout.js` to `/blog` that uses `app/(marketing)/layout.js` will cause a full page load. This **only** applies to multiple root layouts.
 
+## Caveats
+
 ### 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.
@@ -122,7 +141,7 @@ This performance optimization allows navigation between pages that share a layou
 
 Because `dashboard/layout.tsx` doesn't re-render, the `searchParams` prop in the layout Server Component might become **stale** after navigation.
 
-Instead, use the Page [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop or the [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) hook in a Client Component, which is re-rendered on the client with the latest `searchParams`.
+Instead, use the Page [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional) prop or the [`useSearchParams`](/docs/app/api-reference/functions/use-search-params) hook in a Client Component within the layout, which is rerendered on the client with the latest `searchParams`.
 
 ### Layouts cannot access `pathname`
 
@@ -162,8 +181,75 @@ Common `pathname` patterns can also be implemented with [`params`](#params-optio
 
 See the [examples](/docs/app/building-your-application/routing/layouts-and-templates#examples) section for more information.
 
+## Examples
+
+### Displaying content based on `params`
+
+Using [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes), you can display or fetch specific content based on the `params` prop.
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+export default async function DashboardLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: Promise<{ team: string }>
+}) {
+  const { team } = await params
+
+  return (
+    <section>
+      <header>
+        <h1>Welcome to {team}'s Dashboard</h1>
+      </header>
+      <main>{children}</main>
+    </section>
+  )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+export default async function DashboardLayout({ children, params }) {
+  const { team } = await params
+
+  return (
+    <section>
+      <header>
+        <h1>Welcome to {team}'s Dashboard</h1>
+      </header>
+      <main>{children}</main>
+    </section>
+  )
+}
+```
+
+### Reading `params` in Client Components
+
+To use `params` in a Client Component (which cannot be `async`), you can use React's [`use`](https://react.dev/reference/react/use) function to read the promise:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { use } from 'react'
+
+export function Page({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = use(params)
+}
+```
+
+```js filename="app/page.js" switcher
+'use client'
+
+import { use } from 'react'
+
+export function Page({ params }) {
+  const { slug } = use(params)
+}
+```
+
 ## Version History
 
-| Version   | Changes              |
-| --------- | -------------------- |
-| `v13.0.0` | `layout` introduced. |
+| Version      | Changes                                                                                                          |
+| ------------ | ---------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `params` is now a promise. A [codemod](/docs/app/building-your-application/upgrading/codemods#150) is available. |
+| `v13.0.0`    | `layout` introduced.                                                                                             |
diff --git a/docs/02-app/02-api-reference/02-file-conventions/not-found.mdx b/docs/02-app/02-api-reference/02-file-conventions/not-found.mdx
index 6ecce2046d225..dd23e63c4f06d 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/not-found.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/not-found.mdx
@@ -48,7 +48,7 @@ import Link from 'next/link'
 import { headers } from 'next/headers'
 
 export default async function NotFound() {
-  const headersList = headers()
+  const headersList = await headers()
   const domain = headersList.get('host')
   const data = await getSiteData(domain)
   return (
@@ -68,7 +68,7 @@ import Link from 'next/link'
 import { headers } from 'next/headers'
 
 export default async function NotFound() {
-  const headersList = headers()
+  const headersList = await headers()
   const domain = headersList.get('host')
   const data = await getSiteData(domain)
   return (
diff --git a/docs/02-app/02-api-reference/02-file-conventions/page.mdx b/docs/02-app/02-api-reference/02-file-conventions/page.mdx
index e1cfa04de45b0..65b79ae95c2f6 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/page.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/page.mdx
@@ -3,15 +3,15 @@ title: page.js
 description: API reference for the page.js file.
 ---
 
-A **page** is UI that is unique to a route.
+The `page` file is used to define a page in your Next.js application.
 
 ```tsx filename="app/blog/[slug]/page.tsx" switcher
 export default function Page({
   params,
   searchParams,
 }: {
-  params: { slug: string }
-  searchParams: { [key: string]: string | string[] | undefined }
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }) {
   return <h1>My Page</h1>
 }
@@ -23,35 +23,167 @@ export default function Page({ params, searchParams }) {
 }
 ```
 
-## Props
+## Reference
 
-### `params` (optional)
+### Props
 
-An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) from the root segment down to that page. For example:
+#### `params` (optional)
 
-| Example                              | URL         | `params`                       |
-| ------------------------------------ | ----------- | ------------------------------ |
-| `app/shop/[slug]/page.js`            | `/shop/1`   | `{ slug: '1' }`                |
-| `app/shop/[category]/[item]/page.js` | `/shop/1/2` | `{ category: '1', item: '2' }` |
-| `app/shop/[...slug]/page.js`         | `/shop/1/2` | `{ slug: ['1', '2'] }`         |
+A promise that resolves to an object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) from the root segment down to that page.
 
-### `searchParams` (optional)
+```tsx filename="app/shop/[slug]/page.tsx" switcher
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const slug = (await params).slug
+}
+```
+
+```jsx filename="app/shop/[slug]/page.js" switcher
+export default async function Page({ params }) {
+  const slug = (await params).slug
+}
+```
+
+| Example Route                        | URL         | `params`                                |
+| ------------------------------------ | ----------- | --------------------------------------- |
+| `app/shop/[slug]/page.js`            | `/shop/1`   | `Promise<{ slug: '1' }>`                |
+| `app/shop/[category]/[item]/page.js` | `/shop/1/2` | `Promise<{ category: '1', item: '2' }>` |
+| `app/shop/[...slug]/page.js`         | `/shop/1/2` | `Promise<{ slug: ['1', '2'] }>`         |
+
+- Since the `params` prop is a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function to access the values.
+  - In version 14 and earlier, `params` was a synchronous prop. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
+
+#### `searchParams` (optional)
+
+A promise that resolves to an object containing the [search parameters](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) of the current URL. For example:
+
+```tsx filename="app/shop/page.tsx" switcher
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}) {
+  const filters = (await searchParams).filters
+}
+```
+
+```jsx filename="app/shop/page.js" switcher
+export default async function Page({ searchParams }) {
+  const filters = (await searchParams).filters
+}
+```
+
+| Example URL     | `searchParams`                |
+| --------------- | ----------------------------- |
+| `/shop?a=1`     | `Promise<{ a: '1' }>`         |
+| `/shop?a=1&b=2` | `Promise<{ a: '1', b: '2' }>` |
+| `/shop?a=1&a=2` | `Promise<{ a: ['1', '2'] }>`  |
+
+- Since the `searchParams` prop is a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function to access the values.
+  - In version 14 and earlier, `searchParams` was a synchronous prop. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
+- `searchParams` is a **[Dynamic API](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-apis)** whose values cannot be known ahead of time. Using it will opt the page into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)** at request time.
+- `searchParams` is a plain JavaScript object, not a `URLSearchParams` instance.
+
+## Examples
 
-An object containing the [search parameters](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) of the current URL. For example:
+### Displaying content based on `params`
 
-| URL             | `searchParams`       |
-| --------------- | -------------------- |
-| `/shop?a=1`     | `{ a: '1' }`         |
-| `/shop?a=1&b=2` | `{ a: '1', b: '2' }` |
-| `/shop?a=1&a=2` | `{ a: ['1', '2'] }`  |
+Using [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes), you can display or fetch specific content for the page based on the `params` prop.
 
-> **Good to know**:
->
-> - `searchParams` is a **[Dynamic API](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions)** whose values cannot be known ahead of time. Using it will opt the page into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)** at request time.
-> - `searchParams` returns a plain JavaScript object and not a `URLSearchParams` instance.
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  return <h1>Blog Post: {slug}</h1>
+}
+```
+
+```jsx filename="app/blog/[slug]/page.js" switcher
+export default async function Page({ params }) {
+  const { slug } = await params
+  return <h1>Blog Post: {slug}</h1>
+}
+```
+
+### Handling filtering with `searchParams`
+
+You can use the `searchParams` prop to handle filtering, pagination, or sorting based on the query string of the URL.
+
+```tsx filename="app/shop/page.tsx" switcher
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}) {
+  const { page = '1', sort = 'asc', query = '' } = await searchParams
+
+  return (
+    <div>
+      <h1>Product Listing</h1>
+      <p>Search query: {query}</p>
+      <p>Current page: {page}</p>
+      <p>Sort order: {sort}</p>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/shop/page.js" switcher
+export default async function Page({ searchParams }) {
+  const { page = '1', sort = 'asc', query = '' } = await searchParams
+
+  return (
+    <div>
+      <h1>Product Listing</h1>
+      <p>Search query: {query}</p>
+      <p>Current page: {page}</p>
+      <p>Sort order: {sort}</p>
+    </div>
+  )
+}
+```
+
+### Reading `searchParams` and `params` in Client Components
+
+To use `searchParams` and `params` in a Client Component (which cannot be `async`), you can use React's [`use`](https://react.dev/reference/react/use) function to read the promise:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import { use } from 'react'
+
+export function Page({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}) {
+  const { slug } = use(params)
+  const { query } = use(searchParams)
+}
+```
+
+```js filename="app/page.js" switcher
+'use client'
+
+import { use } from 'react'
+
+export function Page({ params, searchParams }) {
+  const { slug } = use(params)
+  const { query } = use(searchParams)
+}
+```
 
 ## Version History
 
-| Version   | Changes            |
-| --------- | ------------------ |
-| `v13.0.0` | `page` introduced. |
+| Version      | Changes                                                                                                                             |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `params` and `searchParams` are now promises. A [codemod](/docs/app/building-your-application/upgrading/codemods#150) is available. |
+| `v13.0.0`    | `page` introduced.                                                                                                                  |
diff --git a/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx b/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
index 6b91675f24f86..4c9348493c9ed 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/route-segment-config.mdx
@@ -55,12 +55,12 @@ export const dynamic = 'auto'
   - Setting the option of every `fetch()` request in a layout or page to `{ cache: 'no-store', next: { revalidate: 0 } }`.
   - Setting the segment config to `export const fetchCache = 'force-no-store'`
 
-- **`'error'`**: Force static rendering and cache the data of a layout or page by causing an error if any components use [dynamic functions](/docs/app/building-your-application/rendering/server-components#dynamic-functions) or uncached data. This option is equivalent to:
+- **`'error'`**: Force static rendering and cache the data of a layout or page by causing an error if any components use [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis) or uncached data. This option is equivalent to:
   - `getStaticProps()` in the `pages` directory.
   - Setting the option of every `fetch()` request in a layout or page to `{ cache: 'force-cache' }`.
   - Setting the segment config to `fetchCache = 'only-cache', dynamicParams = false`.
   - `dynamic = 'error'` changes the default of `dynamicParams` from `true` to `false`. You can opt back into dynamically rendering pages for dynamic params not generated by `generateStaticParams` by manually setting `dynamicParams = true`.
-- **`'force-static'`**: Force static rendering and cache the data of a layout or page by forcing [`cookies()`](/docs/app/api-reference/functions/cookies), [`headers()`](/docs/app/api-reference/functions/headers) and [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) to return empty values.
+- **`'force-static'`**: Force static rendering and cache the data of a layout or page by forcing [`cookies`](/docs/app/api-reference/functions/cookies), [`headers()`](/docs/app/api-reference/functions/headers) and [`useSearchParams()`](/docs/app/api-reference/functions/use-search-params) to return empty values.
 
 > **Good to know**:
 >
@@ -102,8 +102,8 @@ export const revalidate = false
 // false | 0 | number
 ```
 
-- **`false`** (default): The default heuristic to cache any `fetch` requests that set their `cache` option to `'force-cache'` or are discovered before a [dynamic function](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) is used. Semantically equivalent to `revalidate: Infinity` which effectively means the resource should be cached indefinitely. It is still possible for individual `fetch` requests to use `cache: 'no-store'` or `revalidate: 0` to avoid being cached and make the route dynamically rendered. Or set `revalidate` to a positive number lower than the route default to increase the revalidation frequency of a route.
-- **`0`**: Ensure a layout or page is always [dynamically rendered](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) even if no dynamic functions or uncached data fetches are discovered. This option changes the default of `fetch` requests that do not set a `cache` option to `'no-store'` but leaves `fetch` requests that opt into `'force-cache'` or use a positive `revalidate` as is.
+- **`false`** (default): The default heuristic to cache any `fetch` requests that set their `cache` option to `'force-cache'` or are discovered before a [Dynamic API](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-apis) is used. Semantically equivalent to `revalidate: Infinity` which effectively means the resource should be cached indefinitely. It is still possible for individual `fetch` requests to use `cache: 'no-store'` or `revalidate: 0` to avoid being cached and make the route dynamically rendered. Or set `revalidate` to a positive number lower than the route default to increase the revalidation frequency of a route.
+- **`0`**: Ensure a layout or page is always [dynamically rendered](/docs/app/building-your-application/rendering/server-components#dynamic-rendering) even if no Dynamic APIs or uncached data fetches are discovered. This option changes the default of `fetch` requests that do not set a `cache` option to `'no-store'` but leaves `fetch` requests that opt into `'force-cache'` or use a positive `revalidate` as is.
 - **`number`**: (in seconds) Set the default revalidation frequency of a layout or page to `n` seconds.
 
 > **Good to know**:
@@ -122,7 +122,7 @@ export const revalidate = false
 <details>
   <summary>This is an advanced option that should only be used if you specifically need to override the default behavior.</summary>
 
-By default, Next.js **will cache** any `fetch()` requests that are reachable **before** any [dynamic functions](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions) are used and **will not cache** `fetch` requests that are discovered **after** dynamic functions are used.
+By default, Next.js **will cache** any `fetch()` requests that are reachable **before** any [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-apis) are used and **will not cache** `fetch` requests that are discovered **after** Dynamic APIs are used.
 
 `fetchCache` allows you to override the default `cache` option of all `fetch` requests in a layout or page.
 
@@ -138,11 +138,11 @@ export const fetchCache = 'auto'
 // 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
 ```
 
-- **`'auto'`** (default): The default option to cache `fetch` requests before dynamic functions with the `cache` option they provide and not cache `fetch` requests after dynamic functions.
-- **`'default-cache'`**: Allow any `cache` option to be passed to `fetch` but if no option is provided then set the `cache` option to `'force-cache'`. This means that even `fetch` requests after dynamic functions are considered static.
+- **`'auto'`** (default): The default option to cache `fetch` requests before Dynamic APIs with the `cache` option they provide and not cache `fetch` requests after Dynamic APIs.
+- **`'default-cache'`**: Allow any `cache` option to be passed to `fetch` but if no option is provided then set the `cache` option to `'force-cache'`. This means that even `fetch` requests after Dynamic APIs are considered static.
 - **`'only-cache'`**: Ensure all `fetch` requests opt into caching by changing the default to `cache: 'force-cache'` if no option is provided and causing an error if any `fetch` requests use `cache: 'no-store'`.
 - **`'force-cache'`**: Ensure all `fetch` requests opt into caching by setting the `cache` option of all `fetch` requests to `'force-cache'`.
-- **`'default-no-store'`**: Allow any `cache` option to be passed to `fetch` but if no option is provided then set the `cache` option to `'no-store'`. This means that even `fetch` requests before dynamic functions are considered dynamic.
+- **`'default-no-store'`**: Allow any `cache` option to be passed to `fetch` but if no option is provided then set the `cache` option to `'no-store'`. This means that even `fetch` requests before Dynamic APIs are considered dynamic.
 - **`'only-no-store'`**: Ensure all `fetch` requests opt out of caching by changing the default to `cache: 'no-store'` if no option is provided and causing an error if any `fetch` requests use `cache: 'force-cache'`
 - **`'force-no-store'`**: Ensure all `fetch` requests opt out of caching by setting the `cache` option of all `fetch` requests to `'no-store'`. This forces all `fetch` requests to be re-fetched every request even if they provide a `'force-cache'` option.
 
@@ -221,3 +221,9 @@ export const maxDuration = 5
 The `generateStaticParams` function can be used in combination with [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes) to define the list of route segment parameters that will be statically generated at build time instead of on-demand at request time.
 
 See the [API reference](/docs/app/api-reference/functions/generate-static-params) for more details.
+
+## Version History
+
+| Version      |                                                                                                                                                                                                                                   |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `export const runtime = "experimental-edge"` deprecated. A [codemod](/docs/app/building-your-application/upgrading/codemods#transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge) is available. |
diff --git a/docs/02-app/02-api-reference/02-file-conventions/route.mdx b/docs/02-app/02-api-reference/02-file-conventions/route.mdx
index 999e90479cb88..afe7b17c3bf80 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/route.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/route.mdx
@@ -5,7 +5,21 @@ description: API reference for the route.js special file.
 
 Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response) APIs.
 
-## HTTP Methods
+```ts filename="route.ts" switcher
+export async function GET() {
+  return new Response.json({ message: 'Hello World' })
+}
+```
+
+```js filename="route.js" switcher
+export async function GET() {
+  return new Response.json({ message: 'Hello World' })
+}
+```
+
+## Reference
+
+### HTTP Methods
 
 A **route** file allows you to create custom request handlers for a given route. The following [HTTP methods](https://developer.mozilla.org/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`.
 
@@ -43,51 +57,83 @@ export async function PATCH(request) {}
 export async function OPTIONS(request) {}
 ```
 
-> **Good to know**: Route Handlers are only available inside the App Router. You **do not** need to use API Routes (`pages`) and Route Handlers (`app`) together, as Route Handlers should be able to handle all use cases.
-
-## Parameters
+### Parameters
 
-### `request` (optional)
+#### `request` (optional)
 
 The `request` object is a [NextRequest](/docs/app/api-reference/functions/next-request) object, which is an extension of the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) API. `NextRequest` gives you further control over the incoming request, including easily accessing `cookies` and an extended, parsed, URL object `nextUrl`.
 
-### `context` (optional)
+```ts filename="route.ts" switcher
+import type { NextRequest } from 'next/server'
 
-```ts filename="app/dashboard/[team]/route.ts" switcher
-type Params = {
-  team: string
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl
 }
+```
 
-export async function GET(request: Request, context: { params: Params }) {
-  const team = context.params.team // '1'
+```js filename="route.js" switcher
+export async function GET(request) {
+  const url = request.nextUrl
 }
-
-// Define params type according to your route parameters (see table below)
 ```
 
-```js filename="app/dashboard/[team]/route.js" switcher
+#### `context` (optional)
 
-export async function GET(request, context: { params }) {
-  const team = context.params.team // '1'
+- **`params`**: a promise that resolves to an object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) for the current route.
+
+```ts filename="app/dashboard/[team]/route.ts" switcher
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ team: string }> }
+) {
+  const team = (await params).team
 }
+```
 
+```js filename="app/dashboard/[team]/route.js" switcher
+export async function GET(request, { params }) {
+  const team = (await params).team
+}
 ```
 
-Currently, the only value of `context` is `params`, which is an object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) for the current route.
+| Example                          | URL            | `params`                           |
+| -------------------------------- | -------------- | ---------------------------------- |
+| `app/dashboard/[team]/route.js`  | `/dashboard/1` | `Promise<{ team: '1' }>`           |
+| `app/shop/[tag]/[item]/route.js` | `/shop/1/2`    | `Promise<{ tag: '1', item: '2' }>` |
+| `app/blog/[...slug]/route.js`    | `/blog/1/2`    | `Promise<{ slug: ['1', '2'] }>`    |
+
+## Examples
+
+### Handling cookies
+
+```ts filename="route.ts" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request: NextRequest) {
+  const cookieStore = await cookies()
+
+  const a = cookieStore.get('a')
+  const b = cookieStore.set('b', '1')
+  const c = cookieStore.delete('c')
+}
+```
 
-| Example                          | URL            | `params`                  |
-| -------------------------------- | -------------- | ------------------------- |
-| `app/dashboard/[team]/route.js`  | `/dashboard/1` | `{ team: '1' }`           |
-| `app/shop/[tag]/[item]/route.js` | `/shop/1/2`    | `{ tag: '1', item: '2' }` |
-| `app/blog/[...slug]/route.js`    | `/blog/1/2`    | `{ slug: ['1', '2'] }`    |
+```js filename="route.js" switcher
+import { cookies } from 'next/headers'
 
-## NextResponse
+export async function GET(request) {
+  const cookieStore = await cookies()
 
-Route Handlers can extend the Web Response API by returning a `NextResponse` object. This allows you to easily set cookies, headers, redirect, and rewrite. [View the API reference](/docs/app/api-reference/functions/next-response).
+  const a = cookieStore.get('a')
+  const b = cookieStore.set('b', '1')
+  const c = cookieStore.delete('c')
+}
+```
 
 ## Version History
 
-| Version   | Changes                                                                   |
-| --------- | ------------------------------------------------------------------------- |
-| `v15.0.0` | The default caching for `GET` handlers was changed from static to dynamic |
-| `v13.2.0` | Route Handlers are introduced.                                            |
+| Version      | Changes                                                                                                                 |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `context.params` is now a promise. A [codemod](/docs/app/building-your-application/upgrading/codemods#150) is available |
+| `v15.0.0-RC` | The default caching for `GET` handlers was changed from static to dynamic                                               |
+| `v13.2.0`    | Route Handlers are introduced.                                                                                          |
diff --git a/docs/02-app/02-api-reference/04-functions/connection.mdx b/docs/02-app/02-api-reference/04-functions/connection.mdx
new file mode 100644
index 0000000000000..cf4114218264c
--- /dev/null
+++ b/docs/02-app/02-api-reference/04-functions/connection.mdx
@@ -0,0 +1,57 @@
+---
+title: connection
+description: API Reference for the connection function.
+---
+
+The `connection()` function allows you to indicate rendering should wait for an incoming user request before continuing.
+
+It's useful when a component doesn’t use [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis), but you want it to be dynamically rendered at runtime and not statically rendered at build time. This usually occurs when you access external information that you intentionally want to change the result of a render, such as `Math.random()` or `new Date()`.
+
+```ts filename="app/page.tsx" switcher
+import { connection } from 'next/server'
+
+export default async function Page() {
+  await connection()
+  // Everything below will be excluded from prerendering
+  const rand = Math.random()
+  return <span>{rand}</span>
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { connection } from 'next/server'
+
+export default async function Page() {
+  await connection()
+  // Everything below will be excluded from prerendering
+  const rand = Math.random()
+  return <span>{rand}</span>
+}
+```
+
+## Reference
+
+### Type
+
+```jsx
+function connection(): Promise<void>
+```
+
+### Parameters
+
+- The function does not accept any parameters.
+
+### Returns
+
+- The function returns a `void` Promise. It is not meant to be consumed.
+
+## Good to know
+
+- `connection` replaces [`unstable_noStore`](/docs/app/api-reference/functions/unstable_noStore) to better align with the future of Next.js.
+- The function is only necessary when dynamic rendering is required and common Dynamic APIs are not used.
+
+### Version History
+
+| Version      | Changes                  |
+| ------------ | ------------------------ |
+| `v15.0.0-RC` | `connection` introduced. |
diff --git a/docs/02-app/02-api-reference/04-functions/cookies.mdx b/docs/02-app/02-api-reference/04-functions/cookies.mdx
index 7b2b78bda4196..13762003552a9 100644
--- a/docs/02-app/02-api-reference/04-functions/cookies.mdx
+++ b/docs/02-app/02-api-reference/04-functions/cookies.mdx
@@ -3,13 +3,13 @@ title: cookies
 description: API Reference for the cookies function.
 ---
 
-The `cookies` function allows you to read the HTTP incoming request cookies from a [Server Component](/docs/app/building-your-application/rendering/server-components) or write outgoing request cookies in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
+`cookies` is an **async** function that allows you to read the HTTP incoming request cookies in [Server Component](/docs/app/building-your-application/rendering/server-components), and read/write outgoing request cookies in [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
 
 ```tsx filename="app/page.tsx" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const theme = cookieStore.get('theme')
   return '...'
 }
@@ -18,8 +18,8 @@ export default function Page() {
 ```js filename="app/page.js" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const theme = cookieStore.get('theme')
   return '...'
 }
@@ -62,13 +62,15 @@ When setting a cookie, the following properties from the `options` object are su
 
 To learn more about these options, see the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies).
 
-## Caveats
+## Good to know
 
-- `cookies()` is a [Dynamic Function](/docs/app/building-your-application/rendering/server-components#dynamic-functions) whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into [dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering).
-- The `.delete()` method can only be called:
+- `cookies` is an **asynchronous** function that returns a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function to access cookies.
+  - In version 14 and earlier, `cookies` was a synchronous function. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
+- `cookies` is a [Dynamic API](/docs/app/building-your-application/rendering/server-components#dynamic-apis) whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into [dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering).
+- The `.delete` method can only be called:
   - In a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
-  - If it belongs to the same domain from which `.set()` is called. Additionally, the code must be executed on the same protocol (HTTP or HTTPS) as the cookie you want to delete.
-- HTTP does not allow setting cookies after streaming starts, so you must use `.set()` in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
+  - If it belongs to the same domain from which `.set` is called. Additionally, the code must be executed on the same protocol (HTTP or HTTPS) as the cookie you want to delete.
+- HTTP does not allow setting cookies after streaming starts, so you must use `.set` in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
 
 ## Examples
 
@@ -79,8 +81,8 @@ You can use the `cookies().get('name')` method to get a single cookie:
 ```tsx filename="app/page.tsx" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const theme = cookieStore.get('theme')
   return '...'
 }
@@ -89,8 +91,8 @@ export default function Page() {
 ```jsx filename="app/page.js" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const theme = cookieStore.get('theme')
   return '...'
 }
@@ -103,8 +105,8 @@ You can use the `cookies().getAll()` method to get all cookies with a matching n
 ```tsx filename="app/page.tsx" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   return cookieStore.getAll().map((cookie) => (
     <div key={cookie.name}>
       <p>Name: {cookie.name}</p>
@@ -117,8 +119,8 @@ export default function Page() {
 ```jsx filename="app/page.js" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   return cookieStore.getAll().map((cookie) => (
     <div key={cookie.name}>
       <p>Name: {cookie.name}</p>
@@ -137,12 +139,14 @@ You can use the `cookies().set(name, value, options)` method in a [Server Action
 
 import { cookies } from 'next/headers'
 
-async function create(data) {
-  cookies().set('name', 'lee')
+export async function create(data) {
+  const cookieStore = await cookies()
+
+  cookieStore().set('name', 'lee')
   // or
-  cookies().set('name', 'lee', { secure: true })
+  cookieStore().set('name', 'lee', { secure: true })
   // or
-  cookies().set({
+  cookieStore().set({
     name: 'name',
     value: 'lee',
     httpOnly: true,
@@ -156,12 +160,14 @@ async function create(data) {
 
 import { cookies } from 'next/headers'
 
-async function create(data) {
-  cookies().set('name', 'lee')
+export async function create(data) {
+  const cookieStore = await cookies()
+
+  cookieStore().set('name', 'lee')
   // or
-  cookies().set('name', 'lee', { secure: true })
+  cookieStore().set('name', 'lee', { secure: true })
   // or
-  cookies().set({
+  cookieStore().set({
     name: 'name',
     value: 'lee',
     httpOnly: true,
@@ -170,15 +176,15 @@ async function create(data) {
 }
 ```
 
-### Check if a cookie exists
+### Checking if a cookie exists
 
 You can use the `cookies().has(name)` method to check if a cookie exists:
 
 ```tsx filename="app/page.ts" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const hasCookie = cookieStore.has('theme')
   return '...'
 }
@@ -187,8 +193,8 @@ export default function Page() {
 ```jsx filename="app/page.js" switcher
 import { cookies } from 'next/headers'
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const hasCookie = cookieStore.has('theme')
   return '...'
 }
@@ -205,8 +211,8 @@ Using the `delete()` method:
 
 import { cookies } from 'next/headers'
 
-async function delete(data) {
-  cookies().delete('name')
+export async function delete(data) {
+  (await cookies()).delete('name')
 }
 ```
 
@@ -215,8 +221,8 @@ async function delete(data) {
 
 import { cookies } from 'next/headers'
 
-async function delete(data) {
-  cookies().delete('name')
+export async function delete(data) {
+  (await cookies()).delete('name')
 }
 ```
 
@@ -227,8 +233,8 @@ Setting a new cookie with the same name and an empty value:
 
 import { cookies } from 'next/headers'
 
-async function delete(data) {
-  cookies().set('name', '')
+export async function delete(data) {
+  (await cookies()).set('name', '')
 }
 ```
 
@@ -237,8 +243,8 @@ async function delete(data) {
 
 import { cookies } from 'next/headers'
 
-async function delete(data) {
-  cookies().set('name', '')
+export async function delete(data) {
+  (await cookies()).set('name', '')
 }
 ```
 
@@ -249,8 +255,8 @@ Setting the `maxAge` to 0 will immediately expire a cookie. `maxAge` accepts a v
 
 import { cookies } from 'next/headers'
 
-async function delete(data) {
-  cookies().set('name', 'value', { maxAge: 0 })
+export async function delete(data) {
+  (await cookies()).set('name', 'value', { maxAge: 0 })
 }
 ```
 
@@ -259,13 +265,15 @@ async function delete(data) {
 
 import { cookies } from 'next/headers'
 
-async function delete(data) {
-  cookies().set('name', 'value', { maxAge: 0 })
+export async function delete(data) {
+  (await cookies()).set('name', 'value', { maxAge: 0 })
+``
 }
 ```
 
 ## Version History
 
-| Version   | Changes               |
-| --------- | --------------------- |
-| `v13.0.0` | `cookies` introduced. |
+| Version      | Changes                                                                                                                   |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `cookies` is now an async function. A [codemod](/docs/app/building-your-application/upgrading/codemods#150) is available. |
+| `v13.0.0`    | `cookies` introduced.                                                                                                     |
diff --git a/docs/02-app/02-api-reference/04-functions/draft-mode.mdx b/docs/02-app/02-api-reference/04-functions/draft-mode.mdx
index 4f5d0591a4038..ec6deee7fd780 100644
--- a/docs/02-app/02-api-reference/04-functions/draft-mode.mdx
+++ b/docs/02-app/02-api-reference/04-functions/draft-mode.mdx
@@ -8,7 +8,23 @@ related:
     - app/building-your-application/configuring/draft-mode
 ---
 
-The `draftMode` function allows you to enable and disable [Draft Mode](/docs/app/building-your-application/configuring/draft-mode), as well as check if Draft Mode is enabled in a [Server Component](/docs/app/building-your-application/rendering/server-components).
+`draftMode` is an **async** function allows you to enable and disable [Draft Mode](/docs/app/building-your-application/configuring/draft-mode), as well as check if Draft Mode is enabled in a [Server Component](/docs/app/building-your-application/rendering/server-components).
+
+```tsx filename="app/page.ts"
+import { draftMode } from 'next/headers'
+
+export default async function Page() {
+  const { isEnabled } = await draftMode()
+}
+```
+
+```jsx filename="app/page.js"
+import { draftMode } from 'next/headers'
+
+export default async function Page() {
+  const { isEnabled } = await draftMode()
+}
+```
 
 ## Reference
 
@@ -20,10 +36,12 @@ The following methods and properties are available:
 | `enable()`  | Enables Draft Mode in a Route Handler by setting a cookie (`__prerender_bypass`). |
 | `disable()` | Disables Draft Mode in a Route Handler by deleting a cookie.                      |
 
-> **Good to know:**
->
-> - A new bypass cookie value will be generated each time you run `next build`. This ensures that the bypass cookie can’t be guessed.
-> - To test Draft Mode locally over HTTP, your browser will need to allow third-party cookies and local storage access.
+## Good to know
+
+- `draftMode` is an **asynchronous** function that returns a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function.
+  - In version 14 and earlier, `draftMode` was a synchronous function. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
+- A new bypass cookie value will be generated each time you run `next build`. This ensures that the bypass cookie can’t be guessed.
+- To test Draft Mode locally over HTTP, your browser will need to allow third-party cookies and local storage access.
 
 ## Examples
 
@@ -35,7 +53,8 @@ To enable Draft Mode, create a new [Route Handler](/docs/app/building-your-appli
 import { draftMode } from 'next/headers'
 
 export async function GET(request: Request) {
-  draftMode().enable()
+  const draft = await draftMode()
+  draft().enable()
   return new Response('Draft mode is enabled')
 }
 ```
@@ -44,7 +63,8 @@ export async function GET(request: Request) {
 import { draftMode } from 'next/headers'
 
 export async function GET(request) {
-  draftMode().enable()
+  const draft = await draftMode()
+  draft().enable()
   return new Response('Draft mode is enabled')
 }
 ```
@@ -59,7 +79,8 @@ To disable Draft Mode manually, call the `disable()` method in your [Route Handl
 import { draftMode } from 'next/headers'
 
 export async function GET(request: Request) {
-  draftMode().disable()
+  const draft = await draftMode()
+  draft().disable()
   return new Response('Draft mode is disabled')
 }
 ```
@@ -68,7 +89,8 @@ export async function GET(request: Request) {
 import { draftMode } from 'next/headers'
 
 export async function GET(request) {
-  draftMode().disable()
+  const draft = await draftMode()
+  draft().disable()
   return new Response('Draft mode is disabled')
 }
 ```
@@ -82,8 +104,8 @@ You can check if Draft Mode is enabled in a Server Component with the `isEnabled
 ```tsx filename="app/page.ts"
 import { draftMode } from 'next/headers'
 
-export default function Page() {
-  const { isEnabled } = draftMode()
+export default async function Page() {
+  const { isEnabled } = await draftMode()
   return (
     <main>
       <h1>My Blog Post</h1>
@@ -96,8 +118,8 @@ export default function Page() {
 ```jsx filename="app/page.js"
 import { draftMode } from 'next/headers'
 
-export default function Page() {
-  const { isEnabled } = draftMode()
+export default async function Page() {
+  const { isEnabled } = await draftMode()
   return (
     <main>
       <h1>My Blog Post</h1>
@@ -109,6 +131,7 @@ export default function Page() {
 
 ## Version History
 
-| Version   | Changes                 |
-| --------- | ----------------------- |
-| `v13.4.0` | `draftMode` introduced. |
+| Version      | Changes                                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `draftMode` is now an async function. A [codemod](/docs/app/building-your-application/upgrading/codemods#150) is available. |
+| `v13.4.0`    | `draftMode` introduced.                                                                                                     |
diff --git a/docs/02-app/02-api-reference/04-functions/generate-image-metadata.mdx b/docs/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
index f9b43525f9c8e..c9b27dece993e 100644
--- a/docs/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
+++ b/docs/02-app/02-api-reference/04-functions/generate-image-metadata.mdx
@@ -164,7 +164,7 @@ export default async function Image({
   params: { id: string }
   id: number
 }) {
-  const productId = params.id
+  const productId = (await params).id
   const imageId = id
   const text = await getCaptionForImage(productId, imageId)
 
@@ -200,7 +200,7 @@ export async function generateImageMetadata({ params }) {
 }
 
 export default async function Image({ params, id }) {
-  const productId = params.id
+  const productId = (await params).id
   const imageId = id
   const text = await getCaptionForImage(productId, imageId)
 
diff --git a/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx b/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx
index 3edcb1fae1f25..c0ba8fbb7c3ad 100644
--- a/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx
+++ b/docs/02-app/02-api-reference/04-functions/generate-metadata.mdx
@@ -90,7 +90,7 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   // read route params
-  const id = params.id
+  const id = (await params).id
 
   // fetch data
   const product = await fetch(`https://.../${id}`).then((res) => res.json())
@@ -112,7 +112,7 @@ export default function Page({ params, searchParams }: Props) {}
 ```jsx filename="app/products/[id]/page.js" switcher
 export async function generateMetadata({ params, searchParams }, parent) {
   // read route params
-  const id = params.id
+  const id = (await params).id
 
   // fetch data
   const product = await fetch(`https://.../${id}`).then((res) => res.json())
diff --git a/docs/02-app/02-api-reference/04-functions/generate-static-params.mdx b/docs/02-app/02-api-reference/04-functions/generate-static-params.mdx
index 60c4e3bcd2419..217d40e0aa992 100644
--- a/docs/02-app/02-api-reference/04-functions/generate-static-params.mdx
+++ b/docs/02-app/02-api-reference/04-functions/generate-static-params.mdx
@@ -17,8 +17,8 @@ export async function generateStaticParams() {
 
 // Multiple versions of this page will be statically generated
 // using the `params` returned by `generateStaticParams`
-export default function Page({ params }) {
-  const { slug } = params
+export default async function Page({ params }) {
+  const { slug } = await params
   // ...
 }
 ```
@@ -65,8 +65,8 @@ export function generateStaticParams() {
 // - /product/1
 // - /product/2
 // - /product/3
-export default function Page({ params }: { params: { id: string } }) {
-  const { id } = params
+export default async function Page({ params }: { params: { id: string } }) {
+  const { id } = await params
   // ...
 }
 ```
@@ -81,8 +81,8 @@ export function generateStaticParams() {
 // - /product/1
 // - /product/2
 // - /product/3
-export default function Page({ params }) {
-  const { id } = params
+export default async function Page({ params }) {
+  const { id } = await params
   // ...
 }
 ```
@@ -103,12 +103,12 @@ export function generateStaticParams() {
 // - /products/a/1
 // - /products/b/2
 // - /products/c/3
-export default function Page({
+export default async function Page({
   params,
 }: {
   params: { category: string; product: string }
 }) {
-  const { category, product } = params
+  const { category, product } = await params
   // ...
 }
 ```
@@ -127,8 +127,8 @@ export function generateStaticParams() {
 // - /products/a/1
 // - /products/b/2
 // - /products/c/3
-export default function Page({ params }) {
-  const { category, product } = params
+export default async function Page({ params }) {
+  const { category, product } = await params
   // ...
 }
 ```
@@ -145,8 +145,8 @@ export function generateStaticParams() {
 // - /product/a/1
 // - /product/b/2
 // - /product/c/3
-export default function Page({ params }: { params: { slug: string[] } }) {
-  const { slug } = params
+export default async function Page({ params }: { params: { slug: string[] } }) {
+  const { slug } = await params
   // ...
 }
 ```
@@ -161,8 +161,8 @@ export function generateStaticParams() {
 // - /product/a/1
 // - /product/b/2
 // - /product/c/3
-export default function Page({ params }) {
-  const { slug } = params
+export default async function Page({ params }) {
+  const { slug } = await params
   // ...
 }
 ```
diff --git a/docs/02-app/02-api-reference/04-functions/headers.mdx b/docs/02-app/02-api-reference/04-functions/headers.mdx
index 75cea804350fd..95ea99742cbf8 100644
--- a/docs/02-app/02-api-reference/04-functions/headers.mdx
+++ b/docs/02-app/02-api-reference/04-functions/headers.mdx
@@ -3,49 +3,33 @@ title: headers
 description: API reference for the headers function.
 ---
 
-The `headers` function allows you to read the HTTP incoming request headers from a [Server Component](/docs/app/building-your-application/rendering/server-components).
-
-## `headers()`
-
-This API extends the [Web Headers API](https://developer.mozilla.org/docs/Web/API/Headers). It is **read-only**, meaning you cannot `set` / `delete` the outgoing request headers.
+`headers` is an **async** function that allows you to **read** the HTTP incoming request headers from a [Server Component](/docs/app/building-your-application/rendering/server-components).
 
 ```tsx filename="app/page.tsx" switcher
 import { headers } from 'next/headers'
 
-export default function Page() {
-  const headersList = headers()
-  const referer = headersList.get('referer')
-
-  return <div>Referer: {referer}</div>
+export default async function Page() {
+  const headersList = await headers()
+  const userAgent = headersList.get('user-agent')
 }
 ```
 
 ```jsx filename="app/page.js" switcher
 import { headers } from 'next/headers'
 
-export default function Page() {
-  const headersList = headers()
-  const referer = headersList.get('referer')
-
-  return <div>Referer: {referer}</div>
+export default async function Page() {
+  const headersList = await headers()
+  const userAgent = headersList.get('user-agent')
 }
 ```
 
-> **Good to know**:
->
-> - `headers()` is a **[Dynamic Function](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions)** whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)** at request time.
-
-### API Reference
-
-```tsx
-const headersList = headers()
-```
+## Reference
 
-#### Parameters
+### Parameters
 
 `headers` does not take any parameters.
 
-#### Returns
+### Returns
 
 `headers` returns a **read-only** [Web Headers](https://developer.mozilla.org/docs/Web/API/Headers) object.
 
@@ -56,18 +40,22 @@ const headersList = headers()
 - [`Headers.keys()`](https://developer.mozilla.org/docs/Web/API/Headers/keys): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object.
 - [`Headers.values()`](https://developer.mozilla.org/docs/Web/API/Headers/values): Returns an [`iterator`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all values of the key/value pairs contained in this object.
 
-### Examples
+## Good to know
+
+- `headers` is an **asynchronous** function that returns a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) function.
+  - In version 14 and earlier, `headers` was a synchronous function. To help with backwards compatability, you can still access it synchronoulsy in Next.js 15, but this behavior will be deprecated in the future.
+- Since `headers` is read-only, you cannot `set` or `delete` the outgoing request headers.
+- `headers` is a [Dynamic API](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-apis) whose returned values cannot be known ahead of time. Using it in will opt a route into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)**.
 
-#### Usage with Data Fetching
+## Examples
 
-`headers()` can be used in combination with React `Suspense`:
+### Using the Authorization header
 
 ```jsx filename="app/page.js"
-import { Suspense } from 'react'
 import { headers } from 'next/headers'
 
-async function User() {
-  const authorization = headers().get('authorization')
+export default async function Page() {
+  const authorization = (await headers()).get('authorization')
   const res = await fetch('...', {
     headers: { authorization }, // Forward the authorization header
   })
@@ -75,53 +63,11 @@ async function User() {
 
   return <h1>{user.name}</h1>
 }
-
-export default function Page() {
-  return (
-    <Suspense fallback={null}>
-      <User />
-    </Suspense>
-  )
-}
-```
-
-#### IP Address
-
-`headers()` can be used to get the IP address of the client.
-
-```jsx filename="app/page.js"
-import { Suspense } from 'react'
-import { headers } from 'next/headers'
-
-function IP() {
-  const FALLBACK_IP_ADDRESS = '0.0.0.0'
-  const forwardedFor = headers().get('x-forwarded-for')
-
-  if (forwardedFor) {
-    return forwardedFor.split(',')[0] ?? FALLBACK_IP_ADDRESS
-  }
-
-  return headers().get('x-real-ip') ?? FALLBACK_IP_ADDRESS
-}
-
-export default function Page() {
-  return (
-    <Suspense fallback={null}>
-      <IP />
-    </Suspense>
-  )
-}
 ```
 
-In addition to `x-forwarded-for`, `headers()` can also read:
-
-- `x-real-ip`
-- `x-forwarded-host`
-- `x-forwarded-port`
-- `x-forwarded-proto`
-
 ## Version History
 
-| Version   | Changes               |
-| --------- | --------------------- |
-| `v13.0.0` | `headers` introduced. |
+| Version      | Changes                                                                                                                   |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| `v15.0.0-RC` | `headers` is now an async function. A [codemod](/docs/app/building-your-application/upgrading/codemods#150) is available. |
+| `v13.0.0`    | `headers` introduced.                                                                                                     |
diff --git a/docs/02-app/02-api-reference/04-functions/unstable_after.mdx b/docs/02-app/02-api-reference/04-functions/unstable_after.mdx
index f4b13c3dc5bb0..43b32f6b900dc 100644
--- a/docs/02-app/02-api-reference/04-functions/unstable_after.mdx
+++ b/docs/02-app/02-api-reference/04-functions/unstable_after.mdx
@@ -1,28 +1,17 @@
 ---
 title: unstable_after
-description: API Reference for the unstable_after function.
-version: RC
+description: API Reference for the after function.
 ---
 
-`unstable_after()` allows you to schedule work to be executed after a response is finished. This is useful for tasks and other side effects that should not block the response, such as logging and analytics.
+`unstable_after` allows you to schedule work to be executed after a response is finished. This is useful for tasks and other side effects that should not block the response, such as logging and analytics.
 
 It can be used in [Server Components](/docs/app/building-your-application/rendering/server-components) (including [`generateMetadata`](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)), [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Middleware](/docs/app/building-your-application/routing/middleware).
 
-To use `unstable_after()`, you need to enable it using the `experimental.after` config in the `next.config.js` file:
-
-```js filename="next.config.js"
-const nextConfig = {
-  experimental: {
-    after: true,
-  },
-}
-module.exports = nextConfig
-```
-
 The function accepts a callback that will be executed after the response is finished:
 
 ```tsx filename="app/layout.tsx switcher
 import { unstable_after as after } from 'next/server'
+// Custom logging function
 import { log } from '@/app/utils'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
@@ -36,6 +25,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 
 ```jsx filename="app/layout.js switcher
 import { unstable_after as after } from 'next/server'
+// Custom logging function
 import { log } from '@/app/utils'
 
 export default function Layout({ children }) {
@@ -47,31 +37,33 @@ export default function Layout({ children }) {
 }
 ```
 
-> **Good to know**:
->
-> - `unstable_after()` will be executed even if the response didn't complete successfully. Including when an error is thrown or when `notFound()` or `redirect()` is called.
-> - `unstable_after()` is a [dynamic function](/docs/app/building-your-application/rendering/server-components#dynamic-functions) that will opt a route into dynamic rendering. This behavior can be overridden with the [`export dynamic = "force-static"`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) segment config.
-> - You can use React `cache` to deduplicate functions called inside `unstable_after()`.
-> - [`cookies()`](/docs/app/api-reference/functions/cookies) cannot be set inside `unstable_after()` since the response has already been sent.
-> - `unstable_after()` can be nested inside other `unstable_after()` calls.
+## Reference
 
-## Parameters
+### Parameters
 
 - A callback function which will be executed after the response is finished.
 
-## Returns
+### Serverless function duration
 
-- `unstable_after()` does not return a value.
+`unstable_after` will run for the platform's default or configured max duration of a serverless function. If your platform supports it, you can configure the timeout limit using the [`maxDuration`](/docs/app/api-reference/file-conventions/route-segment-config#maxduration) route segment config.
+
+## Good to know
+
+- `unstable_after` will be executed even if the response didn't complete successfully. Including when an error is thrown or when `notFound` or `redirect` is called.
+- `unstable_after` is a [Dynamic API](/docs/app/building-your-application/rendering/server-components#dynamic-apis) that will opt a route into dynamic rendering. This behavior can be overridden with the [`export dynamic = "force-static"`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) segment config.
+- You can use React `cache` to deduplicate functions called inside `unstable_after`.
+- [`cookies`](/docs/app/api-reference/functions/cookies) cannot be set inside `unstable_after` since the response has already been sent.
+- `unstable_after` can be nested inside other `unstable_after` calls, for example, you can create utility functions that wrap `unstable_after` calls to add additional functionality.
 
 ## Alternatives
 
-The use case for `unstable_after()` is to process secondary tasks without blocking the primary response. It's similar to using the platform's [`waitUntil()`](https://vercel.com/docs/functions/functions-api-reference) or removing `await` from a promise, but with the following differences:
+The use case for `unstable_after` is to process secondary tasks without blocking the primary response. It's similar to using the platform's [`waitUntil()`](https://vercel.com/docs/functions/functions-api-reference) or removing `await` from a promise, but with the following differences:
 
-- **`waitUntil()`**: accepts a promise and enqueues a task to be executed during the lifecycle of the request, whereas `unstable_after()` accepts a callback that will be executed **after** the response is finished.
+- **`waitUntil()`**: accepts a promise and enqueues a task to be executed during the lifecycle of the request, whereas `unstable_after` accepts a callback that will be executed **after** the response is finished.
 - **Removing `await`**: starts executing during the response, which uses resources. It's also not reliable in serverless environments as the function stops computation immediately after the response is sent, potentially interrupting the task.
 
-We recommend using `unstable_after()` as it has been designed to consider other Next.js APIs and contexts.
-
-## Serverless function duration
+We recommend using `unstable_after` as it has been designed to consider other Next.js APIs and contexts.
 
-`unstable_after()` will run for the platform's default or configured max duration of a serverless function. If your platform supports it, you can configure the timeout limit using the [`maxDuration`](/docs/app/api-reference/file-conventions/route-segment-config#maxduration) route segment config.
+| Version History | Description                  |
+| --------------- | ---------------------------- |
+| `v15.0.0-rc`    | `unstable_after` introduced. |
diff --git a/docs/02-app/02-api-reference/04-functions/unstable_noStore.mdx b/docs/02-app/02-api-reference/04-functions/unstable_noStore.mdx
index 19cc3ab910192..d6f8aef38717a 100644
--- a/docs/02-app/02-api-reference/04-functions/unstable_noStore.mdx
+++ b/docs/02-app/02-api-reference/04-functions/unstable_noStore.mdx
@@ -4,7 +4,9 @@ description: API Reference for the unstable_noStore function.
 version: unstable
 ---
 
-`unstable_noStore` can be used to declaratively opt out of static rendering and indicate a particular [Server Component](/docs/app/building-your-application/rendering/server-components) should not be cached.
+> This API will be deprecated in the future. In version 15, we recommend using [`connection`](/docs/app/api-reference/functions/connection) instead of `unstable_noStore`.
+
+`unstable_noStore` can be used to declaratively opt out of static rendering and indicate a particular component should not be cached.
 
 ```jsx
 import { unstable_noStore as noStore } from 'next/cache';
diff --git a/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx b/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx
index 7a35302c22358..38d27ecbc891b 100644
--- a/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx
+++ b/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx
@@ -49,10 +49,10 @@ The following Next.js APIs rely on throwing an error which should be rethrown an
 - [`redirect()`](/docs/app/building-your-application/routing/redirecting#redirect-function)
 - [`permanentRedirect()`](/docs/app/building-your-application/routing/redirecting#permanentredirect-function)
 
-If a route segment is marked to throw an error unless it's static, a dynamic function call will also throw an error that should similarly not be caught by the developer. Note that Partial Prerendering (PPR) affects this behavior as well. These APIs are:
+If a route segment is marked to throw an error unless it's static, a Dynamic API call will also throw an error that should similarly not be caught by the developer. Note that Partial Prerendering (PPR) affects this behavior as well. These APIs are:
 
-- [`cookies()`](/docs/app/api-reference/functions/cookies)
-- [`headers()`](/docs/app/api-reference/functions/headers)
+- [`cookies`](/docs/app/api-reference/functions/cookies)
+- [`headers`](/docs/app/api-reference/functions/headers)
 - [`searchParams`](/docs/app/api-reference/file-conventions/page#searchparams-optional)
 - `fetch(..., { cache: 'no-store' })`
 - `fetch(..., { next: { revalidate: 0 } })`
diff --git a/docs/02-app/02-api-reference/04-functions/use-router.mdx b/docs/02-app/02-api-reference/04-functions/use-router.mdx
index 823a1dbda8a4d..630b43c566c10 100644
--- a/docs/02-app/02-api-reference/04-functions/use-router.mdx
+++ b/docs/02-app/02-api-reference/04-functions/use-router.mdx
@@ -51,7 +51,7 @@ export default function Page() {
 > **Good to know**:
 >
 > - The `<Link>` component automatically prefetch routes as they become visible in the viewport.
-> - `refresh()` could re-produce the same result if fetch requests are cached. Other dynamic functions like `cookies` and `headers` could also change the response.
+> - `refresh()` could re-produce the same result if fetch requests are cached. Other Dynamic APIs like `cookies` and `headers` could also change the response.
 
 ### Migrating from `next/router`
 
diff --git a/docs/02-app/02-api-reference/05-next-config-js/devIndicators.mdx b/docs/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
index ae771896e008b..08a4990c445dc 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/devIndicators.mdx
@@ -104,7 +104,7 @@ Route (app)                              Size     First Load JS
 
 There are two reasons a route might opt out of static rendering:
 
-- The presence of [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-functions) which rely on runtime information.
+- The presence of [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis) which rely on runtime information.
 - An [uncached data request](/docs/app/building-your-application/data-fetching/fetching), like a call to an ORM or database driver.
 
 Check your route for any of these conditions, and if you are not able to statically render the route, then consider using [`loading.js`](/docs/app/api-reference/file-conventions/loading) or [`<Suspense />`](https://react.dev/reference/react/Suspense) to leverage [streaming](/docs/app/building-your-application/routing/loading-ui-and-streaming#what-is-streaming).
diff --git a/docs/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx b/docs/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx
deleted file mode 100644
index 83ff75c02068e..0000000000000
--- a/docs/02-app/02-api-reference/05-next-config-js/instrumentationHook.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: instrumentationHook
-description: Use the instrumentationHook option to set up instrumentation in your Next.js App.
-related:
-  title: Learn more about Instrumentation
-  links:
-    - app/api-reference/file-conventions/instrumentation
-    - app/building-your-application/optimizing/instrumentation
-version: experimental
----
-
-{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
-
-{/* TODO: Add note about it not being needed once version 15 is stable */}
-
-The experimental `instrumentationHook` option allows you to set up instrumentation via the [`instrumentation` file](/docs/app/api-reference/file-conventions/instrumentation) in your Next.js App.
-
-```js filename="next.config.js"
-module.exports = {
-  experimental: {
-    instrumentationHook: true,
-  },
-}
-```
-
-| Version   | Changes                                                     |
-| --------- | ----------------------------------------------------------- |
-| `v13.2.0` | `instrumentationHook` introduced as an experimental feature |
diff --git a/docs/02-app/02-api-reference/05-next-config-js/reactCompiler.mdx b/docs/02-app/02-api-reference/05-next-config-js/reactCompiler.mdx
index b6eea14158398..7c442070ced5f 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/reactCompiler.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/reactCompiler.mdx
@@ -1,7 +1,7 @@
 ---
 title: reactCompiler
 description: Enable the React Compiler to automatically optimize component rendering.
-version: RC
+version: experimental
 ---
 
 Next.js 15 RC introduced support for the [React Compiler](https://react.dev/learn/react-compiler). The compiler improves performance by automatically optimizing component rendering. This reduces the amount of manual memoization developers have to do through APIs such as `useMemo` and `useCallback`.
diff --git a/docs/02-app/02-api-reference/05-next-config-js/serverComponentsHmrCache.mdx b/docs/02-app/02-api-reference/05-next-config-js/serverComponentsHmrCache.mdx
index 09b2e01612bf6..72a13fef95788 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/serverComponentsHmrCache.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/serverComponentsHmrCache.mdx
@@ -1,7 +1,7 @@
 ---
 title: serverComponentsHmrCache
 description: Configure whether fetch responses in Server Components are cached across HMR refresh requests.
-version: RC
+version: experimental
 ---
 
 The experimental `serverComponentsHmrCache` option allows you to cache `fetch` responses in Server Components across Hot Module Replacement (HMR) refreshes in local development. This results in faster responses and reduced costs for billed API calls.
diff --git a/docs/02-app/02-api-reference/05-next-config-js/staticGeneration.mdx b/docs/02-app/02-api-reference/05-next-config-js/staticGeneration.mdx
new file mode 100644
index 0000000000000..164f07f6bdd85
--- /dev/null
+++ b/docs/02-app/02-api-reference/05-next-config-js/staticGeneration.mdx
@@ -0,0 +1,41 @@
+---
+title: staticGeneration*
+description: Learn how to configure static generation in your Next.js application.
+version: experimental
+---
+
+The `staticGeneration*` options allow you to configure the Static Generation process in your Next.js application. It's helpful for advanced use cases that would benefit from greater control.
+
+```ts filename="next.config.ts" switcher
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  experimental: {
+    staticGenerationRetryCount: 1,
+    staticGenerationMaxConcurrency: 8,
+    staticGenerationMinPagesPerWorker: 25,
+  },
+}
+
+export default nextConfig
+```
+
+```js filename="next.config.js" switcher
+const nextConfig = {
+  experimental: {
+    staticGenerationRetryCount: 1
+    staticGenerationMaxConcurrency: 8
+    staticGenerationMinPagesPerWorker: 25
+  },
+}
+
+export default nextConfig;
+```
+
+## Config Options
+
+The following options are available:
+
+- `staticGenerationRetryCount`: The number of times to retry a failed page generation before failing the build.
+- `staticGenerationMaxConcurrency`: The maximum number of pages to be processed per worker.
+- `staticGenerationMinPagesPerWorker`: The minimum number of pages to be processed before start a new worker.
diff --git a/docs/02-app/02-api-reference/05-next-config-js/turbo.mdx b/docs/02-app/02-api-reference/05-next-config-js/turbo.mdx
index cf3ac236fc706..00defc03a24c5 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/turbo.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/turbo.mdx
@@ -1,19 +1,70 @@
 ---
 title: turbo
 description: Configure Next.js with Turbopack-specific options
-version: experimental
 ---
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
 
-Turbopack can be customized to transform different files and change how modules are resolved.
+The `turbo` option lets you customize [Turbopack](/docs/architecture/turbopack) to transform different files and change how modules are resolved.
+
+```ts filename="next.config.ts" switcher
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  turbo: {
+    // ...
+  },
+}
+
+export default nextConfig
+```
+
+```js filename="next.config.js" switcher
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  turbo: {
+    // ...
+  },
+}
+
+module.exports = nextConfig
+```
 
 > **Good to know**:
 >
-> - These features are experimental and will only work with `next --turbo`.
 > - Turbopack for Next.js does not require loaders nor loader configuration for built-in functionality. Turbopack has built-in support for CSS and compiling modern JavaScript, so there's no need for `css-loader`, `postcss-loader`, or `babel-loader` if you're using `@babel/preset-env`.
 
-## webpack loaders
+## Reference
+
+### Options
+
+The following options are available for the `turbo` configuration:
+
+| Option              | Description                                                               |
+| ------------------- | ------------------------------------------------------------------------- |
+| `rules`             | List of unsupported webpack loaders to apply when running with Turbopack. |
+| `resolveAlias`      | Map aliased imports to modules to load in their place.                    |
+| `resolveExtensions` | List of extensions to resolve when importing files.                       |
+| `moduleIdStrategy`  | Assign module IDs                                                         |
+| `useSwcCss`         | Use `swc_css` instead of `lightningcss` for Turbopack                     |
+| `treeshaking`       | Enable tree shaking for the turbopack dev server and build.               |
+| `memoryLimit`       | A target memory limit for turbo, in bytes.                                |
+
+### Supported loaders
+
+The following loaders have been tested to work with Turbopack's webpack loader implementation:
+
+- [`babel-loader`](https://www.npmjs.com/package/babel-loader)
+- [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)
+- [`svg-inline-loader`](https://www.npmjs.com/package/svg-inline-loader)
+- [`yaml-loader`](https://www.npmjs.com/package/yaml-loader)
+- [`string-replace-loader`](https://www.npmjs.com/package/string-replace-loader)
+- [`raw-loader`](https://www.npmjs.com/package/raw-loader)
+- [`sass-loader`](https://www.npmjs.com/package/sass-loader)
+
+## Examples
+
+### Configuring webpack loaders
 
 If you need loader support beyond what's built in, many webpack loaders already work with Turbopack. There are currently some limitations:
 
@@ -25,47 +76,31 @@ To configure loaders, add the names of the loaders you've installed and any opti
 
 ```js filename="next.config.js"
 module.exports = {
-  experimental: {
-    turbo: {
-      rules: {
-        '*.svg': {
-          loaders: ['@svgr/webpack'],
-          as: '*.js',
-        },
+  turbo: {
+    rules: {
+      '*.svg': {
+        loaders: ['@svgr/webpack'],
+        as: '*.js',
       },
     },
   },
 }
 ```
 
-> **Good to know**: Prior to Next.js version 13.4.4, `experimental.turbo.rules` was named `experimental.turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
+> **Good to know**: Prior to Next.js version 13.4.4, `turbo.rules` was named `turbo.loaders` and only accepted file extensions like `.mdx` instead of `*.mdx`.
 
-### Supported loaders
+### Resolving aliases
 
-The following loaders have been tested to work with Turbopack's webpack loader implementation:
-
-- [`babel-loader`](https://www.npmjs.com/package/babel-loader)
-- [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack)
-- [`svg-inline-loader`](https://www.npmjs.com/package/svg-inline-loader)
-- [`yaml-loader`](https://www.npmjs.com/package/yaml-loader)
-- [`string-replace-loader`](https://www.npmjs.com/package/string-replace-loader)
-- [`raw-loader`](https://www.npmjs.com/package/raw-loader)
-- [`sass-loader`](https://www.npmjs.com/package/sass-loader)
-
-## Resolve aliases
-
-Through `next.config.js`, Turbopack can be configured to modify module resolution through aliases, similar to webpack's [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) configuration.
+Turbopack can be configured to modify module resolution through aliases, similar to webpack's [`resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias) configuration.
 
 To configure resolve aliases, map imported patterns to their new destination in `next.config.js`:
 
 ```js filename="next.config.js"
 module.exports = {
-  experimental: {
-    turbo: {
-      resolveAlias: {
-        underscore: 'lodash',
-        mocha: { browser: 'mocha/browser-entry.js' },
-      },
+  turbo: {
+    resolveAlias: {
+      underscore: 'lodash',
+      mocha: { browser: 'mocha/browser-entry.js' },
     },
   },
 }
@@ -75,26 +110,16 @@ This aliases imports of the `underscore` package to the `lodash` package. In oth
 
 Turbopack also supports conditional aliasing through this field, similar to Node.js' [conditional exports](https://nodejs.org/docs/latest-v18.x/api/packages.html#conditional-exports). At the moment only the `browser` condition is supported. In the case above, imports of the `mocha` module will be aliased to `mocha/browser-entry.js` when Turbopack targets browser environments.
 
-## Resolve extensions
+### Resolving custom extensions
 
-Through `next.config.js`, Turbopack can be configured to resolve modules with custom extensions, similar to webpack's [`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions) configuration.
+Turbopack can be configured to resolve modules with custom extensions, similar to webpack's [`resolve.extensions`](https://webpack.js.org/configuration/resolve/#resolveextensions) configuration.
 
 To configure resolve extensions, use the `resolveExtensions` field in `next.config.js`:
 
 ```js filename="next.config.js"
 module.exports = {
-  experimental: {
-    turbo: {
-      resolveExtensions: [
-        '.mdx',
-        '.tsx',
-        '.ts',
-        '.jsx',
-        '.js',
-        '.mjs',
-        '.json',
-      ],
-    },
+  turbo: {
+    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
   },
 }
 ```
@@ -103,13 +128,12 @@ This overwrites the original resolve extensions with the provided list. Make sur
 
 For more information and guidance for how to migrate your app to Turbopack from webpack, see [Turbopack's documentation on webpack compatibility](https://turbo.build/pack/docs/migrating-from-webpack).
 
-## Module ID strategy
-
-Turbopack currently supports two strategies for assigning module IDs: `'named'` and `'deterministic'`.
+### Assigning module IDs
 
-`'named'` assigns readable module IDs based on the module's path and functionality.
+Turbopack currently supports two strategies for assigning module IDs:
 
-`'deterministic'` assigns small hashed numeric module IDs, which are mostly consistent between builds and therefore help with long-term caching.
+- `'named'` assigns readable module IDs based on the module's path and functionality.
+- `'deterministic'` assigns small hashed numeric module IDs, which are mostly consistent between builds and therefore help with long-term caching.
 
 If not set, Turbopack will use `'named'` for development builds and `'deterministic'` for production builds.
 
@@ -117,10 +141,15 @@ To configure the module IDs strategy, use the `moduleIdStrategy` field in `next.
 
 ```js filename="next.config.js"
 module.exports = {
-  experimental: {
-    turbo: {
-      moduleIdStrategy: 'deterministic',
-    },
+  turbo: {
+    moduleIdStrategy: 'deterministic',
   },
 }
 ```
+
+## Version History
+
+| Version     | Changes                                           |
+| ----------- | ------------------------------------------------- |
+| `15.0.0-RC` | `turbo` is now stable and no longer experimental. |
+| `13.0.0`    | `experimental.turbo` introduced.                  |
diff --git a/docs/03-pages/02-api-reference/01-components/form.mdx b/docs/03-pages/02-api-reference/01-components/form.mdx
new file mode 100644
index 0000000000000..84ceee76f5368
--- /dev/null
+++ b/docs/03-pages/02-api-reference/01-components/form.mdx
@@ -0,0 +1,7 @@
+---
+title: <Form>
+description: Learn how to use the `<Form>` component to handle form submissions and search params updates with client-side navigation.
+source: app/api-reference/components/form
+---
+
+{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
diff --git a/docs/03-pages/02-api-reference/04-next-config-js/instrumentationHook.mdx b/docs/03-pages/02-api-reference/04-next-config-js/instrumentationHook.mdx
deleted file mode 100644
index 784b768d37634..0000000000000
--- a/docs/03-pages/02-api-reference/04-next-config-js/instrumentationHook.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: instrumentationHook
-description: Use the instrumentationHook option to set up instrumentation in your Next.js App.
-source: app/api-reference/next-config-js/instrumentationHook
----
-
-{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
diff --git a/docs/04-architecture/turbopack.mdx b/docs/04-architecture/turbopack.mdx
index ef193685fb343..77cf24d556f15 100644
--- a/docs/04-architecture/turbopack.mdx
+++ b/docs/04-architecture/turbopack.mdx
@@ -40,11 +40,11 @@ These features are currently not supported:
 - [`webpack()`](/docs/app/api-reference/next-config-js/webpack) configuration in `next.config.js`
   - Turbopack replaces Webpack, this means that webpack configuration is not supported.
   - To configure Turbopack, [see the documentation](/docs/app/api-reference/next-config-js/turbo).
-  - A subset of [Webpack loaders](/docs/app/api-reference/next-config-js/turbo#webpack-loaders) are supported in Turbopack.
+  - A subset of [Webpack loaders](/docs/app/api-reference/next-config-js/turbo#configuring-webpack-loaders) are supported in Turbopack.
 - Babel (`.babelrc`)
   - Turbopack leverages the [SWC](/docs/architecture/nextjs-compiler#why-swc) compiler for all transpilation and optimizations. This means that Babel is not included by default.
   - If you have a `.babelrc` file, you might no longer need it because Next.js includes common Babel plugins as SWC transforms that can be enabled. You can read more about this in the [compiler documentation](docs/architecture/nextjs-compiler#supported-features).
-  - If you still need to use Babel after verifying your particular use case is not covered, you can leverage Turbopack's [support for custom webpack loaders](/docs/app/api-reference/next-config-js/turbo#webpack-loaders) to include `babel-loader`.
+  - If you still need to use Babel after verifying your particular use case is not covered, you can leverage Turbopack's [support for custom webpack loaders](/docs/app/api-reference/next-config-js/turbo#configuring-webpack-loaders) to include `babel-loader`.
 - Creating a root layout automatically in App Router.
   - This behavior is currently not supported since it changes input files, instead, an error will be shown for you to manually add a root layout in the desired location.
 - `@next/font` (legacy font support).
diff --git a/errors/app-static-to-dynamic-error.mdx b/errors/app-static-to-dynamic-error.mdx
index 07e090ff34fa7..ece1895f78fae 100644
--- a/errors/app-static-to-dynamic-error.mdx
+++ b/errors/app-static-to-dynamic-error.mdx
@@ -5,7 +5,7 @@ description: This document explains the "app/ Static to Dynamic Error" in Next.j
 
 ## Why This Error Occurred
 
-The "`app/` Static to Dynamic Error" happens when one of your routes in the `app/` directory is initially generated statically at build time, but during runtime it attempts to use dynamic server values (such as `cookies()` or `headers()`) either for a fallback path or while a path is being revalidated.
+The "`app/` Static to Dynamic Error" happens when one of your routes in the `app/` directory is initially generated statically at build time, but during runtime it attempts to use dynamic server values (such as `cookies` or `headers`) either for a fallback path or while a path is being revalidated.
 
 Currently, Next.js does not support switching between static and dynamic types during runtime, so the system throws an error.
 
@@ -20,4 +20,4 @@ To resolve this issue, you have two main options:
 ## Useful Links
 
 - [Static and Dynamic Rendering](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies) - Learn more about the differences between static and dynamic rendering in Next.js.
-- [Dynamic Functions](/docs/app/building-your-application/rendering/server-components#dynamic-functions) - Understand more about the usage of dynamic server functions in your Next.js application.
+- [Dynamic APIs](/docs/app/building-your-application/rendering/server-components#dynamic-apis) - Understand more about the usage of dynamic server functions in your Next.js application.
diff --git a/errors/sync-dynamic-apis.mdx b/errors/sync-dynamic-apis.mdx
index a87c749fc56b6..ca9bc27083d5c 100644
--- a/errors/sync-dynamic-apis.mdx
+++ b/errors/sync-dynamic-apis.mdx
@@ -5,7 +5,7 @@ description: Learn more about why accessing certain APIs synchronously now warns
 
 ## Why This Warning Occurred
 
-Somewhere in your code you used an API that opts into [dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-functions).
+Somewhere in your code you used an API that opts into [dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-apis).
 
 Dynamic APIs are: