Skip to content

Commit c08e05f

Browse files
huozhiicyJoseph
huozhi
and
icyJoseph
authored
[docs] update other params type of metadata image routes (#84491)
Co-authored-by: Joseph Chamochumbi <[email protected]>
1 parent 5080edb commit c08e05f

File tree

3 files changed

+109
-37
lines changed

3 files changed

+109
-37
lines changed

‎docs/01-app/03-api-reference/03-file-conventions/01-metadata/app-icons.mdx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -177,25 +177,33 @@ The default export function receives the following props:
177177

178178
#### `params` (optional)
179179

180-
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.
180+
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 the segment `icon` or `apple-icon` is colocated in.
181+
182+
> **Good to know**: If you use [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata), the function will also receive an `id` prop that is a promise resolving to the `id` value from one of the items returned by `generateImageMetadata`.
181183
182184
```tsx filename="app/shop/[slug]/icon.tsx" switcher
183-
export default function Icon({ params }: { params: { slug: string } }) {
185+
export default async function Icon({
186+
params,
187+
}: {
188+
params: Promise<{ slug: string }>
189+
}) {
190+
const { slug } = await params
184191
// ...
185192
}
186193
```
187194

188195
```jsx filename="app/shop/[slug]/icon.js" switcher
189-
export default function Icon({ params }) {
196+
export default async function Icon({ params }) {
197+
const { slug } = await params
190198
// ...
191199
}
192200
```
193201

194-
| Route | URL | `params` |
195-
| ------------------------------- | ----------- | ------------------------- |
196-
| `app/shop/icon.js` | `/shop` | `undefined` |
197-
| `app/shop/[slug]/icon.js` | `/shop/1` | `{ slug: '1' }` |
198-
| `app/shop/[tag]/[item]/icon.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
202+
| Route | URL | `params` |
203+
| ------------------------------- | ----------- | ---------------------------------- |
204+
| `app/shop/icon.js` | `/shop` | `undefined` |
205+
| `app/shop/[slug]/icon.js` | `/shop/1` | `Promise<{ slug: '1' }>` |
206+
| `app/shop/[tag]/[item]/icon.js` | `/shop/1/2` | `Promise<{ tag: '1', item: '2' }>` |
199207

200208
### Returns
201209

@@ -254,6 +262,7 @@ export default function Icon() {}
254262

255263
## Version History
256264

257-
| Version | Changes |
258-
| --------- | -------------------------------------------- |
259-
| `v13.3.0` | `favicon` `icon` and `apple-icon` introduced |
265+
| Version | Changes |
266+
| --------- | ---------------------------------------------------- |
267+
| `v16.0.0` | `params` is now a promise that resolves to an object |
268+
| `v13.3.0` | `favicon` `icon` and `apple-icon` introduced |

‎docs/01-app/03-api-reference/03-file-conventions/01-metadata/opengraph-image.mdx‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -220,25 +220,33 @@ The default export function receives the following props:
220220

221221
#### `params` (optional)
222222

223-
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.
223+
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 the segment `opengraph-image` or `twitter-image` is colocated in.
224+
225+
> **Good to know**: If you use [`generateImageMetadata`](/docs/app/api-reference/functions/generate-image-metadata), the function will also receive an `id` prop that is a promise resolving to the `id` value from one of the items returned by `generateImageMetadata`.
224226
225227
```tsx filename="app/shop/[slug]/opengraph-image.tsx" switcher
226-
export default function Image({ params }: { params: { slug: string } }) {
228+
export default async function Image({
229+
params,
230+
}: {
231+
params: Promise<{ slug: string }>
232+
}) {
233+
const { slug } = await params
227234
// ...
228235
}
229236
```
230237

231238
```jsx filename="app/shop/[slug]/opengraph-image.js" switcher
232-
export default function Image({ params }) {
239+
export default async function Image({ params }) {
240+
const { slug } = await params
233241
// ...
234242
}
235243
```
236244

237-
| Route | URL | `params` |
238-
| ------------------------------------------ | ----------- | ------------------------- |
239-
| `app/shop/opengraph-image.js` | `/shop` | `undefined` |
240-
| `app/shop/[slug]/opengraph-image.js` | `/shop/1` | `{ slug: '1' }` |
241-
| `app/shop/[tag]/[item]/opengraph-image.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` |
245+
| Route | URL | `params` |
246+
| ------------------------------------------ | ----------- | ---------------------------------- |
247+
| `app/shop/opengraph-image.js` | `/shop` | `undefined` |
248+
| `app/shop/[slug]/opengraph-image.js` | `/shop/1` | `Promise<{ slug: '1' }>` |
249+
| `app/shop/[tag]/[item]/opengraph-image.js` | `/shop/1/2` | `Promise<{ tag: '1', item: '2' }>` |
242250

243251
### Returns
244252

@@ -334,8 +342,13 @@ export const size = {
334342
}
335343
export const contentType = 'image/png'
336344

337-
export default async function Image({ params }: { params: { slug: string } }) {
338-
const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
345+
export default async function Image({
346+
params,
347+
}: {
348+
params: Promise<{ slug: string }>
349+
}) {
350+
const { slug } = await params
351+
const post = await fetch(`https://.../posts/${slug}`).then((res) =>
339352
res.json()
340353
)
341354

@@ -373,7 +386,8 @@ export const size = {
373386
export const contentType = 'image/png'
374387

375388
export default async function Image({ params }) {
376-
const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
389+
const { slug } = await params
390+
const post = await fetch(`https://.../posts/${slug}`).then((res) =>
377391
res.json()
378392
)
379393

@@ -509,6 +523,7 @@ export default async function Image() {
509523

510524
## Version History
511525

512-
| Version | Changes |
513-
| --------- | ------------------------------------------------- |
514-
| `v13.3.0` | `opengraph-image` and `twitter-image` introduced. |
526+
| Version | Changes |
527+
| --------- | ---------------------------------------------------- |
528+
| `v16.0.0` | `params` is now a promise that resolves to an object |
529+
| `v13.3.0` | `opengraph-image` and `twitter-image` introduced. |

‎docs/01-app/03-api-reference/04-functions/generate-image-metadata.mdx‎

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function generateImageMetadata({ params }) {
4242

4343
## Returns
4444

45-
The `generateImageMetadata` function should return an `array` of objects containing the image's metadata such as `alt` and `size`. In addition, each item **must** include an `id` value which will be passed to the props of the image generating function.
45+
The `generateImageMetadata` function should return an `array` of objects containing the image's metadata such as `alt` and `size`. In addition, each item **must** include an `id` value which will be passed as a promise to the props of the image generating function.
4646

4747
| Image Metadata Object | Type |
4848
| --------------------- | ----------------------------------- |
@@ -69,7 +69,8 @@ export function generateImageMetadata() {
6969
]
7070
}
7171

72-
export default function Icon({ id }: { id: string }) {
72+
export default async function Icon({ id }: { id: Promise<string | number> }) {
73+
const iconId = await id
7374
return new ImageResponse(
7475
(
7576
<div
@@ -84,7 +85,7 @@ export default function Icon({ id }: { id: string }) {
8485
color: '#fafafa',
8586
}}
8687
>
87-
Icon {id}
88+
Icon {iconId}
8889
</div>
8990
)
9091
)
@@ -109,7 +110,8 @@ export function generateImageMetadata() {
109110
]
110111
}
111112

112-
export default function Icon({ id }) {
113+
export default async function Icon({ id }) {
114+
const iconId = await id
113115
return new ImageResponse(
114116
(
115117
<div
@@ -124,13 +126,57 @@ export default function Icon({ id }) {
124126
color: '#fafafa',
125127
}}
126128
>
127-
Icon {id}
129+
Icon {iconId}
128130
</div>
129131
)
130132
)
131133
}
132134
```
133135

136+
## Image generation function props
137+
138+
When using `generateImageMetadata`, the default export image generation function receives the following props:
139+
140+
#### `id`
141+
142+
A promise that resolves to the `id` value from one of the items returned by `generateImageMetadata`. The `id` will be a `string` or `number` depending on what was returned from `generateImageMetadata`.
143+
144+
```tsx filename="icon.tsx" switcher
145+
export default async function Icon({ id }: { id: Promise<string | number> }) {
146+
const iconId = await id
147+
// Use iconId to generate the image
148+
}
149+
```
150+
151+
```jsx filename="icon.js" switcher
152+
export default async function Icon({ id }) {
153+
const iconId = await id
154+
// Use iconId to generate the image
155+
}
156+
```
157+
158+
#### `params` (optional)
159+
160+
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 segment the image is colocated in.
161+
162+
```tsx filename="icon.tsx" switcher
163+
export default async function Icon({
164+
params,
165+
}: {
166+
params: Promise<{ slug: string }>
167+
}) {
168+
const { slug } = await params
169+
// Use slug to generate the image
170+
}
171+
```
172+
173+
```jsx filename="icon.js" switcher
174+
export default async function Icon({ params }) {
175+
const { slug } = await params
176+
// Use slug to generate the image
177+
}
178+
```
179+
134180
### Examples
135181

136182
#### Using external data
@@ -160,11 +206,11 @@ export default async function Image({
160206
params,
161207
id,
162208
}: {
163-
params: { id: string }
164-
id: number
209+
params: Promise<{ id: string }>
210+
id: Promise<number>
165211
}) {
166212
const productId = (await params).id
167-
const imageId = id
213+
const imageId = await id
168214
const text = await getCaptionForImage(productId, imageId)
169215

170216
return new ImageResponse(
@@ -200,7 +246,7 @@ export async function generateImageMetadata({ params }) {
200246

201247
export default async function Image({ params, id }) {
202248
const productId = (await params).id
203-
const imageId = id
249+
const imageId = await id
204250
const text = await getCaptionForImage(productId, imageId)
205251

206252
return new ImageResponse(
@@ -221,6 +267,8 @@ export default async function Image({ params, id }) {
221267

222268
## Version History
223269

224-
| Version | Changes |
225-
| --------- | ----------------------------------- |
226-
| `v13.3.0` | `generateImageMetadata` introduced. |
270+
| Version | Changes |
271+
| --------- | --------------------------------------------------------------------------------------------------- |
272+
| `v16.0.0` | `id` passed to the Image generation function is now a promise that resolves to `string` or `number` |
273+
| `v16.0.0` | `params` passed to the Image generation function is now a promise that resolves to an object |
274+
| `v13.3.0` | `generateImageMetadata` introduced. |

0 commit comments

Comments
 (0)