7aba242b75
### What? * Support `generateMetadata(props)` to dynamically generate multiple metadata images at the same time ```js // /app/opengraph-image.tsx import { ImageResponse } from 'next/server'; export async function generateImageMetadata({params}) { const images = await ...; return images.map((img, idx) => ({ size: { width: 1200, height: 600 }, alt: img.text, contentType: 'image/png', id: idx, })); } export default async function ({params, id}) { const text = await getTextFor(id); return new ImageResponse( ( <div style={{...}}> {text} </div>), { width: 1200, height: 600 }, ); } ``` ### How? Use `<metadata image>/[[...__metadata_id__]]/route.js` to catch all metadata images id, and then use this `params.__metadata_id__` as id argument for dynamic generate image. If there's param, then we create `<metadata image>/<id>`, if there's only 1 static image without dynamic `generateImageMetadata` then we keep use `<metadata image>` Closes NEXT-896 |
||
---|---|---|
.. | ||
blog | ||
dynamic/[size] | ||
static | ||
layout.tsx | ||
opengraph-image.tsx | ||
twitter-image.tsx |