Quốc tế hóa
Thêm hỗ trợ đa ngôn ngữ cho ứng dụng của bạn. Sử dụng Proyecta Content API để bản địa hóa nội dung biên tập, hoặc yêu cầu AI tích hợp trực tiếp một i18n framework vào code.
Proyecta hỗ trợ hai cách tiếp cận bổ sung cho nhau để quốc tế hóa các ứng dụng bạn xây dựng:
- Bản địa hóa nội dung qua Proyecta Content API — dành cho nội dung biên tập (bài viết blog, FAQ, nội dung marketing) cần được dịch sang nhiều ngôn ngữ
- i18n ở tầng code thông qua một translation framework — dành cho các chuỗi giao diện, ngày tháng, tiền tệ và chuyển đổi ngôn ngữ trong runtime
Cả hai đều hoạt động ngay hôm nay. Bạn cần dùng cách nào phụ thuộc vào thứ bạn muốn dịch.
Bản thân Proyecta được xây dựng với 24 locale, nên sản phẩm rất thành thạo về i18n. Những pattern tương tự áp dụng cho các ứng dụng bạn xây dựng bên trong nó.
Tùy chọn 1: Bản địa hóa nội dung (Proyecta Content API)
Phần tiêu đề “Tùy chọn 1: Bản địa hóa nội dung (Proyecta Content API)”Nếu bạn đang xây dựng một trang web nặng về nội dung — blog, knowledge base, trang marketing, danh mục sản phẩm — hãy sử dụng tính năng hỗ trợ locale tích hợp sẵn của Content API.
// Create the locales you supportawait proyecta.content.locales.create({ /* code: 'en', name: 'English' */});await proyecta.content.locales.create({ /* code: 'es', name: 'Español' */});await proyecta.content.locales.create({ /* code: 'fr', name: 'Français' */});
// Then create entries that exist in multiple locales — fetch the right// translation per request based on the user's locale.Đây là lựa chọn phù hợp khi:
- Các biên tập viên không biết lập trình cần dịch nội dung
- Bạn muốn các bản dịch có thể quản lý phiên bản
- Bạn cần xuất bản theo từng locale cụ thể (tính năng lên lịch xuất bản sắp ra mắt — hiện tại các entry cần được xuất bản thủ công qua API)
Xem Quản lý Nội dung để tìm hiểu đầy đủ về Content API.
Tùy chọn 2: i18n framework ở tầng code
Phần tiêu đề “Tùy chọn 2: i18n framework ở tầng code”Đối với các chuỗi giao diện — nhãn, nút bấm, thông báo lỗi, ngày tháng, tiền tệ — hãy yêu cầu AI tích hợp trực tiếp một i18n framework vào dự án của bạn:
Add internationalization to my app.Support English, Spanish, French, and Arabic.Add message catalogs in src/locales/.Add a language switcher in the header.Use locale-prefixed URLs like /en/about and /es/about.Make sure RTL layout works correctly for Arabic.AI sẽ:
- Chọn framework — AI sử dụng
i18nextkết hợpreact-i18next(tiêu chuẩn của Proyecta) - Tạo các catalog file trong
src/locales/(một file JSON cho mỗi ngôn ngữ) - Bọc văn bản trong các lệnh gọi
t()(từ hookuseTranslationcủa react-i18next) - Thêm component chuyển đổi ngôn ngữ
- Cấu hình URL routing với các tiền tố locale
- Xử lý layout RTL (
dir="rtl") cho tiếng Ả Rập, tiếng Do Thái, v.v. - Định dạng số, ngày tháng và tiền tệ theo từng locale
Tự động dịch với AI
Phần tiêu đề “Tự động dịch với AI”Sau khi ngôn ngữ cơ sở của bạn đã sẵn sàng, AI rất giỏi trong việc tạo ra các catalog file cho các ngôn ngữ còn lại:
"Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names.""My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."
Đối với nội dung quan trọng (văn bản pháp lý, y tế, tài chính), hãy để một dịch giả chuyên nghiệp kiểm tra lại kết quả của AI trước khi đưa vào sản xuất.
Kết hợp cả hai cách tiếp cận
Phần tiêu đề “Kết hợp cả hai cách tiếp cận”Hầu hết các ứng dụng thực tế đều dùng cả hai: i18n ở tầng code cho phần giao diện (nút bấm, lỗi, điều hướng), và Content API cho nội dung biên tập (bài viết, mô tả sản phẩm). Hai cách này hoạt động cùng nhau một cách mượt mà — i18n framework của bạn xử lý các catalog file lúc build time, còn Content API phục vụ các entry đã được bản địa hóa lúc runtime.
Các thực hành tốt nhất
Phần tiêu đề “Các thực hành tốt nhất”- Chọn ngôn ngữ cơ sở và hoàn thiện nội dung trước. Dịch một bản văn đang thay đổi liên tục rất mất công.
- Dịch theo lô. Đừng dịch từng phần khi đang phát triển — hãy chờ cho đến khi tính năng ổn định.
- Kiểm tra RTL sớm nếu bạn hỗ trợ tiếng Ả Rập hoặc tiếng Do Thái. Lỗi RTL thường không lộ ra cho đến khi bạn thực sự nhìn vào.
- Thêm
langvàdirvào<html>. Trình duyệt và screen reader đều phụ thuộc vào điều này. - Dùng
Intlđể định dạng. Đừng tự viết code định dạng ngày tháng hay tiền tệ — hãy dùngIntl.DateTimeFormat,Intl.NumberFormat.
Sắp ra mắt
Phần tiêu đề “Sắp ra mắt”- Giao diện quản lý locale ngay trong builder — chọn locale, xem mức độ bao phủ bản dịch, chỉnh sửa catalog mà không cần rời khỏi Proyecta
- Tự động dịch khi lưu cho các chuỗi mới
- Các template dự án i18n-ready với framework đã được cấu hình sẵn