Cách thêm nhiều ngôn ngữ vào ứng dụng hoặc website

Để thêm nhiều ngôn ngữ vào một ứng dụng, hãy chuyển toàn bộ chữ trên giao diện vào các file dịch (mỗi ngôn ngữ một file), tải chúng bằng một thư viện i18n, và thêm bộ chuyển ngôn ngữ có ghi nhớ lựa chọn của người dùng. Với các trang công khai cần được tìm thấy trên công cụ tìm kiếm, hãy cấp cho mỗi ngôn ngữ một URL riêng như /fr/ và liên kết các phiên bản bằng thẻ hreflang. Sau đó xử lý những phần hay bị quên: ngày tháng, số và tiền tệ, văn bản dài hơn ở một số ngôn ngữ, chữ viết từ phải sang trái, và nội dung lưu trong cơ sở dữ liệu.

Những thuật ngữ bạn sẽ gặp

• Internationalisation (i18n): chuẩn bị mã nguồn để hỗ trợ mọi ngôn ngữ — không viết cứng chuỗi ký tự, định dạng theo vùng, bố cục linh hoạt. Số "18" là số chữ cái nằm giữa i và n.
• Localisation (l10n): điều chỉnh ứng dụng cho một ngôn ngữ hoặc thị trường cụ thể, chủ yếu là dịch thuật, đôi khi còn gồm tiền tệ, hình ảnh và văn bản pháp lý.
• Locale: một ngôn ngữ và tùy chọn thêm một vùng, ví dụ en-GB hoặc pt-BR.

Làm i18n một lần, và việc thêm mỗi ngôn ngữ mới chủ yếu chỉ còn là công việc dịch.

Các lựa chọn và đánh đổi

Với đa số ứng dụng, một thư viện i18n tiêu chuẩn kèm file dịch là nền tảng phù hợp. Có thể tạo bản nháp bằng dịch máy hoặc AI, sau đó nhờ người bản ngữ rà soát những nội dung khách hàng nhìn thấy nhiều nhất.

Các phần của một ứng dụng đa ngôn ngữ

File dịch

Thay vì <h1>Welcome back</h1>, code viết t('dashboard.welcome'), và mỗi locale có một file chứa nội dung chữ:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

Hãy dùng placeholder cho biến thay vì ghép các mảnh câu, vì trật tự từ khác nhau giữa các ngôn ngữ. Và dùng quy tắc số nhiều của thư viện: tiếng Anh có hai dạng (1 item, 2 items), nhưng một số ngôn ngữ có ba, bốn hoặc nhiều dạng hơn.

Định dạng ngày, số và tiền

Đừng tự định dạng những thứ này bằng tay. API Intl có sẵn trong trình duyệt định dạng theo mọi locale: 1,234.5 trong tiếng Anh là 1.234,5 trong tiếng Đức; ngày chuyển giữa kiểu ngày-trước và tháng-trước; ký hiệu tiền tệ đổi vị trí. Hãy lưu ngày ở UTC và tiền dưới dạng số kèm mã tiền tệ, và chỉ định dạng khi hiển thị.

Bố cục phải co giãn được

Bản dịch thường dài hơn tiếng Anh — đặc biệt là tiếng Đức và tiếng Phần Lan. Tránh nút có chiều rộng cố định và nhãn bị cắt, và kiểm tra với ngôn ngữ dài nhất của bạn.

Ngôn ngữ viết từ phải sang trái

Tiếng Ả Rập, tiếng Do Thái, tiếng Ba Tư và tiếng Urdu được viết từ phải sang trái. Hãy đặt dir="rtl" cho trang với các locale đó và dùng thuộc tính logic của CSS (margin-inline-start thay vì margin-left; trong Tailwind là ms-4 thay vì ml-4) để bố cục tự đảo chiều. Các biểu tượng mang hướng, như mũi tên, cũng cần được lật lại.

Bộ chuyển ngôn ngữ và nhận diện

Hiển thị bộ chuyển ngôn ngữ trên mọi trang, ghi tên của từng ngôn ngữ bằng chính ngôn ngữ đó ("Deutsch", "Français", "العربية") thay vì dùng cờ — cờ đại diện cho quốc gia, không phải ngôn ngữ. Khi khách truy cập lần đầu, có thể nhận diện ngôn ngữ ưa thích của trình duyệt để gợi ý một phiên bản, nhưng lựa chọn rõ ràng của khách phải được ưu tiên và ghi nhớ.

URL và SEO

Với các trang muốn xuất hiện trên kết quả tìm kiếm, mỗi ngôn ngữ cần có một URL riêng. Tính đến tháng 9 năm 2026, hướng dẫn của Google cho website đa ngôn ngữ là:

• URL riêng cho từng ngôn ngữ — thư mục con (example.com/fr/) là cách đơn giản nhất; subdomain và tên miền theo quốc gia cũng dùng được. Tham số URL (?lang=fr) không được khuyến nghị.
• Đừng chỉ đổi ngôn ngữ bằng cookie hoặc cài đặt trình duyệt; trình thu thập của Google có thể không bao giờ thấy các phiên bản khác.
• Đừng tự động chuyển hướng theo ngôn ngữ; thay vào đó hãy liên kết giữa các phiên bản.
• Dùng hreflang để cho Google biết trang nào là bản dịch của trang nào. Mỗi phiên bản phải tự liệt kê chính nó và tất cả các phiên bản khác, nếu không các chú thích có thể bị bỏ qua. Thêm x-default cho trang dự phòng.
• Google xác định ngôn ngữ của trang dựa trên nội dung hiển thị, không dựa vào lang hay hreflang — vì vậy hãy dịch toàn bộ trang, không chỉ phần menu.

Vẫn nên đặt <html lang="fr"> cho mỗi phiên bản: trình đọc màn hình dùng thuộc tính này để chọn cách phát âm đúng, và đây là một yêu cầu về khả năng truy cập.

Các màn hình ứng dụng sau khi đăng nhập không cần được lập chỉ mục, nên với những màn hình này, lưu ngôn ngữ vào hồ sơ người dùng là đủ. Xem SEO cho website xây bằng AI để biết cách giúp các trang công khai được thu thập ngay từ đầu.

Nội dung trong cơ sở dữ liệu

Chữ trên giao diện nằm trong file; nội dung như tên sản phẩm, bài blog và danh mục nằm trong cơ sở dữ liệu. Có hai mẫu thường dùng:

• Bảng bản dịch: product_translations (product_id, locale, name, description). Gọn gàng và mở rộng tốt cho nhiều ngôn ngữ.
• Một cột JSON cho mỗi trường: name: {"en": "...", "fr": "..."}. Đơn giản hơn khi chỉ có vài ngôn ngữ.

Hãy quyết định trước điều gì xảy ra khi thiếu bản dịch — thường là quay về ngôn ngữ mặc định thay vì hiển thị khoảng trống.

Email và thông báo

Lưu ngôn ngữ của từng người dùng và dùng nó cho cả email, thông báo và PDF. Rất dễ dịch ứng dụng nhưng quên rằng email chào mừng vẫn đến bằng tiếng Anh.

Các prompt hiệu quả

Thêm internationalisation bằng react-i18next. Chuyển mọi chuỗi người dùng nhìn thấy vào locales/en.json với các khóa có namespace, dùng interpolation và quy tắc số nhiều thay vì nối chuỗi, và định dạng ngày, số và giá bằng Intl theo locale hiện tại. Chưa thay đổi nội dung chữ nào.

Thêm tiếng Pháp và tiếng Đức. Các trang marketing công khai dùng tiền tố URL /fr/ và /de/, tiếng Anh ở gốc, có liên kết hreflang trên mọi trang (bao gồm tự tham chiếu và x-default), và đặt html lang cho từng trang. Thêm bộ chuyển ngôn ngữ hiển thị tên gốc của mỗi ngôn ngữ. Với các trang sau khi đăng nhập, lưu ngôn ngữ vào hồ sơ người dùng.

Thêm tiếng Ả Rập với hỗ trợ từ phải sang trái: đặt dir="rtl" cho tiếng Ả Rập, thay lề và padding trái/phải bằng thuộc tính logic, lật các biểu tượng mang hướng, và kiểm tra biểu mẫu và bảng vẫn đọc đúng.

Từng bước

1. Chọn ngôn ngữ bổ sung đầu tiên dựa trên nhu cầu thực — nơi khách truy cập hoặc khách hàng của bạn đang ở.
2. Làm i18n cho mã nguồn: chuyển chuỗi vào file, thêm số nhiều và định dạng Intl. Phát hành chỉ với tiếng Anh và kiểm tra rằng không có gì thay đổi.
3. Quyết định cấu trúc URL cho các trang công khai và thêm hreflang.
4. Dịch: tạo bản nháp bằng dịch máy hoặc AI, sau đó nhờ người bản ngữ rà soát. Cung cấp ngữ cảnh cho người dịch — một từ như "Book" có thể là danh từ ở màn hình này và là động từ ở màn hình khác.
5. Dịch nội dung trong cơ sở dữ liệu và đặt phương án dự phòng.
6. Bản địa hóa phần còn lại: email, thông báo lỗi, trang pháp lý, hình ảnh có chữ bên trong.
7. Kiểm tra từng ngôn ngữ ở chiều rộng điện thoại, và với chế độ từ phải sang trái nếu cần.
8. Thiết lập quy trình để các tính năng mới được phát hành cùng bản dịch, không phải nhiều tháng sau.

Những lỗi thường gặp

• Ghép nối câu ("You have " + n + " messages"), điều này sẽ vỡ ở ngôn ngữ khác.
• Còn sót chữ viết cứng trong component, thông báo lỗi và chuỗi kiểm tra dữ liệu.
• Tự định dạng ngày và giá.
• Dùng cờ để đại diện cho ngôn ngữ, và tự động chuyển hướng khiến người dùng bị kẹt trong phiên bản sai.
• Một URL cho mọi ngôn ngữ ở những trang muốn được lập chỉ mục.
• Thiếu liên kết hreflang qua lại, khiến Google bỏ qua các chú thích.
• Dịch giao diện nhưng không dịch nội dung, hoặc ngược lại.
• Dịch máy chưa được rà soát trên các trang giá, pháp lý và thanh toán.

Danh sách kiểm tra đa ngôn ngữ

• Không còn chuỗi người dùng nhìn thấy viết cứng; đã dùng quy tắc số nhiều và placeholder
• Ngày, số và tiền được định dạng bằng Intl
• Có bộ chuyển ngôn ngữ với tên gốc trên mọi trang; lựa chọn được ghi nhớ
• URL riêng cho từng ngôn ngữ ở các trang công khai; không có chuyển hướng bắt buộc
• hreflang trên mọi phiên bản, bao gồm tự tham chiếu và x-default
• html lang (và dir="rtl" khi cần) được đặt cho từng trang
• Nội dung cơ sở dữ liệu đã được dịch, với phương án dự phòng hợp lý
• Email và thông báo được gửi bằng ngôn ngữ của người dùng
• Nội dung dành cho khách hàng đã được người bản ngữ rà soát

Nhiều ngôn ngữ trên Mythex

Trên Mythex, bạn thêm ngôn ngữ bằng cách yêu cầu trong chat — không có bảng dịch riêng — nên các prompt ở trên dùng được đúng như đã viết. Hãy làm bước internationalisation trước và kiểm tra trong Preview trước khi thêm ngôn ngữ; đây là một đợt refactor lớn, và một checkpoint trong chat cho bạn một điểm để quay lại nếu có gì hỏng (chat và checkpoint). Nếu bạn muốn ứng dụng tự động dịch nội dung bằng AI hoặc API dịch, điều đó dùng API key riêng của bạn, được lưu trong cài đặt dự án (biến môi trường và secret); cách dùng LLM API giải thích về chi phí. Hãy publish lại khi các ngôn ngữ mới đã sẵn sàng.

Câu hỏi thường gặp