generateImageMetadata
You can usegenerateImageMetadata to generate different versions of one image or return multiple images for one route segment. This is useful for when you want to avoid hard-coding metadata values, such as for icons.
Parameters
generateImageMetadata function accepts the following parameters:
params (optional)
An object containing thedynamic route parameters object from the root segment down to the segmentgenerateImageMetadata is called from.
exportfunctiongenerateImageMetadata({ params,}: { params: { slug:string }}) {// ...}| Route | URL | params |
|---|---|---|
app/shop/icon.js | /shop | undefined |
app/shop/[slug]/icon.js | /shop/1 | { slug: '1' } |
app/shop/[tag]/[item]/icon.js | /shop/1/2 | { tag: '1', item: '2' } |
Returns
ThegenerateImageMetadata function should return anarray of objects containing the image's metadata such asalt andsize. In addition, each itemmust include anid value which will be passed as a promise to the props of the image generating function.
| Image Metadata Object | Type |
|---|---|
id | string (required) |
alt | string |
size | { width: number; height: number } |
contentType | string |
import { ImageResponse }from'next/og'exportfunctiongenerateImageMetadata() {return [ { contentType:'image/png', size: { width:48, height:48 }, id:'small', }, { contentType:'image/png', size: { width:72, height:72 }, id:'medium', }, ]}exportdefaultasyncfunctionIcon({ id }: { id:Promise<string|number> }) {consticonId=await idreturnnewImageResponse( ( <divstyle={{ width:'100%', height:'100%', display:'flex', alignItems:'center', justifyContent:'center', fontSize:88, background:'#000', color:'#fafafa', }} > Icon {iconId} </div> ) )}Image generation function props
When usinggenerateImageMetadata, the default export image generation function receives the following props:
id
A promise that resolves to theid value from one of the items returned bygenerateImageMetadata. Theid will be astring ornumber depending on what was returned fromgenerateImageMetadata.
exportdefaultasyncfunctionIcon({ id }: { id:Promise<string|number> }) {consticonId=await id// Use iconId to generate the image}params (optional)
A promise that resolves to an object containing thedynamic route parameters from the root segment down to the segment the image is colocated in.
exportdefaultasyncfunctionIcon({ params,}: { params:Promise<{ slug:string }>}) {const {slug }=await params// Use slug to generate the image}Examples
Using external data
This example uses theparams object and external data to generate multipleOpen Graph images for a route segment.
import { ImageResponse }from'next/og'import { getCaptionForImage, getOGImages }from'@/app/utils/images'exportasyncfunctiongenerateImageMetadata({ params,}: { params: { id:string }}) {constimages=awaitgetOGImages(params.id)returnimages.map((image, idx)=> ({ id: idx, size: { width:1200, height:600 }, alt:image.text, contentType:'image/png', }))}exportdefaultasyncfunctionImage({ params, id,}: { params:Promise<{ id:string }> id:Promise<number>}) {constproductId= (await params).idconstimageId=await idconsttext=awaitgetCaptionForImage(productId, imageId)returnnewImageResponse( ( <divstyle={ {// ... } } > {text} </div> ) )}Version History
| Version | Changes |
|---|---|
v16.0.0 | id passed to the Image generation function is now a promise that resolves tostring ornumber |
v16.0.0 | params passed to the Image generation function is now a promise that resolves to an object |
v13.3.0 | generateImageMetadata introduced. |
Next Steps
Was this helpful?