Menu

generateImageMetadata

generateImageMetadataを使用して、1つの画像の異なるバージョンを生成したり、1つのルートセグメントに対して複数の画像を返したりできます。これは、アイコンのようなメタデータ値をハードコーディングしたくない場合に便利です。

パラメータ

generateImageMetadata関数は、以下のパラメータを受け入れます：

params（オプション）

ルートセグメントからgenerateImageMetadataが呼ばれるセグメントまでの動的ルートパラメータオブジェクトを含むオブジェクト。

icon.tsx
TypeScript
export function generateImageMetadata({
  params,
}: {
  params: { slug: string }
}) {
  // ...
}
ルートURLparams
app/shop/icon.js/shopundefined
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などの画像のメタデータを含むオブジェクトの配列を返す必要があります。さらに、各アイテムには必ずid値を含める必要があり、これは画像生成関数のプロップにPromiseとして渡されます。

画像メタデータオブジェクト型
idstring（必須）
altstring
size{ width: number; height: number }
contentTypestring
icon.tsx
TypeScript
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 async function Icon({ id }: { id: Promise<string | number> }) {
  const iconId = await id
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: 88,
          background: '#000',
          color: '#fafafa',
        }}
      >
        Icon {iconId}
      </div>
    )
  )
}

画像生成関数のプロップ

generateImageMetadataを使用する場合、デフォルトエクスポートの画像生成関数は、以下のプロップを受け取ります：

id

generateImageMetadataから返されたアイテムの1つからid値に解決するPromise。idはgenerateImageMetadataから返された内容に応じて、stringまたはnumberになります。

icon.tsx
TypeScript
export default async function Icon({ id }: { id: Promise<string | number> }) {
  const iconId = await id
  // iconIdを使用して画像を生成します
}

params（オプション）

ルートセグメントから画像がコロケーションされているセグメントまでの動的ルートパラメータを含むオブジェクトに解決するPromise。

icon.tsx
TypeScript
export default async function Icon({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // slugを使用して画像を生成します
}

例

外部データの使用

この例では、paramsオブジェクトと外部データを使用して、ルートセグメントに対して複数のOpen Graph画像を生成します。

app/products/[id]/opengraph-image.tsx
TypeScript
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: Promise<{ id: string }>
  id: Promise<number>
}) {
  const productId = (await params).id
  const imageId = await id
  const text = await getCaptionForImage(productId, imageId)
 
  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  )
}

バージョン履歴

バージョン変更内容
v16.0.0画像生成関数に渡されるidは、stringまたはnumberに解決するPromiseになりました
v16.0.0画像生成関数に渡されるparamsは、オブジェクトに解決するPromiseになりました
v13.3.0導入時期：generateImageMetadata

次のステップ

Metadata APIのすべてのオプションを表示します。

メタデータファイル

メタデータファイル規約のAPIドキュメント。