generateImageMetadata
generateImageMetadata
を使用して、1つの画像のさまざまなバージョンを生成したり、1つのルートセグメントに対して複数の画像を返したりできます。これは、アイコンなどのメタデータ値をハードコーディングするのを避けたい場合に便利です。
パラメータ
generateImageMetadata
関数は、以下のパラメータを受け入れます:
params
(オプション)
root セグメントから generateImageMetadata
が呼び出されるセグメントまでの動的ルートセグメントオブジェクトを含むオブジェクトです。
- TypeScript
- JavaScript
icon.tsx
export function generateImageMetadata({
params,
}: {
params: { slug: string }
}) {
// ...
}
icon.js
export function generateImageMetadata({ params }) {
// ...
}
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' } |
戻り値
generateImageMetadata
関数は、alt
やsize
のような画像のメタデータを含むオブジェクトのarray
を返す必要があります。さらに、各項目にはその画像生成関数のpropsに渡されるid
値を必ず含める必要があります。
画像メタデータオブジェクト | タイプ |
---|---|
id | string (必須) |
alt | string |
size | { width: number; height: number } |
contentType | string |
- TypeScript
- JavaScript
icon.tsx
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>
)
)
}
icon.js
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 }) {
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 88,
background: '#000',
color: '#fafafa',
}}
>
Icon {id}
</div>
)
)
}
例
外部データを使用する
この例では、params
オブジェクトと外部データを使用して、ルートセグメントの複数のOpen Graph画像を生成します。
- TypeScript
- JavaScript
app/products/[id]/opengraph-image.tsx
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>
)
)
}
app/products/[id]/opengraph-image.js
import { ImageResponse } from 'next/og'
import { getCaptionForImage, getOGImages } from '@/app/utils/images'
export async function generateImageMetadata({ params }) {
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 }) {
const productId = (await params).id
const imageId = id
const text = await getCaptionForImage(productId, imageId)
return new ImageResponse(
(
<div
style={
{
// ...
}
}
>
{text}
</div>
)
)
}
バージョン履歴
バージョン | 変更内容 |
---|---|
v13.3.0 | generateImageMetadata が導入されました |