Làm thế nào để mỗi bài viết trong Next.js có ảnh chia sẻ (OG image) riêng, và cần chú ý gì khi tiêu đề dài hoặc có dấu tiếng Việt?

Người phỏng vấn muốn biết bạn hiểu cơ chế tạo ảnh bằng code của Next.js và biết những chỗ hay sai khi đưa nó vào một blog thật.

Trong App Router, bạn đặt một file opengraph-image.tsx cạnh trang bài viết, export một hàm mặc định trả về ImageResponse (từ next/og) và có thể export thêm alt, size, contentType. Next.js tự thêm các thẻ og:image vào <head>. Với route động như [slug], hàm nhận params, mà từ Next.js 16 là một Promise nên phải await. Theo tài liệu, ảnh được tạo lúc build và lưu lại trừ khi bạn dùng dữ liệu hay API chỉ có ở lúc yêu cầu, nên không phải vẽ lại cho từng người xem.

Những chỗ cần chú ý: ImageResponse chỉ hỗ trợ flexbox và một phần CSS (không có display: grid), font phải là ttf, otf hoặc woff, và có giới hạn kích thước gói 500 KB tính cả JSX, CSS, font lẫn ảnh. Font mặc định chỉ có một độ đậm, nên muốn tiêu đề đậm và có nhận diện riêng thì phải nhúng font và đọc nó một lần ở cấp module. Về dấu tiếng Việt, đừng đoán mà hãy thử với một tiêu đề có nhiều dấu chồng, rồi mở ảnh ra xem.

Với tiêu đề dài, cỡ chữ cố định sẽ làm chữ tràn khỏi ảnh hoặc đè lên phần chân. Cách đơn giản là giảm cỡ chữ theo độ dài tiêu đề, và thử với một tiêu đề dài bất thường chứ không chỉ tiêu đề đẹp.

Điểm cộng: nhắc rằng Facebook thường giữ bản xem trước đã lấy, nên sau khi đổi ảnh cần dùng công cụ Sharing Debugger để lấy lại, và nhắc việc kiểm tra kích thước, dung lượng bằng test.