Next.js에서 동적 OG 이미지 생성하기

오늘은 블로그에 큰 변화를 주었습니다! 각 포스트마다 자동으로 생성되는 멋진 썸네일 이미지를 추가했습니다.

Open Graph 이미지란?

Open Graph 이미지는 소셜 미디어에서 링크를 공유할 때 표시되는 미리보기 이미지입니다. Facebook, Twitter, LinkedIn 등에서 링크를 공유하면 이 이미지가 함께 표시됩니다.

왜 동적으로 생성해야 할까?

1. 일관성: 모든 포스트가 통일된 디자인을 가집니다
2. 자동화: 새 포스트를 작성할 때마다 이미지를 만들 필요가 없습니다
3. SEO 향상: 소셜 미디어에서 더 많은 클릭을 유도할 수 있습니다

구현 방법

1. @vercel/og 설치

npm install @vercel/og

2. API Route 생성

app/api/og/route.tsx 파일을 만들어 이미지 생성 로직을 구현했습니다:

import { ImageResponse } from '@vercel/og'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title')
  
  return new ImageResponse(
    (
      <div style={{
        // 스타일링
      }}>
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  )
}

3. 메타데이터 설정

각 포스트 페이지에서 동적으로 메타데이터를 생성합니다:

export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug)
  const ogImageUrl = `/api/og?title=${encodeURIComponent(post.title)}`
  
  return {
    openGraph: {
      images: [ogImageUrl],
    },
  }
}

결과

이제 각 포스트마다 제목을 기반으로 한 고유한 색상의 이미지가 자동으로 생성됩니다!

장점

• 📱 소셜 미디어에서 더 눈에 띄는 공유
• 🎨 일관된 브랜드 이미지
• ⚡ 빠른 생성 속도
• 🔧 유지보수 간편

마무리

이렇게 간단하게 동적 OG 이미지를 구현할 수 있었습니다. Next.js와 Vercel의 조합은 정말 강력하네요!

다음에는 이미지에 더 많은 정보(태그, 작성자 등)를 추가하거나 다양한 레이아웃을 만들어볼 계획입니다. 😊