Xây dựng cổng game 8.000+ tựa game với Next.js và dịch thuật AI 38 ngôn ngữ

Chúng tôi gần đây đã ra mắt lại Sonsaur.com, một cổng trò chơi trình duyệt miễn phí sở hữu bộ sưu tập hơn 8.000 tựa game. Dưới đây là chi tiết về công nghệ (tech stack) và những thách thức kỹ thuật thú vị mà chúng tôi đã giải quyết để vận hành hệ thống này.

Hệ thống công nghệ

Để xây dựng nền tảng này, chúng tôi đã kết hợp các công nghệ hiện đại nhằm tối ưu hóa hiệu suất và khả năng mở rộng:

• Framework: Next.js 16 với App Router
• Cơ sở dữ liệu: Neon PostgreSQL kết hợp với Prisma 7 ORM
• Hosting: DigitalOcean VPS cùng Cloudflare CDN
• CDN Hình ảnh: CDN tùy chỉnh dựa trên nginx (img.sonsaur.com) phục vụ các thumbnail định dạng AVIF đã được chỉnh sửa kích thước trước
• Tìm kiếm: Sử dụng chỉ mục trigram của PostgreSQL (pg_trgm) cho khả năng tìm kiếm game mờ (fuzzy search)
• Dịch thuật AI: Gemini API với cơ chế xoay vòng 60 khóa API để quản lý giới hạn tốc độ
• Quản lý tiến trình: PM2 với tính năng tự động khởi động lại và giới hạn bộ nhớ

Thách thức về CDN hình ảnh

Với hơn 8.000 game, mỗi tựa game đều cần các hình ảnh đại diện (thumbnail), do đó việc tối ưu hóa hình ảnh là yếu tố then chốt. Chúng tôi đã xây dựng một quy trình xử lý hình ảnh tùy chỉnh:

1. Hình ảnh gốc được lưu dưới định dạng AVIF ở kích thước 512px.
2. Chỉnh sửa sẵn trước hai biến thể: 128px (khoảng 6KB) và 256px (khoảng 13KB).
3. Phục vụ qua tên miền phụ nginx chuyên dụng (img.sonsaur.com).
4. Sử dụng thành phần hình ảnh Zero-JavaScript (thẻ <img> thuần túy để loại bỏ chi phí hydrat hóa).

Kết quả: Chúng tôi đã giảm được 84% dung lượng hình ảnh cho các thẻ game.

Dịch thuật 8.000 tựa game sang 38 ngôn ngữ

Đây là thách thức thú vị nhất. Chúng tôi không chỉ cần dịch giao diện người dùng (UI) — việc này khá đơn giản với next-intl — mà còn phải dịch nội dung chuyên biệt cho từng game: mô tả, hướng dẫn chơi, mẹo và câu hỏi thường gặp.

Cách tiếp cận của chúng tôi:

• Phân bổ 60 khóa API Gemini trên nhiều dự án khác nhau.
• Tác vụ cron chạy mỗi 2 phút, xử lý 60 game trong mỗi lô (mỗi game dùng một khóa).
• Xử lý tuần tự để ngăn chặn lỗi dòng chảy (streaming crashes) trong Node.js.
• Cơ chế làm mát khóa trong 2 phút và tạm dừng 10 phút khi tất cả các khóa đều hết lượt.
• Giới hạn tốc độ Tier 1: 1.500 yêu cầu mỗi ngày cho mỗi khóa trên mỗi dự án.

Với công suất tối đa, chúng tôi có thể dịch khoảng 43.200 trang game mỗi ngày trên tất cả các ngôn ngữ.

Kết quả hiệu năng

Nhờ tối ưu hóa, hệ thống đã đạt được các chỉ số ấn tượng:

• Lighthouse: Hiệu năng 79, Khả năng truy cập 93, Thực hành tốt nhất 100, SEO 100.
• Tải game đầu tiên: Dưới 3 giây.
• Các thao tác điều hướng tiếp theo: Gần như tức thì (nhờ cơ chế prefetching của Next.js).
• CDN hình ảnh: Thumbnail 128px trung bình chỉ 6KB (so với 34KB của bản gốc).

Kế hoạch tiếp theo

Chúng tôi đang phát triển ứng dụng riêng cho Android và iOS, hoàn thành việc dịch thuật đầy đủ cho tất cả 38 ngôn ngữ và liên tục thêm các tựa game mới vào thư viện.

Bạn có thể trải nghiệm tại: sonsaur.com

Chúng tôi rất sẵn lòng giải đáp thắc mắc về bất kỳ phần nào của hệ thống này. Sự kết hợp giữa Next.js + Neon PostgreSQL + CDN hình ảnh tùy chỉnh đã mang lại hiệu quả tuyệt vời cho trường hợp sử dụng này.