Next.js와 38언어 번역을 사용해 8,000개 이상의 게임이 포함된 게임 포털을 구축한 방법

Source: Dev.to

스택

• Framework: Next.js 16 with App Router
• Database: Neon PostgreSQL with Prisma 7 ORM
• Hosting: DigitalOcean VPS + Cloudflare CDN
• Image CDN: Custom nginx‑based CDN (img.sonsaur.com) serving pre‑resized AVIF thumbnails
• Search: PostgreSQL trigram indexes (pg_trgm) for fuzzy game search
• AI Translation: Gemini API with 60‑key rotation for rate‑limit management
• Process Manager: PM2 with auto‑restart and memory limits

이미지 CDN 도전 과제

8,000개가 넘는 게임에 각각 썸네일이 필요하므로 이미지 최적화가 핵심이었습니다. 우리는 맞춤형 이미지 파이프라인을 구축했습니다:

• 원본 이미지는 512 px AVIF 형식으로 저장
• 128 px (~6 KB)와 256 px (~13 KB) 변형으로 사전 리사이즈
• 전용 nginx 서브도메인 (img.sonsaur.com)을 통해 제공
• JavaScript 없이 이미지 컴포넌트 사용 (순수 “ 태그만으로 수분 히드레이션 비용 0)

결과: 게임 카드 이미지 페이로드가 84 % 감소했습니다.

8,000개 게임을 38개 언어로 번역하기

가장 흥미로운 도전 과제였습니다. UI는 next-intl 로 처리했지만, 게임별 콘텐츠(설명, 플레이 가이드, 팁, FAQ)도 번역해야 했습니다.

우리의 접근 방식:

• 여러 프로젝트에 걸쳐 60개의 Gemini API 키 배포
• 2 분마다 실행되는 크론 작업, 배치당 60개 게임 처리(키당 1개)
• Node.js 스트리밍 충돌 방지를 위한 순차 처리
• 키당 2분 쿨다운, 모든 키가 소진되면 10분 대기
• Tier 1 레이트 제한: 프로젝트당 키당 하루 1,500 요청

전체 용량에서는 모든 언어에 대해 하루에 약 43,200개의 게임 페이지를 번역합니다.

성능 결과

• Lighthouse: Performance 79, Accessibility 93, Best Practices 100, SEO 100
• 첫 번째 게임 로드: 3 초 이하
• 이후 탐색: 거의 즉시 (Next.js 프리패칭)
• 이미지 CDN: 128 px 썸네일 평균 6 KB (원본 34 KB 대비)

앞으로의 계획

• 네이티브 Android 및 iOS 앱 출시
• 38개 언어 전체에 대한 번역 커버리지 완성
• 라이브러리에 새로운 게임 지속적으로 추가

확인해 보세요: sonsaur.com

스택 전반에 대한 질문이 있으면 언제든 답변해 드리겠습니다. Next.js + Neon PostgreSQL + 맞춤형 이미지 CDN 조합은 이 사용 사례에 매우 적합했습니다.