Chuyển tới nội dung
ThemeStack

Vì sao mọi sản phẩm của chúng tôi đều song ngữ ngay từ đầu

Thêm i18n về sau sẽ chạm tới mọi component bạn có. Làm ngay từ đầu chỉ tốn một buổi chiều.

HN

Hieu Nguyen

Founder & lead engineer

Đăng ngày · Đọc 6 phút

Vì sao mọi sản phẩm của chúng tôi đều song ngữ ngay từ đầu

Thêm ngôn ngữ thứ hai vào một sản phẩm đã hoàn thiện là một trong những lần refactor tốn kém nhất trong công việc front-end, vì mỗi chuỗi cứng là một lần sửa riêng và mọi giả định về bố cục đều sẽ hỏng ở đâu đó.

Chi phí không nằm ở việc dịch

Nó nằm ở phần hạ tầng. Route có tiền tố ngôn ngữ. Bộ tải từ điển không gửi cả hai ngôn ngữ xuống trình duyệt. Các cặp hreflang giữ được tính hai chiều. Định dạng ngày, số và tiền tệ theo từng ngôn ngữ. Đoạn chữ dài thêm 30% và làm vỡ một cái nút. Không phần nào trong số đó rẻ hơn nếu bạn chờ.

Chúng tôi làm gì thay vào đó

Mọi sản phẩm đều bắt đầu với một segment [lang] nằm trên root layout. Trong Next.js 16, segment đó trở thành một root parameter, nên mọi server component đều đọc được ngôn ngữ hiện tại qua next/root-params mà không cần truyền props qua nhiều lớp — kể cả các tiện ích ở tầng sâu và các hàm được cache.

Từ điển là các object TypeScript có kiểu dữ liệu, không phải JSON. Tiếng Anh định nghĩa cấu trúc; mọi ngôn ngữ khác được kiểm tra kiểu theo nó. Thiếu một khóa là lỗi build, không phải một khoảng trống mà khách hàng phát hiện trước bạn.

Thiết kế cho ngôn ngữ dài nhất

Tiếng Việt thường dài hơn tiếng Anh với cùng một câu, và tiếng Đức còn dài hơn nữa. Nút bị xuống dòng. Mục menu chồng lên nhau. Thiết kế theo chuỗi dài nhất nghĩa là bạn không phải dựng lại header chỉ vì một bản dịch.

Nửa còn lại là SEO

Một URL canonical cho mỗi ngôn ngữ, một map alternates.languages hai chiều, thẻ x-default, và cả hai ngôn ngữ đều có trong sitemap. Làm đúng cách, ngôn ngữ thứ hai không phải là rủi ro trùng lặp nội dung — nó là một bộ từ khóa thứ hai với gần như không thêm công sức nào.

  • i18n
  • internationalization
  • hreflang
  • nextjs i18n
  • root params
Về trang bài viết

Đọc tiếp