Next js dynamic opengraph 및 twitter card 이미지 생성하기

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params); // 이 부분은 본인이 설정한 post 데이터
 
  const ogSearchParams = new URLSearchParams();
  ogSearchParams.set("title", post.title); // title 키와 값이다.
  ogSearchParams.set("description", post.description); // description 키와 값이다.
}

import { ImageResponse } from 'next/og';
export const runtime = 'edge'; // edge 런타임을 사용해야한다.
 
export async function GET(req: NextRequest) {
  try {
    const { searchParams } = req.nextUrl;
    const title = searchParams.get('title');
    let description = searchParams.get('description');
 
    if (!title) {
      return new Response('title', {
        status: 400,
      });
    }
 
    if (!description) {
      description = '';
    }
 
    return new ImageResponse(
      (
        // 여기 부분은 원하는 디자인을 하면 됩니다. svg를 추가해서 아이콘도 가능!
        <div>
          <svg>{...}</svg>
          <h2>{title}</h2>
          <p>{description}</p>
        </div>
      ),
 
      // 여기는 ImageResponse의 옵션입니다. 옵션에대해서는 공식문서 참고!
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (error) {
    return new Response('이미지 만들기 실패', { status: 500 });
  }
}

export const runtime = "edge"; // edge 런타임을 사용해야합니다.

export async function GET(req: NextRequest) {
  try {
    const { searchParams } = req.nextUrl;
    const title = searchParams.get("title");
    let description = searchParams.get("description");
 
    // ... 생략
  } catch (error) {
    return new Response("이미지 만들기 실패", { status: 500 });
  }
}

return new ImageResponse(
  (
    <div>
      <svg>{...}</svg>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  ),
 
  {
    width: 1200,
    height: 630,
  }
);

export async function generateMetadata({ params }): Promise<Metadata> {
  const ogSearchParams = new URLSearchParams();
  // ... 이전과 같음
 
  return {
    // ... title 부터 설정한 값들 생략
    openGraph: {
      // ... title 부터 설정한 값들 생략
      images: {
        url: `/api/og?${ogSearchParams.toString()}`,
        width: 1200,
        height: 630,
        alt: post.title,
      },
    },
    twitter: {
      // ... title 부터 설정한 값들 생략
      card: "summary_large_image",
      images: [`/api/og?${ogSearchParams.toString()}`],
    },
  };
}