피드로 돌아가기
Dev.toFrontend
원문 읽기
Next.js 정적 빌드 기반의 다국어 OG 이미지 자동 생성 시스템 구축
How I Built 19 Per-Topic OG Images with Japanese Fonts at Build Time (Next.js + Satori)
AI 요약
Context
Next.js의 output: 'export' 설정을 통한 완전 정적 배포 환경으로 runtime 이미지 생성 불가. 모든 토픽에 동일한 Generic OG 이미지를 사용하여 클릭률 정체 및 SERP 검색 결과의 변별력 상실 문제 발생.
Technical Solution
opengraph-image.tsx파일 컨벤션과generateStaticParams를 조합하여 빌드 타임에 19개의 경로별 PNG 파일 자동 생성 구조 설계- Satori 엔진의 기본 Latin 폰트 제약을 해결하기 위해
@fontsource/noto-sans-jp패키지를 dev-dependency로 설치하고fs/promises로 WOFF 파일을 직접 로드하여ImageResponse에 주입 - 폰트 파일 크기(~1.4MB) 부담을 Satori의 Glyph Subseting 기능을 통해 최종 PNG 파일 크기를 30KB 수준으로 최적화
- Noto Sans JP 미지원 특수문자(₿)의 폰트 폴백 실패 문제를 해결하기 위해 외부 폰트 의존성을 제거하고 Inline SVG 방식으로 렌더링 구현
- Cloudflare Pages의 확장자 없는 파일 Content-Type 인식 문제 해결을 위해
_headers파일에서 명시적 설정 적용
Impact
- 빌드 타임 생성된 19개의 고유 OG 이미지 확보 및 개별 파일 크기 35KB 미만 유지
실천 포인트
- Next.js 정적 export 환경에서 동적 OG 이미지가 필요할 경우 `generateStaticParams`와 `opengraph-image.tsx` 조합 검토 - Satori 사용 시 비라틴 계열 폰트는 WOFF2가 아닌 WOFF/TTF 형식을 사용하고 `ImageResponse` 옵션에 명시적으로 전달 - 샌드박스 빌드 환경의 네트워크 제약으로 인한 폰트 폴백 실패 가능성을 고려하여 특수 심볼은 SVG로 대체 - 확장자 없는 정적 파일 배포 시 CDN/호스팅 서비스의 Content-Type 헤더 설정 여부 확인