From c7a8f00a655c760cdc6af439daa6c6b2771621cd Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 21 May 2025 08:58:07 +0100
Subject: [PATCH 1/5] Move and review dynamic segments API reference
---
.../03-file-conventions/dynamic-routes.mdx} | 109 +++++++-----------
1 file changed, 41 insertions(+), 68 deletions(-)
rename docs/01-app/{03-building-your-application/01-routing/10-dynamic-routes.mdx => 05-api-reference/03-file-conventions/dynamic-routes.mdx} (64%)
diff --git a/docs/01-app/03-building-your-application/01-routing/10-dynamic-routes.mdx b/docs/01-app/05-api-reference/03-file-conventions/dynamic-routes.mdx
similarity index 64%
rename from docs/01-app/03-building-your-application/01-routing/10-dynamic-routes.mdx
rename to docs/01-app/05-api-reference/03-file-conventions/dynamic-routes.mdx
index 9172156d8ba15..19d3894f8311e 100644
--- a/docs/01-app/03-building-your-application/01-routing/10-dynamic-routes.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/dynamic-routes.mdx
@@ -1,25 +1,19 @@
---
-title: Dynamic Routes
-description: Dynamic Routes can be used to programmatically generate route segments from dynamic data.
+title: Dynamic Route Segments
+nav_title: Dynamic Segments
+description: Dynamic Route Segments can be used to programmatically generate route segments from dynamic data.
related:
title: Next Steps
description: For more information on what to do next, we recommend the following sections
links:
- - app/building-your-application/routing/linking-and-navigating
- app/api-reference/functions/generate-static-params
---
-When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or [prerendered](#generating-static-params) at build time.
+When you don't know the exact route segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time.
## Convention
-A Dynamic Segment can be created by wrapping a folder's name in square brackets: `[folderName]`. For example, `[id]` or `[slug]`.
-
-Dynamic Segments are passed as the `params` prop to [`layout`](/docs/app/api-reference/file-conventions/layout), [`page`](/docs/app/api-reference/file-conventions/page), [`route`](/docs/app/building-your-application/routing/route-handlers), and [`generateMetadata`](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) functions.
-
-## Example
-
-For example, a blog could include the following route `app/blog/[slug]/page.js` where `[slug]` is the Dynamic Segment for blog posts.
+A Dynamic Segment can be created by wrapping a folder's name in square brackets: `[folderName]`. 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 async function Page({
@@ -39,51 +33,15 @@ export default async function Page({ params }) {
}
```
+Dynamic Segments are passed as the `params` prop to [`layout`](/docs/app/api-reference/file-conventions/layout), [`page`](/docs/app/api-reference/file-conventions/page), [`route`](/docs/app/building-your-application/routing/route-handlers), and [`generateMetadata`](/docs/app/api-reference/functions/generate-metadata#generatemetadata-function) functions.
+
| Route | Example URL | `params` |
| ------------------------- | ----------- | --------------- |
| `app/blog/[slug]/page.js` | `/blog/a` | `{ slug: 'a' }` |
| `app/blog/[slug]/page.js` | `/blog/b` | `{ slug: 'b' }` |
| `app/blog/[slug]/page.js` | `/blog/c` | `{ slug: 'c' }` |
-See the [generateStaticParams()](#generating-static-params) page to learn how to generate the params for the segment.
-
-## 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 compatibility, 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
-
-The `generateStaticParams` function can be used in combination with [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes) to [**statically generate**](/docs/app/getting-started/partial-prerendering#static-rendering) routes at build time instead of on-demand at request time.
-
-```tsx filename="app/blog/[slug]/page.tsx" switcher
-export async function generateStaticParams() {
- const posts = await fetch('https://.../posts').then((res) => res.json())
-
- return posts.map((post) => ({
- slug: post.slug,
- }))
-}
-```
-
-```jsx filename="app/blog/[slug]/page.js" switcher
-export async function generateStaticParams() {
- const posts = await fetch('https://.../posts').then((res) => res.json())
-
- return posts.map((post) => ({
- slug: post.slug,
- }))
-}
-```
-
-The primary benefit of the `generateStaticParams` function is its smart retrieval of data. If content is fetched within the `generateStaticParams` function using a `fetch` request, the requests are [automatically memoized](/docs/app/deep-dive/caching#request-memoization). This means a `fetch` request with the same arguments across multiple `generateStaticParams`, Layouts, and Pages will only be made once, which decreases build times.
-
-Use the [migration guide](/docs/app/guides/migrating/app-router-migration#dynamic-paths-getstaticpaths) if you are migrating from the `pages` directory.
-
-See [`generateStaticParams` server function documentation](/docs/app/api-reference/functions/generate-static-params) for more information and advanced use cases.
-
-## Catch-all Segments
+### Catch-all Segments
Dynamic Segments can be extended to **catch-all** subsequent segments by adding an ellipsis inside the brackets `[...folderName]`.
@@ -95,7 +53,7 @@ For example, `app/shop/[...slug]/page.js` will match `/shop/clothes`, but also `
| `app/shop/[...slug]/page.js` | `/shop/a/b` | `{ slug: ['a', 'b'] }` |
| `app/shop/[...slug]/page.js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
-## Optional Catch-all Segments
+### Optional Catch-all Segments
Catch-all Segments can be made **optional** by including the parameter in double square brackets: `[[...folderName]]`.
@@ -110,31 +68,46 @@ The difference between **catch-all** and **optional catch-all** segments is that
| `app/shop/[[...slug]]/page.js` | `/shop/a/b` | `{ slug: ['a', 'b'] }` |
| `app/shop/[[...slug]]/page.js` | `/shop/a/b/c` | `{ slug: ['a', 'b', 'c'] }` |
-## TypeScript
+### TypeScript
When using TypeScript, you can add types for `params` depending on your configured route segment.
+| Route | `params` Type Definition |
+| ----------------------------------- | ---------------------------------------- |
+| `app/blog/[slug]/page.js` | `{ slug: string }` |
+| `app/shop/[...slug]/page.js` | `{ slug: string[] }` |
+| `app/shop/[[...slug]]/page.js` | `{ slug?: string[] }` |
+| `app/[categoryId]/[itemId]/page.js` | `{ categoryId: string, itemId: string }` |
+
+## Behavior
+
+- 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 compatibility, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.
+
+## Examples
+
+### With `generateStaticParams`
+
+The [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) function can be used to [statically generate](/docs/app/getting-started/partial-prerendering#static-rendering) routes at build time instead of on-demand at request time.
+
```tsx filename="app/blog/[slug]/page.tsx" switcher
-export default async function Page({
- params,
-}: {
- params: Promise<{ slug: string }>
-}) {
- return
+export async function generateStaticParams() {
+ const posts = await fetch('https://.../posts').then((res) => res.json())
+
+ return posts.map((post) => ({
+ slug: post.slug,
+ }))
}
```
-| Route | `params` Type Definition |
-| ----------------------------------- | ---------------------------------------- |
-| `app/blog/[slug]/page.js` | `{ slug: string }` |
-| `app/shop/[...slug]/page.js` | `{ slug: string[] }` |
-| `app/shop/[[...slug]]/page.js` | `{ slug?: string[] }` |
-| `app/[categoryId]/[itemId]/page.js` | `{ categoryId: string, itemId: string }` |
-
-> **Good to know**: This may be done automatically by the [TypeScript plugin](/docs/app/api-reference/config/typescript#ide-plugin) in the future.
+The primary benefit of the `generateStaticParams` function is its smart retrieval of data. If content is fetched within the `generateStaticParams` function using a `fetch` request, the requests are [automatically deduplicated](/docs/app/deep-dive/caching#request-memoization). This means a `fetch` request with the same arguments across multiple `generateStaticParams`, Layouts, and Pages will only be made once, which decreases build times.
From f31100ba8b222c0bd84b90bcb120a45711d38917 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 21 May 2025 09:01:38 +0100
Subject: [PATCH 2/5] Fix broken links
---
.../01-app/01-getting-started/02-project-structure.mdx | 10 +++++-----
.../01-app/01-getting-started/03-layouts-and-pages.mdx | 2 +-
.../02-guides/migrating/from-create-react-app.mdx | 2 +-
docs/01-app/02-guides/migrating/from-vite.mdx | 2 +-
docs/01-app/02-guides/static-exports.mdx | 8 ++++----
.../01-routing/13-route-handlers.mdx | 2 +-
docs/01-app/04-deep-dive/caching.mdx | 4 ++--
docs/01-app/05-api-reference/02-components/link.mdx | 8 ++++----
.../03-file-conventions/01-metadata/app-icons.mdx | 2 +-
.../01-metadata/opengraph-image.mdx | 2 +-
.../05-api-reference/03-file-conventions/default.mdx | 2 +-
.../05-api-reference/03-file-conventions/layout.mdx | 4 ++--
.../05-api-reference/03-file-conventions/page.mdx | 4 ++--
.../03-file-conventions/route-segment-config.mdx | 2 +-
.../05-api-reference/03-file-conventions/route.mdx | 2 +-
.../04-functions/generate-image-metadata.mdx | 2 +-
.../04-functions/generate-metadata.mdx | 2 +-
.../04-functions/generate-static-params.mdx | 4 ++--
.../05-api-reference/04-functions/use-params.mdx | 6 +++---
19 files changed, 35 insertions(+), 35 deletions(-)
diff --git a/docs/01-app/01-getting-started/02-project-structure.mdx b/docs/01-app/01-getting-started/02-project-structure.mdx
index cdce776d03a12..47dc7dce9399e 100644
--- a/docs/01-app/01-getting-started/02-project-structure.mdx
+++ b/docs/01-app/01-getting-started/02-project-structure.mdx
@@ -73,11 +73,11 @@ Top-level files are used to configure your application, manage dependencies, run
### Dynamic routes
-| | |
-| --------------------------------------------------------------------------------------------------------- | -------------------------------- |
-| [`[folder]`](/docs/app/building-your-application/routing/dynamic-routes#convention) | Dynamic route segment |
-| [`[...folder]`](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments) | Catch-all route segment |
-| [`[[...folder]]`](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments) | Optional catch-all route segment |
+| | |
+| ------------------------------------------------------------------------------------------------------ | -------------------------------- |
+| [`[folder]`](/docs/app/api-reference/file-conventions/dynamic-routes#convention) | Dynamic route segment |
+| [`[...folder]`](/docs/app/api-reference/file-conventions/dynamic-routes#catch-all-segments) | Catch-all route segment |
+| [`[[...folder]]`](/docs/app/api-reference/file-conventions/dynamic-routes#optional-catch-all-segments) | Optional catch-all route segment |
### Route Groups and private folders
diff --git a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
index 7040a1cde7043..5e4658d236543 100644
--- a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
+++ b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
@@ -172,7 +172,7 @@ export default function Page() {
}
```
-Wrapping a folder name in square brackets (e.g. `[slug]`) creates a [dynamic route segment](/docs/app/building-your-application/routing/dynamic-routes) which is used to generate multiple pages from data. e.g. blog posts, product pages, etc.
+Wrapping a folder name in square brackets (e.g. `[slug]`) creates a [dynamic route segment](/docs/app/api-reference/file-conventions/dynamic-routes) which is used to generate multiple pages from data. e.g. blog posts, product pages, etc.
## Nesting layouts
diff --git a/docs/01-app/02-guides/migrating/from-create-react-app.mdx b/docs/01-app/02-guides/migrating/from-create-react-app.mdx
index b1739fdfc2ba3..2a131b262f558 100644
--- a/docs/01-app/02-guides/migrating/from-create-react-app.mdx
+++ b/docs/01-app/02-guides/migrating/from-create-react-app.mdx
@@ -306,7 +306,7 @@ If you’re using Tailwind CSS, see our [installation docs](/docs/app/guides/tai
Create React App uses `src/index.tsx` (or `index.js`) as the entry point. In Next.js (App Router), each folder inside the `app` directory corresponds to a route, and each folder should have a `page.tsx`.
-Since we want to keep the app as an SPA for now and intercept **all** routes, we’ll use an [optional catch-all route](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments).
+Since we want to keep the app as an SPA for now and intercept **all** routes, we’ll use an [optional catch-all route](/docs/app/api-reference/file-conventions/dynamic-routes#optional-catch-all-segments).
1. **Create a `[[...slug]]` directory inside `app`.**
diff --git a/docs/01-app/02-guides/migrating/from-vite.mdx b/docs/01-app/02-guides/migrating/from-vite.mdx
index de1db943f4f7b..59b5144997c9a 100644
--- a/docs/01-app/02-guides/migrating/from-vite.mdx
+++ b/docs/01-app/02-guides/migrating/from-vite.mdx
@@ -352,7 +352,7 @@ entrypoint of your application.
Since in this guide we're aiming first to set up our Next.js as an SPA (Single Page Application), you need your page entrypoint to catch all possible routes of your application. For that, create a new `[[...slug]]` directory in your `app` directory.
-This directory is what is called an [optional catch-all route segment](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments). Next.js uses a file-system based router where folders are used to define routes. This special directory will make sure that all routes of your application will be directed to its containing `page.tsx` file.
+This directory is what is called an [optional catch-all route segment](/docs/app/api-reference/file-conventions/dynamic-routes#optional-catch-all-segments). Next.js uses a file-system based router where folders are used to define routes. This special directory will make sure that all routes of your application will be directed to its containing `page.tsx` file.
2. **Create a new `page.tsx` file inside the `app/[[...slug]]` directory with the following content:**
diff --git a/docs/01-app/02-guides/static-exports.mdx b/docs/01-app/02-guides/static-exports.mdx
index 53959c94e88ea..f048e7116445f 100644
--- a/docs/01-app/02-guides/static-exports.mdx
+++ b/docs/01-app/02-guides/static-exports.mdx
@@ -40,7 +40,7 @@ After running `next build`, Next.js will create an `out` folder with the HTML/CS
-You can utilize [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) and [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths) to generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/app/building-your-application/routing/dynamic-routes)).
+You can utilize [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) and [`getStaticPaths`](/docs/pages/building-your-application/data-fetching/get-static-paths) to generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/app/api-reference/file-conventions/dynamic-routes)).
@@ -154,7 +154,7 @@ export default function Page() {
The majority of core Next.js features needed to build a static site are supported, including:
-- [Dynamic Routes when using `getStaticPaths`](/docs/app/building-your-application/routing/dynamic-routes)
+- [Dynamic Routes when using `getStaticPaths`](/docs/app/api-reference/file-conventions/dynamic-routes)
- Prefetching with `next/link`
- Preloading JavaScript
- [Dynamic Imports](/docs/pages/guides/lazy-loading)
@@ -277,8 +277,8 @@ Features that require a Node.js server, or dynamic logic that cannot be computed
-- [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes) with `dynamicParams: true`
-- [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes) without `generateStaticParams()`
+- [Dynamic Routes](/docs/app/api-reference/file-conventions/dynamic-routes) with `dynamicParams: true`
+- [Dynamic Routes](/docs/app/api-reference/file-conventions/dynamic-routes) without `generateStaticParams()`
- [Route Handlers](/docs/app/building-your-application/routing/route-handlers) that rely on Request
- [Cookies](/docs/app/api-reference/functions/cookies)
- [Rewrites](/docs/app/api-reference/config/next-config-js/rewrites)
diff --git a/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx b/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx
index c50eec82c5ddd..db694f2d0d5a9 100644
--- a/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx
+++ b/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx
@@ -271,7 +271,7 @@ export async function GET(request) {
### Dynamic Route Segments
-Route Handlers can use [Dynamic Segments](/docs/app/building-your-application/routing/dynamic-routes) to create request handlers from dynamic data.
+Route Handlers can use [Dynamic Segments](/docs/app/api-reference/file-conventions/dynamic-routes) to create request handlers from dynamic data.
```ts filename="app/items/[slug]/route.ts" switcher
export async function GET(
diff --git a/docs/01-app/04-deep-dive/caching.mdx b/docs/01-app/04-deep-dive/caching.mdx
index 356444d976a3a..5c2d9d1e060da 100644
--- a/docs/01-app/04-deep-dive/caching.mdx
+++ b/docs/01-app/04-deep-dive/caching.mdx
@@ -522,7 +522,7 @@ See the [Route Segment Config](/docs/app/api-reference/file-conventions/route-se
### `generateStaticParams`
-For [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes) (e.g. `app/blog/[slug]/page.js`), paths provided by `generateStaticParams` are cached in the Full Route Cache at build time. At request time, Next.js will also cache paths that weren't known at build time the first time they're visited.
+For [dynamic segments](/docs/app/api-reference/file-conventions/dynamic-routes) (e.g. `app/blog/[slug]/page.js`), paths provided by `generateStaticParams` are cached in the Full Route Cache at build time. At request time, Next.js will also cache paths that weren't known at build time the first time they're visited.
To statically render all paths at build time, supply the full list of paths to `generateStaticParams`:
@@ -563,7 +563,7 @@ export async function generateStaticParams() {
export const dynamic = 'force-static'
```
-To disable caching at request time, add the `export const dynamicParams = false` option in a route segment. When this config option is used, only paths provided by `generateStaticParams` will be served, and other routes will 404 or match (in the case of [catch-all routes](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)).
+To disable caching at request time, add the `export const dynamicParams = false` option in a route segment. When this config option is used, only paths provided by `generateStaticParams` will be served, and other routes will 404 or match (in the case of [catch-all routes](/docs/app/api-reference/file-conventions/dynamic-routes#catch-all-segments)).
### React `cache` function
diff --git a/docs/01-app/05-api-reference/02-components/link.mdx b/docs/01-app/05-api-reference/02-components/link.mdx
index 7452a95f83aee..bf0bdd37b43be 100644
--- a/docs/01-app/05-api-reference/02-components/link.mdx
+++ b/docs/01-app/05-api-reference/02-components/link.mdx
@@ -514,7 +514,7 @@ The following examples demonstrate how to use the `` component in differen
### Linking to dynamic segments
-When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
+When linking to [dynamic segments](/docs/app/api-reference/file-conventions/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
```tsx filename="app/blog/post-list.tsx" switcher
import Link from 'next/link'
@@ -629,7 +629,7 @@ If you'd like to scroll to a specific `id` on navigation, you can append your UR
### Linking to dynamic route segments
-For [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes), it can be handy to use template literals to create the link's path.
+For [dynamic route segments](/docs/app/api-reference/file-conventions/dynamic-routes), it can be handy to use template literals to create the link's path.
@@ -973,7 +973,7 @@ export default Home
The above example has a link to:
- A predefined route: `/about?name=test`
-- A [dynamic route](/docs/app/building-your-application/routing/dynamic-routes): `/blog/my-post`
+- A [dynamic route](/docs/app/api-reference/file-conventions/dynamic-routes): `/blog/my-post`
You can use every property as defined in the [Node.js URL module documentation](https://nodejs.org/api/url.html#url_url_strings_and_url_objects).
@@ -1230,7 +1230,7 @@ export default function Home() {
-> **Good to know**: If you're using [Dynamic Routes](/docs/app/building-your-application/routing/dynamic-routes), you'll need to adapt your `as` and `href` props. For example, if you have a Dynamic Route like `/dashboard/authed/[user]` that you want to present differently via middleware, you would write: `Profile`.
+> **Good to know**: If you're using [Dynamic Routes](/docs/app/api-reference/file-conventions/dynamic-routes), you'll need to adapt your `as` and `href` props. For example, if you have a Dynamic Route like `/dashboard/authed/[user]` that you want to present differently via middleware, you would write: `Profile`.
diff --git a/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx
index cd4c91930b5c7..bfc51ad9546dd 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/app-icons.mdx
@@ -177,7 +177,7 @@ The default export function receives the following props:
#### `params` (optional)
-An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) object from the root segment down to the segment `icon` or `apple-icon` is colocated in.
+An object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) object from the root segment down to the segment `icon` or `apple-icon` is colocated in.
```tsx filename="app/shop/[slug]/icon.tsx" switcher
export default function Icon({ params }: { params: { slug: string } }) {
diff --git a/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx
index 1d43d20964bc3..2aff897660380 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx
@@ -220,7 +220,7 @@ The default export function receives the following props:
#### `params` (optional)
-An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) object from the root segment down to the segment `opengraph-image` or `twitter-image` is colocated in.
+An object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) object from the root segment down to the segment `opengraph-image` or `twitter-image` is colocated in.
```tsx filename="app/shop/[slug]/opengraph-image.tsx" switcher
export default function Image({ params }: { params: { slug: string } }) {
diff --git a/docs/01-app/05-api-reference/03-file-conventions/default.mdx b/docs/01-app/05-api-reference/03-file-conventions/default.mdx
index 3c016142bc6e3..553f6b4a47865 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/default.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/default.mdx
@@ -31,7 +31,7 @@ Additionally, since `children` is an implicit slot, you also need to create a `d
### `params` (optional)
-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:
+A promise that resolves to an object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/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({
diff --git a/docs/01-app/05-api-reference/03-file-conventions/layout.mdx b/docs/01-app/05-api-reference/03-file-conventions/layout.mdx
index fc6c488a8cf73..e04f216a7aa36 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/layout.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/layout.mdx
@@ -57,7 +57,7 @@ Layout components should accept and use a `children` prop. During rendering, `ch
#### `params` (optional)
-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.
+A promise that resolves to an object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) object from the root segment down to that layout.
```tsx filename="app/dashboard/[team]/layout.tsx" switcher
export default async function Layout({
@@ -193,7 +193,7 @@ See the [examples](/docs/app/building-your-application/routing/layouts-and-templ
### 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.
+Using [dynamic route segments](/docs/app/api-reference/file-conventions/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({
diff --git a/docs/01-app/05-api-reference/03-file-conventions/page.mdx b/docs/01-app/05-api-reference/03-file-conventions/page.mdx
index 2fcad441ea637..f443d35f8568d 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/page.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/page.mdx
@@ -36,7 +36,7 @@ export default function Page({ params, searchParams }) {
#### `params` (optional)
-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.
+A promise that resolves to an object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) from the root segment down to that page.
```tsx filename="app/shop/[slug]/page.tsx" switcher
export default async function Page({
@@ -98,7 +98,7 @@ export default async function Page({ searchParams }) {
### Displaying content based on `params`
-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.
+Using [dynamic route segments](/docs/app/api-reference/file-conventions/dynamic-routes), you can display or fetch specific content for the page based on the `params` prop.
```tsx filename="app/blog/[slug]/page.tsx" switcher
export default async function Page({
diff --git a/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx b/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
index d46e5c0ec955b..cd13c0aee64e8 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
@@ -216,7 +216,7 @@ export const maxDuration = 5
### `generateStaticParams`
-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.
+The `generateStaticParams` function can be used in combination with [dynamic route segments](/docs/app/api-reference/file-conventions/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.
diff --git a/docs/01-app/05-api-reference/03-file-conventions/route.mdx b/docs/01-app/05-api-reference/03-file-conventions/route.mdx
index a7ec9773cabd1..c71b011cbddf0 100644
--- a/docs/01-app/05-api-reference/03-file-conventions/route.mdx
+++ b/docs/01-app/05-api-reference/03-file-conventions/route.mdx
@@ -79,7 +79,7 @@ export async function GET(request) {
#### `context` (optional)
-- **`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.
+- **`params`**: a promise that resolves to an object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) for the current route.
```ts filename="app/dashboard/[team]/route.ts" switcher
export async function GET(
diff --git a/docs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx b/docs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx
index 857f949a2ae4b..994e1cc7ba892 100644
--- a/docs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx
+++ b/docs/01-app/05-api-reference/04-functions/generate-image-metadata.mdx
@@ -16,7 +16,7 @@ You can use `generateImageMetadata` to generate different versions of one image
#### `params` (optional)
-An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) object from the root segment down to the segment `generateImageMetadata` is called from.
+An object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) object from the root segment down to the segment `generateImageMetadata` is called from.
```tsx filename="icon.tsx" switcher
export function generateImageMetadata({
diff --git a/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx b/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
index 7fffd26a9579b..fb4118f983fea 100644
--- a/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
+++ b/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
@@ -112,7 +112,7 @@ export default function Page({ params, searchParams }) {}
- `props` - An object containing the parameters of the current route:
- - `params` - An object containing the [dynamic route parameters](/docs/app/building-your-application/routing/dynamic-routes) object from the root segment down to the segment `generateMetadata` is called from. Examples:
+ - `params` - An object containing the [dynamic route parameters](/docs/app/api-reference/file-conventions/dynamic-routes) object from the root segment down to the segment `generateMetadata` is called from. Examples:
| Route | URL | `params` |
| ------------------------------- | ----------- | ------------------------- |
diff --git a/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx b/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx
index 3f3a4894df3c9..2b3897ed82e81 100644
--- a/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx
+++ b/docs/01-app/05-api-reference/04-functions/generate-static-params.mdx
@@ -3,7 +3,7 @@ title: generateStaticParams
description: API reference for the generateStaticParams function.
---
-The `generateStaticParams` function can be used in combination with [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes) to [**statically generate**](/docs/app/getting-started/partial-prerendering#static-rendering) routes at build time instead of on-demand at request time.
+The `generateStaticParams` function can be used in combination with [dynamic route segments](/docs/app/api-reference/file-conventions/dynamic-routes) to [**statically generate**](/docs/app/getting-started/partial-prerendering#static-rendering) routes at build time instead of on-demand at request time.
```tsx filename="app/blog/[slug]/page.tsx" switcher
// Return a list of `params` to populate the [slug] dynamic segment
@@ -299,7 +299,7 @@ export const dynamic = 'force-static'
### Disable rendering for unspecified paths
-To prevent unspecified paths from being statically rendered at runtime, add the `export const dynamicParams = false` option in a route segment. When this config option is used, only paths provided by `generateStaticParams` will be served, and unspecified routes will 404 or match (in the case of [catch-all routes](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)).
+To prevent unspecified paths from being statically rendered at runtime, add the `export const dynamicParams = false` option in a route segment. When this config option is used, only paths provided by `generateStaticParams` will be served, and unspecified routes will 404 or match (in the case of [catch-all routes](/docs/app/api-reference/file-conventions/dynamic-routes#catch-all-segments)).
### Multiple Dynamic Segments in a Route
diff --git a/docs/01-app/05-api-reference/04-functions/use-params.mdx b/docs/01-app/05-api-reference/04-functions/use-params.mdx
index 2c0c420f10365..146c14e669072 100644
--- a/docs/01-app/05-api-reference/04-functions/use-params.mdx
+++ b/docs/01-app/05-api-reference/04-functions/use-params.mdx
@@ -3,7 +3,7 @@ title: useParams
description: API Reference for the useParams hook.
---
-`useParams` is a **Client Component** hook that lets you read a route's [dynamic params](/docs/app/building-your-application/routing/dynamic-routes) filled in by the current URL.
+`useParams` is a **Client Component** hook that lets you read a route's [dynamic params](/docs/app/api-reference/file-conventions/dynamic-routes) filled in by the current URL.
```tsx filename="app/example-client-component.tsx" switcher
'use client'
@@ -49,11 +49,11 @@ const params = useParams()
## Returns
-`useParams` returns an object containing the current route's filled in [dynamic parameters](/docs/app/building-your-application/routing/dynamic-routes).
+`useParams` returns an object containing the current route's filled in [dynamic parameters](/docs/app/api-reference/file-conventions/dynamic-routes).
- Each property in the object is an active dynamic segment.
- The properties name is the segment's name, and the properties value is what the segment is filled in with.
-- The properties value will either be a `string` or array of `string`'s depending on the [type of dynamic segment](/docs/app/building-your-application/routing/dynamic-routes).
+- The properties value will either be a `string` or array of `string`'s depending on the [type of dynamic segment](/docs/app/api-reference/file-conventions/dynamic-routes).
- If the route contains no dynamic parameters, `useParams` returns an empty object.
- If used in Pages Router, `useParams` will return `null` on the initial render and updates with properties following the rules above once the router is ready.
From a93c5c6e778a1f393b0370c42ef03bb71a4a4b75 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 21 May 2025 09:07:02 +0100
Subject: [PATCH 3/5] Add dynamic segments example to getting started
---
.../03-layouts-and-pages.mdx | 41 +++++++++++++++++++
1 file changed, 41 insertions(+)
diff --git a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
index 5e4658d236543..4af32ed69b206 100644
--- a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
+++ b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
@@ -9,6 +9,7 @@ related:
- app/api-reference/file-conventions/layout
- app/api-reference/file-conventions/page
- app/api-reference/components/link
+ - app/api-reference/file-conventions/dynamic-routes
---
Next.js uses **file-system based routing**, meaning you can use folders and files to define routes. This page will guide you through how to create layouts and pages, and link between them.
@@ -206,6 +207,46 @@ export default function BlogLayout({ children }) {
If you were to combine the two layouts above, the root layout (`app/layout.js`) would wrap the blog layout (`app/blog/layout.js`), which would wrap the blog (`app/blog/page.js`) and blog post page (`app/blog/[slug]/page.js`).
+## Creating a dynamic segment
+
+[Dynamic segments](/docs/app/api-reference/file-conventions/dynamic-routes) allow you to create routes that are generated from data. For example, instead of manually creating a route for each individual blog post, you can create a dynamic segment to generate the routes based on blog post data.
+
+To create a dynamic segment, wrap the segment (folder) name in square brackets: `[segmentName]`. For example, in the `app/blog/[slug]/page.tsx` route, the `[slug]` is the dynamic segment.
+
+```tsx filename="app/blog/[slug]/page.tsx" switcher
+export default function BlogPostPage({
+ params,
+}: {
+ params: Promise<{ slug: string }>
+}) {
+ const { slug } = await params
+ const post = await getPost(slug)
+
+ return (
+