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)**.