diff --git a/docs/02-app/01-building-your-application/01-routing/10-dynamic-routes.mdx b/docs/02-app/01-building-your-application/01-routing/10-dynamic-routes.mdx
index cb15eccae1fbf..517ef51087f0d 100644
--- a/docs/02-app/01-building-your-application/01-routing/10-dynamic-routes.mdx
+++ b/docs/02-app/01-building-your-application/01-routing/10-dynamic-routes.mdx
@@ -22,14 +22,20 @@ Dynamic Segments are passed as the `params` prop to [`layout`](/docs/app/api-ref
For example, a blog could include the following route `app/blog/[slug]/page.js` where `[slug]` is the Dynamic Segment for blog posts.
```tsx filename="app/blog/[slug]/page.tsx" switcher
-export default function Page({ params }: { params: { slug: string } }) {
- return
My Post: {params.slug}
+export default async function Page({
+ params,
+}: {
+ params: Promise<{ slug: string }>
+}) {
+ const slug = (await params).slug
+ return My Post: {slug}
}
```
```jsx filename="app/blog/[slug]/page.js" switcher
-export default function Page({ params }) {
- return My Post: {params.slug}
+export default async function Page({ params }) {
+ const slug = (await params).slug
+ return My Post: {slug}
}
```
@@ -41,7 +47,11 @@ export default function Page({ params }) {
See the [generateStaticParams()](#generating-static-params) page to learn how to generate the params for the segment.
-> **Good to know**: Dynamic Segments are equivalent to [Dynamic Routes](/docs/pages/building-your-application/routing/dynamic-routes) in the `pages` directory.
+## Good to know
+
+- Since the `params` prop is a promise. You must use async/await or React's 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 synchronously in Next.js 15, but this behavior will be deprecated in the future.
+- Dynamic Segments are equivalent to [Dynamic Routes](/docs/pages/building-your-application/routing/dynamic-routes) in the `pages` directory.
## Generating Static Params
@@ -105,13 +115,17 @@ The difference between **catch-all** and **optional catch-all** segments is that
When using TypeScript, you can add types for `params` depending on your configured route segment.
```tsx filename="app/blog/[slug]/page.tsx" switcher
-export default function Page({ params }: { params: { slug: string } }) {
+export default async function Page({
+ params,
+}: {
+ params: Promise<{ slug: string }>
+}) {
return My Page
}
```
```jsx filename="app/blog/[slug]/page.js" switcher
-export default function Page({ params }) {
+export default async function Page({ params }) {
return My Page
}
```
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 eca38db9ef485..22ec26d9ea344 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
@@ -55,4 +55,4 @@ export default async function Default({ params }) {
| `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.
+ - In version 14 and earlier, `params` was a synchronous prop. To help with backwards compatability, you can still access it synchronously 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/layout.mdx b/docs/02-app/02-api-reference/02-file-conventions/layout.mdx
index dc0933a108b8d..19a5e412481be 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
@@ -82,7 +82,7 @@ export default async function Layout({ params }) {
| `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.
+ - In version 14 and earlier, `params` was a synchronous prop. To help with backwards compatability, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.
### Root Layouts
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 65b79ae95c2f6..3b9373f7c33f2 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
@@ -54,7 +54,7 @@ export default async function Page({ params }) {
| `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.
+ - In version 14 and earlier, `params` was a synchronous prop. To help with backwards compatability, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.
#### `searchParams` (optional)
@@ -83,7 +83,7 @@ export default async function Page({ searchParams }) {
| `/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.
+ - In version 14 and earlier, `searchParams` was a synchronous prop. To help with backwards compatability, you can still access it synchronously 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.
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 13762003552a9..6358fbe11fed0 100644
--- a/docs/02-app/02-api-reference/04-functions/cookies.mdx
+++ b/docs/02-app/02-api-reference/04-functions/cookies.mdx
@@ -65,7 +65,7 @@ To learn more about these options, see the [MDN docs](https://developer.mozilla.
## Good to know
- `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.
+ - In version 14 and earlier, `cookies` was a synchronous function. To help with backwards compatability, you can still access it synchronously 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).
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 ec6deee7fd780..c3bd0e1c43f73 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
@@ -39,7 +39,7 @@ The following methods and properties are available:
## 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.
+ - In version 14 and earlier, `draftMode` was a synchronous function. To help with backwards compatability, you can still access it synchronously 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.
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 95ea99742cbf8..8158ab9bb9e82 100644
--- a/docs/02-app/02-api-reference/04-functions/headers.mdx
+++ b/docs/02-app/02-api-reference/04-functions/headers.mdx
@@ -43,7 +43,7 @@ export default async function Page() {
## 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.
+ - In version 14 and earlier, `headers` was a synchronous function. To help with backwards compatability, you can still access it synchronously 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)**.