작성자 : 김찬기

링크 : https://heavy-bear.tistory.com/23

Next.js에서 Open Graph 이미지를 다이나믹하게 생성하는 방법을 공부하면서 겪었던 시행착오와 해결 과정을 정리한 글입니다. 공식 문서를 따라 구현했지만 예상치 못한 문제가 있었고, 이를 디버깅하면서 알게 된 Edge Runtime의 특성과 동작 방식에 대해 정리해 두었습니다.

목표

• OG 이미지용 opengraph-image.tsx 하나로 동적 이미지 생성
• API로부터 받아온 데이터를 이미지로 표시
• 커스텀 폰트와 배경 이미지 사용
• Edge 환경 대응 (환경변수 미사용)

폴더 구조 및 기본 세팅

/public
  └─ open-bg.png
  └─ IropkeBatang.woff

/app/epigrams/[id]/opengraph-image.tsx

ImageResponse

Open Graph 이미지를 생성하는 데 사용된 next/og 패키지의 ImageResponse는 내부적으로 Satori라는 라이브러리를 사용합니다. Satori는 HTML과 CSS를 기반으로 SVG를 생성하는 라이브러리지만, CSS 지원에 일부 제약이 있습니다. 사용 가능한 스타일 속성은 완전한 CSS와 다르며, 몇몇 속성은 아예 지원하지 않거나, 제한적으로만 동작합니다. 실제 어떤 스타일 속성을 사용할 수 있는지는 Satori github에서 확인할 수 있습니다.

GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG