generateImageMetadata
Mit generateImageMetadata können Sie verschiedene Versionen eines Bildes generieren oder mehrere Bilder für ein Routensegment zurückgeben. Dies ist nützlich, wenn Sie Metadatenwerte nicht hartcodieren möchten, beispielsweise für Icons.
Parameter
Die generateImageMetadata-Funktion akzeptiert die folgenden Parameter:
params (optional)
Ein Objekt, das das dynamische Routenparameter-Objekt vom Root-Segment bis zum Segment enthält, aus dem generateImageMetadata aufgerufen wird.
export function generateImageMetadata({
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' } |
Rückgabe
Die generateImageMetadata-Funktion sollte ein Array von Objekten mit den Metadaten des Bildes wie alt und size zurückgeben. Zusätzlich muss jedes Element einen id-Wert enthalten, der an die Props der Bilderzeugungsfunktion übergeben wird.
| Bild-Metadaten-Objekt | Typ |
|---|---|
id | string (erforderlich) |
alt | string |
size | { width: number; height: number } |
contentType | string |
import { ImageResponse } from 'next/og'
export function generateImageMetadata() {
return [
{
contentType: 'image/png',
size: { width: 48, height: 48 },
id: 'small',
},
{
contentType: 'image/png',
size: { width: 72, height: 72 },
id: 'medium',
},
]
}
export default function Icon({ id }: { id: string }) {
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 88,
background: '#000',
color: '#fafafa',
}}
>
Icon {id}
</div>
)
)
}Beispiele
Verwendung externer Daten
Dieses Beispiel verwendet das params-Objekt und externe Daten, um mehrere Open Graph-Bilder für ein Routensegment zu generieren.
import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'
export async function generateImageMetadata({
params,
}: {
params: { id: string }
}) {
const images = await getOGImages(params.id)
return images.map((image, idx) => ({
id: idx,
size: { width: 1200, height: 600 },
alt: image.text,
contentType: 'image/png',
}))
}
export default async function Image({
params,
id,
}: {
params: { id: string }
id: number
}) {
const productId = (await params).id
const imageId = id
const text = await getCaptionForImage(productId, imageId)
return new ImageResponse(
(
<div
style={
{
// ...
}
}
>
{text}
</div>
)
)
}Versionshistorie
| Version | Änderungen |
|---|---|
v13.3.0 | generateImageMetadata eingeführt. |