Đạt được sự quốc tế hóa (i18n) đúng cách với Remix và CMS không đầu

[theanh]

Bài viết này nhận được sự hỗ trợ nhiệt tình từ những người bạn thân mến của chúng tôi tại Storyblok, một CMS không giao diện thân thiện với trình chỉnh sửa trực quan, các thành phần lồng nhau và các khối nội dung có thể tùy chỉnh cho các trang web và ứng dụng. Cảm ơn bạn!



Rào cản ngôn ngữ còn tồn tại đến mức nào ở thế kỷ 21? Bạn, với tư cách là người đọc, có lẽ rất quen thuộc với tiếng Anh, nhưng những người khác thì sao?

Ngày nay, hầu hết chúng ta thường nghe về tầm quan trọng của khả năng truy cập, hiệu suất tốt hơn và UX hoặc DX tốt hơn. Bạn có thể không nghe hoặc không thường thấy về i18n khi so sánh với các chủ đề này. Nhưng nếu bạn xem các sự kiện và con số từ số liệu thống kê, bạn có thể tìm thấy một số kết quả đáng ngạc nhiên về i18n và tác động của nó. Chúng ta hãy cùng nhau tìm hiểu về điều đó.

i18n và l10n​

Trước khi chúng ta tìm hiểu về tác động của i18n, chúng ta hãy tìm hiểu sự khác biệt giữa hai thuật ngữ.

• i18n
  i18n là viết tắt của quốc tế hóa. Giữa ký tự đầu tiên, "i" và ký tự cuối cùng, "n" của từ này, có 18 ký tự. i18n mô tả việc triển khai các cấu trúc và tính năng để ứng dụng của bạn sẵn sàng bản địa hóa nội dung.
• l10n
  l10n là viết tắt của bản địa hóa. Giữa ký tự đầu tiên, "l" và ký tự cuối cùng, "n" của từ này, có mười ký tự. l10n có nghĩa là dịch nội dung sang ngôn ngữ cho người dùng đang truy cập từ các khu vực cụ thể.

Tiếp theo, i18n chứa một quy trình theo chương trình để triển khai các tính năng cho biên tập viên nội dung và biên dịch viên để có thể bắt đầu quy trình l10n từ UI.

Tại sao i18n lại quan trọng đến vậy?​

Để thấy được tầm quan trọng của i18n, chúng ta hãy xem xét các con số và số liệu thống kê để có thông tin khách quan. Bạn sẽ thấy các con số của một số sự kiện bên dưới và trước khi đọc thêm, hãy cùng đoán xem những con số đó tượng trưng cho điều gì.

• 5,07 tỷ
• 25,9%
• 74,1%
• Trung Quốc
• Châu Á

Sự kiện đầu tiên cho thấy một lượng lớn các con số. 5,07 tỷ là số lượng người dùng trên thế giới vào năm 2020. Dân số thế giới vào năm 2021 là 7,837 tỷ, gần 8 tỷ. Hơn một nửa dân số thế giới có quyền truy cập vào nội dung trên internet và các ứng dụng.

Dựa trên số lượng người dùng trên thế giới, có một nghiên cứu khác về các ngôn ngữ phổ biến nhất được sử dụng trên internet. Khi nhìn vào biểu đồ, hầu hết chúng ta đều chú ý đến con số cao nhất trên sơ đồ này: 25,9%, tiếng Anh.



Con số cao thứ hai là các ngôn ngữ còn lại, 23,1%. Ngoài ra, giả sử bạn thu thập phần trăm còn lại ngoại trừ tiếng Anh. Trong trường hợp đó, bạn có thể nhận ra rằng trong số hơn 5 tỷ người dùng, 74,1% người dùng đang truy cập nội dung bằng bất kỳ ngôn ngữ nào khác.

Sau khi xem xét những sự kiện này, giờ chúng ta có thể nói về lý do tại sao việc quốc tế hóa và bản địa hóa nội dung của bạn cho Châu Á và Trung Quốc nói riêng lại rất quan trọng. Trung Quốc có nhiều người dùng internet nhất trên toàn thế giới. Do đó, hơn một nửa số người dùng internet trên toàn cầu đến từ Châu Á.

Dựa trên những gì chúng ta thấy, có lẽ, chúng ta không thể bỏ qua việc bản địa hóa nội dung. Nó sẽ cải thiện UX nếu lượng người dùng khổng lồ này trên toàn thế giới có thể bản địa hóa nội dung. Sau khi biết được tác động tiềm tàng của i18n thích hợp, chúng ta hãy xem xét logic cơ bản.

Cách i18n hoạt động ở cấp độ cơ bản​

Bất kể công nghệ nào để triển khai i18n, có ba cách để xác định ngôn ngữ và khu vực.

1. Vị trí của địa chỉ IP
2. Accept-Language header/Navigator.languages
3. Định danh trong URL

Sử dụng địa chỉ IP sẽ phát hiện khu vực của người dùng và cho phép họ truy cập nội dung bằng ngôn ngữ khu vực của họ. Tuy nhiên, địa chỉ IP của người dùng không nhất thiết phải khớp với tùy chọn ngôn ngữ của họ. Hơn nữa, phân tích vị trí ngăn không cho các công cụ tìm kiếm thu thập dữ liệu các trang web.

Sử dụng tiêu đề Accept-Language hoặc Navigator.languages là một cách tiếp cận khả thi khác để triển khai i18n. Tuy nhiên, cách tiếp cận này cung cấp thông tin ngôn ngữ nhưng không cung cấp thông tin khu vực.

i18n không chỉ là bản địa hóa nội dung. Nó bao gồm cả việc cải thiện UX. Ví dụ, việc tạo mã định danh trong URL giúp tăng cường UX. Nó cũng giúp phân chia nội dung bản địa hóa vào hệ thống chuyên dụng. Chúng tôi sẽ đề cập đến cách triển khai hệ thống như vậy trong phần “Sự kết hợp giữa Remix và CMS”.

Thông thường, các định danh trong URL tồn tại theo ba mẫu khác nhau:

1. Phân biệt theo tên miền (tức là hello.es, hello.jp)
2. Tham số URL (tức là hello.com?loc=de)
3. Các thư mục con được bản địa hóa (tức là hello.com/es, hello.com/ja)

Để tuân thủ chính sách cùng nguồn gốc nhằm cải thiện SEO, có thể sử dụng các thư mục con được bản địa hóa.

Dựa trên các sự kiện thú vị và logic cơ bản để triển khai i18n, chúng tôi sẽ nói về các khuôn khổ và thư viện, như một số trong số chúng sử dụng thư viện i18n.

Thư viện​

Để không phải phát minh lại bánh xe bất cứ khi nào chúng ta muốn triển khai i18n vào các dự án của mình, các nhà phát triển có các thư viện, công cụ và dịch vụ khác nhau có thể được sử dụng để tạo điều kiện thuận lợi cho công việc. Nếu chúng ta đang làm việc với React hoặc các khuôn khổ dựa trên React, chúng ta có các tùy chọn khác nhau. Hãy cùng nói về một số trong số chúng.

Format.js​

Format.js là một tập hợp các thư viện JavaScript dạng mô-đun mà chúng ta có thể sử dụng để triển khai logic i18n ở cả máy khách và máy chủ. Nhóm thư viện này tập trung vào việc định dạng số, ngày và chuỗi. Nó cung cấp các chức năng và công cụ khác nhau và chạy trong trình duyệt cũng như trong thời gian chạy Node.js. Nó tích hợp với nhiều khuôn khổ khác nhau, như Vue và React, để chúng ta có thể sử dụng các chức năng của nó trên các dự án Remix của mình. Bạn có thể đọc thêm về nó trên tài liệu chính thức của React Intl.

i18next​

Một giải pháp thay thế khác mà chúng ta có thể đánh giá cho dự án của mình là i18next. Thư viện JavaScript này vượt xa các tính năng i18n tiêu chuẩn, cung cấp toàn bộ bộ công cụ để quản lý i18n trong các dự án của chúng ta. Chúng ta có thể phát hiện ngôn ngữ của người dùng, bản dịch bộ nhớ đệm và thậm chí cài đặt plugin và tiện ích mở rộng. Vì được xây dựng bằng JavaScript, chúng ta có thể sử dụng công cụ này cho các trang web cũng như cho các ứng dụng di động và máy tính để bàn.

Remix thì sao?​

Khi tạo trang web bằng Remix, chúng ta có nhiều tùy chọn khác nhau để cân nhắc. Vì đây là một khuôn khổ dựa trên React, chúng ta có thể sử dụng bất kỳ thư viện nào đã đề cập trước đó. Tuy nhiên, chúng ta sẽ xem xét hai cách tiếp cận có thể phù hợp hơn với các dự án Remix của bạn. Đầu tiên, chúng ta sẽ xem cách bản địa hóa nội dung bằng cách sử dụng remix-i18next, một thư viện dành riêng cho Remix dành cho i18n. Thứ hai, chúng ta sẽ sử dụng hệ thống quản lý nội dung không có giao diện làm nguồn ngôn ngữ/ngôn ngữ khác nhau của nội dung.

remix-i18next​

Dựa trên i18next, Sergio Xalambrí, một trong những người đóng góp chính cho Remix, đã tạo ra remix-i18next. Thư viện này cung cấp các tính năng và mô-đun tương tự như thư viện JavaScript nhưng tập trung vào các khái niệm và cách tiếp cận của Remix. Dễ thiết lập và sử dụng, sẵn sàng cho sản xuất và không có bất kỳ yêu cầu hoặc phụ thuộc nào. Hãy cùng xem xét kỹ hơn cách triển khai i18n vào các dự án Remix của chúng ta bằng cách sử dụng remix-i18next.

Trước hết, chúng ta cần cài đặt một số gói npm:

npm install remix-i18next i18next react-i18next i18next-browser-languagedetector i18next-http-backend i18next-fs-backend

Tất cả các gói này sẽ giúp chúng ta quản lý i18n trên cả máy chủ và phía máy khách của trang web. Chúng ta cũng sẽ sử dụng chúng để thiết lập phần phụ trợ và xác định logic sẽ phát hiện ngôn ngữ từ người dùng.

Bây giờ, chúng ta nên thêm một số cấu hình sẽ được sử dụng trên toàn bộ trang web từ cả phía máy khách và phía máy chủ. Hãy tạo một vài tệp JSON với bản dịch của các chuỗi ký tự khác nhau mà chúng ta sẽ sử dụng trên trang web của mình:

{ "intro": "Xin chào mọi người!"}

{ "intro": "Hola a todos!"}

Bằng cách đặt tên cho các tệp là "common.json", chúng ta đang định nghĩa không gian tên cho các chuỗi mà chúng ta sẽ liệt kê trong đó.

Bây giờ, hãy tạo một tệp có tên là i18n.js. Tệp này chứa các thiết lập cấu hình khác nhau mà chúng ta sẽ sử dụng tại thời điểm khởi tạo máy chủ i18n của mình.

export default { supportedLngs: ["en", "es"], fallbackLng: "en", defaultNS: "common", // Nên tắt chế độ tạm dừng react: { useSuspense: false },};

Bạn có thể xem thêm các tùy chọn cấu hình trong tài liệu chính thức của i18next.

Bây giờ, hãy tạo tệp i18next.server.js, tệp này chứa logic sẽ được sử dụng trong tệp entry.server.jsx của dự án Remix của chúng ta.

import Backend from "i18next-fs-backend"; import { resolve } from "node:path"; import { RemixI18Next } from "remix-i18next"; import i18n from "~/i18n"; // Tệp cấu hình chúng ta đã tạo let i18next = new RemixI18Next({ detection: { supportedLanguages: i18n.supportedLngs, fallbackLanguage: i18n.fallbackLng, }, i18next: { ...i18n, backend: { loadPath: resolve('./public/locales/{{lng}}/{{ns}}.json'), }, }, backend: Backend, }); export default i18next;

Về cơ bản, chúng ta đang khởi tạo một máy chủ i18n mới sẽ chạy với phần phụ trợ Remix của chúng ta. Chúng ta đang chỉ định vị trí của các tệp JSON chứa bản dịch sẽ được sử dụng.Hãy thêm các tính năng này vào các tệp cấu hình Remix chính của chúng ta. Đầu tiên, chúng ta thêm một số logic để có thể dịch nội dung ở phía máy khách. Để thực hiện điều đó, hãy chỉnh sửa tệp `entry.client.jsx` của chúng ta:

import i18next from "i18next";import LanguageDetector from "i18next-browser-languagedetector";import Backend from "i18next-http-backend";import { I18nextProvider, initReactI18next } from "react-i18next";import { getInitialNamespaces } from "remix-i18next";nhập i18n từ "./i18n"; // Tệp cấu hình chúng tôi đã tạoi18next .use(initReactI18next) .use(LanguageDetector) .use(Backend) .init({ ...i18n, // Cấu hình tương tự chúng tôi đã tạo cho máy chủ ns: getInitialNamespaces(), backend: { loadPath: "/locales/{{lng}}/{{ns}}.json", }, detection: { order: ["htmlTag"], caches: [], }, }) .then(() => { // Sau khi i18next init, hydrate ứng dụng hydrateRoot( document, // Bọc RemixBrowser trong I18nextProvider    ); });

Chúng ta cần đợi để đảm bảo bản dịch được tải trước khi hydrat hóa để giữ cho ứng dụng web của chúng ta tương tác.

Bây giờ, hãy thêm logic vào tệp entry.server.jsx:

import { createInstance } from "i18next";import Backend from "i18next-fs-backend";import { resolve } from "node:path";import { I18nextProvider, initReactI18next } from "react-i18next";import i18next from "./i18next.server"; // Tệp backend mà chúng ta đã tạoimport i18n from "./i18n"; // Tệp cấu hình chúng ta đã tạo...export default async function handleRequest(...) { // Chúng ta tạo một phiên bản mới của i18next let instance = createInstance(); // Chúng ta có thể phát hiện ngôn ngữ cụ thể từ mỗi yêu cầu let lng = await i18next.getLocale(request); // Các không gian tên mà các tuyến sắp kết xuất muốn sử dụng let ns = i18next.getRouteNamespaces(remixContext); await instance .use(initReactI18next) .use(Backend) .init({ ...i18n,// Cấu hình chúng ta đã tạo lng, // Ngôn ngữ chúng ta phát hiện từ yêu cầu ns, backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"), }, }); return new Promise((resolve, reject) => { ... let { pipe, abort } = renderToPipeableStream(  {" "} , ... ); ... });}

Việc xác định ngôn ngữ ưa thích của người dùng sẽ cho phép chúng tôi, trong số những thứ khác, chuyển hướng họ đến các tuyến đường nhất định.

Bây giờ chúng ta có thể bắt đầu sử dụng các chức năng do remix-i18next cung cấp để phát hiện ngôn ngữ của người dùng và cung cấp nội dung đã dịch dựa trên ngôn ngữ đó. Hãy chỉnh sửa tệp root.jsx:

...import { json } from "@remix-run/node";import { useChangeLanguage } from "remix-i18next";import { useTranslation } from "react-i18next";import i18next from "~/i18next.server";...export let loader = async ({ request }) => { let locale = await i18next.getLocale(request); return json({ locale });};export let handle = { i18n: "common",};export default function App() { // Lấy ngôn ngữ từ trình tải let { locale } = useLoaderData(); let { i18n } = useTranslation(); useChangeLanguage(locale); return (  ...  );}

Móc useChangeLanguage sẽ thay đổi ngôn ngữ của phiên bản thành ngôn ngữ được trình tải phát hiện. Bất cứ khi nào chúng ta thực hiện hành động nào đó để thay đổi ngôn ngữ, ngôn ngữ này sẽ thay đổi và i18next sẽ tải các bản dịch chính xác.

Bây giờ, chúng ta có thể dịch nội dung theo bất kỳ tuyến đường nào:

import { useTranslation } from "react-i18next";export default function MyPage() { let { t } = useTranslation(); return [HEADING=1]{t("intro")}[/HEADING];}

Chúng ta sử dụng hàm t() để hiển thị các chuỗi đã dịch dựa trên danh sách các thông báo mà chúng ta đã xác định trong các tệp JSON của mình.

Trong ví dụ này, chúng ta sử dụng một không gian tên mặc định, nhưng chúng ta có thể thiết lập nhiều không gian tên nếu muốn. Bạn có thể đọc thêm về hàm t() trong tài liệu chính thức của i18next.

Trong trường hợp chúng ta muốn dịch nội dung ở phía máy chủ, chúng ta có thể sử dụng phương thức getFixedT bên trong trình tải và hành động của mình:

import i18next from "~/i18next.server";...export let loader = async ({ request }) => { let t = await i18next.getFixedT(request); let title = t("intro"); return json({ title });};

Sự kết hợp giữa Remix và CMS​

Chúng ta đã cùng nhau khám phá các tùy chọn có sẵn để triển khai i18n với Remix. Ở phần đầu bài viết này, chúng ta đã biết rằng i18n có thể cải thiện đáng kể UX và SEOUX và SEO. Là một phần của UX, điều quan trọng là phải đưa DX tốt hơn vào.

Cách tiếp cận trên tạo ra các tệp dịch ở cấp độ mã nguồn. Ngoài ra, chúng ta không có logic để triển khai các định danh trong URL. Để đạt được điều này, hãy xem cách tiếp cận tích hợp CMS. Trong bài viết này, chúng ta sẽ sử dụng Storyblok, cung cấp ba cách tiếp cận khác nhau để bản địa hóa nội dung và xử lý để xác định ngôn ngữ và khu vực.

Lưu ý: Nếu bạn muốn tạo kết nối giữa ứng dụng Remix và Storyblok, có hướng dẫn 5 phút giải thích cách thực hiện.

Sau đó, bạn có thể nhanh chóng sao chép không gian khởi động bằng cách sử dụng liên kết ma thuật này để có tất cả các thành phần và loại trường cần thiết. Không gian ví dụ này bao gồm một cách tiếp cận được gọi là dịch cấp thư mục. Chúng tôi sẽ đề cập đến nội dung này trong phần tiếp theo.

Lựa chọn giữa ba phương pháp tiếp cận​

Storyblok có ba cách để tạo bố cục nhằm lưu trữ nội dung bản địa hóa và xác định ngôn ngữ và khu vực.

1. Dịch cấp thư mục: Chia nội dung bản địa hóa thành cấp thư mục.
2. Dịch cấp trường: Dịch ở cấp loại trường.
3. Dịch cấp không gian: Dành không gian (môi trường hoặc kho lưu trữ) vào một số nội dung bản địa hóa nhất định.

Để bao phủ các mã định danh trong URL, dịch cấp thư mục hoạt động hoàn hảo vì mỗi thư mục sẽ chỉ chứa nội dung bản địa hóa có liên quan.



Ngoài ra, các định danh có thể được sửa đổi từ cài đặt thư mục thông qua slug.



Bằng cách sửa đổi slug từ màn hình cài đặt thư mục, mã định danh bản địa hóa này trong URL sẽ xuất hiện trong tất cả các câu chuyện bên trong thư mục tiếng Nhật này. Ví dụ, trang giới thiệu bên trong thư mục tiếng Nhật đã có một định danh được bản địa hóa trong URL.



Để tạo các trang nội dung theo chương trình, Remix có một tính năng có tên là Splats, bắt tất cả các slug bất kể của các cấp độ lồng nhau. Đặt tên cho tệp $.jsx sẽ kích hoạt hàm cơ bản của slug catch-all.

ứng dụng├── root.jsx└── tuyến đường ├── tệp │ └── $.jsx └── files.jsx

Sự khác biệt giữa các phân đoạn động từ Remix là các splat vẫn khớp ở / tiếp theo. Do đó, các splat sẽ nắm bắt mọi thứ trong đường dẫn. Nếu đường dẫn URL là hello.com/ja/about/something, tuyến splat có một tham số đặc biệt để nắm bắt các phân đoạn theo sau của URL.

export async function loader({ params }) { params["*"]; // "ja/about/something"}

Sử dụng tham số đặc biệt của tuyến splat, hãy chỉnh sửa tệp $.jsx.

export default function Page() { // useLoaderData trả về dữ liệu đã phân tích cú pháp JSON từ trình tải func let story = useLoaderData(); story = useStoryblokState(story, { resolveRelations: ["featured-posts.posts", "selected-posts.posts"] }); return };// loader là API Backend & Được kết nối thông qua useLoaderDataexport const loader = async ({ params, preview = false }) => { let slug = params["*"] ?? "home"; slug = slug.endsWith("/") ? slug.slice(0, -1) : slug; let sbParams = { version: "draft", resolve_relations: ["featured-posts.posts", "selected-posts.posts"], }; // … let { data } = await getStoryblokApi().get(`cdn/stories/${slug}`, sbParams); return json(data?.story, preview);};

GỢI Ý: Trong phần "Chọn giữa 3 phương pháp", chúng tôi không đề cập đến cả ba phương pháp, nhưng nếu bạn muốn biết thêm, tất cả các phương pháp đều được ghi lại bên dưới.

Tóm tắt​

Chúng ta cùng nhau tìm hiểu các sự kiện và số liệu thống kê để biết tác động và tầm quan trọng của i18n và thấy cách Remix xử lý một số tùy chọn để triển khai i18n nâng cao. Điều thú vị là trải nghiệm i18n tốt hơn mang lại SEO và UX tốt hơn. Hy vọng bài viết này đã cung cấp cho bạn kiến thức mới và những bài học sâu sắc.

• “Quốc tế hóa,” Storyblok Docs
• Phiên bản video của bài viết này
• Remix docs
• remix-i18next
• Tài liệu Storyblok