feat: 동적 OpenGraph 이미지 생성 기능 추가 #539
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 페이지별 제목과 설명을 포함한 OG 이미지를 동적으로 생성 - Mona Sans, Pretendard 폰트를 CDN에서 런타임으로 로드 - 배경 이미지(og-background.png)를 사용한 브랜딩 적용 - API Route(/api/og)를 통한 이미지 생성 - i18n 리다이렉트를 우회하기 위한 rewrites 설정 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
vercel.json에 rewrites 설정을 추가하여 /api/* 경로가 i18n 리다이렉트의 영향을 받지 않도록 수정 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- /api/og -> /_og로 경로 변경 (언더스코어 prefix는 i18n 처리 제외) - middleware.ts 제거 (불필요) - vercel.json의 rewrites는 유지 (다른 API 경로를 위해) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- /_og는 Next.js에서 무시되므로 /og-image로 변경 - vercel.json에 og-image rewrite 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- /og-image 경로가 언어 prefix로 리다이렉트되면 원래 경로로 rewrite - i18n이 middleware보다 먼저 실행되므로 rewrite로 처리 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- App Router의 og-image를 Pages Router API로 이동 (/api/og) - Nextra 미들웨어를 우회하기 위해 proxy.ts에 'api' 경로 추가 - 배경 이미지를 public 폴더로 이동 - Edge runtime 사용으로 성능 개선 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 원본 이미지(1280x720)에서 왼쪽 위 기준으로 1200x630 crop - 이미지 비율 왜곡 없이 원본 품질 유지 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 제목 폰트 크기: 52px → 64px - 줄 높이: 1.3 → 1.2 - 최대 제목 길이: 60자 → 50자 (큰 폰트에 맞게 조정) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 제목 영역을 고정 높이(240px)로 설정 - 제목이 1줄, 2줄, 3줄일 때 모두 영역 내에서 수직 가운데 정렬 - 제목 줄 수가 변해도 위아래로 균등하게 확장 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 외부 컨테이너를 flex-start로 변경하여 고정 위치 레이아웃 적용 - 상단 패딩을 100px로 증가하여 시각적 균형 유지 - 설명 폰트 크기 28px → 32px로 증가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- marginBottom: 24px → 72px로 증가 - 설명 영역을 한 줄 아래로 이동 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 상단 패딩: 100px → 150px로 증가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- lint 경고 해결 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Mona Sans: 영문/라틴 문자용 (GitHub 공식 배포) - Pretendard JP: 한국어/일본어 CJK 문자용 (공식 배포) - 공식 URL 로드 실패 시 로컬 폴백 사용 - public/fonts/에 폴백용 폰트 파일 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Changes
src/app/api/og/route.tsxsrc/app/api/og/og-background.pngsrc/app/[lang]/[[...mdxPath]]/page.tsxnext.config.tsHow it works
/api/og?lang=ko&path=user-manualTest plan
npm run build성공 확인curl -o test.png "http://localhost:3000/api/og?lang=ko&path=user-manual"curl -s http://localhost:3000/ko/user-manual | grep 'og:image'🤖 Generated with Claude Code