문서
App Router 사용하기
API 참조
함수
generateImageMetadata

generateImageMetadata

generateImageMetadata를 사용하여 하나의 이미지에 대한 여러 버전을 생성하거나 하나의 라우트 세그먼트에 대해 여러 이미지를 반환할 수 있습니다. 이는 아이콘과 같은 메타데이터 값을 하드코딩하지 않으려는 경우에 유용합니다.

매개변수

generateImageMetadata 함수는 다음 매개변수를 받습니다:

params (선택사항)

generateImageMetadata가 호출된 세그먼트까지의 루트 세그먼트에서 시작하는 동적 라우트 매개변수 객체를 포함하는 객체입니다.

icon.tsx
export function generateImageMetadata({
  params,
}: {
  params: { slug: string };
}) {
  // ...
}
icon.js
export function generateImageMetadata({ params }) {
  // ...
}
라우트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와 같은 이미지의 메타데이터를 포함하는 객체의 배열을 반환해야 합니다. 또한, 각 항목은 이미지 생성 함수의 props로 전달될 반드시 id 값을 포함해야 합니다.

이미지 메타데이터 객체타입
idstring (필수)
altstring
size{ width: number; height: number }
contentTypestring
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 객체와 외부 데이터를 사용하여 라우트 세그먼트에 대한 여러 오픈 그래프 이미지를 생성합니다.

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 = 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 = params.id;
  const imageId = id;
  const text = await getCaptionForImage(productId, imageId);
 
  return new ImageResponse(
    (
      <div
        style={
          {
            // ...
          }
        }
      >
        {text}
      </div>
    )
  );
}

버전 기록

버전변경 사항
v13.3.0generateImageMetadata가 도입되었습니다.
fetchgenerateMetadata