Magic Translate vs. i18next

i18next, với các ràng buộc React react-i18next, là thư viện i18n mã nguồn mở phổ biến nhất cho JavaScript. Nó được xây dựng xung quanh các khóa dịch và các tệp ngôn ngữ. Magic Translate dịch văn bản trong các thành phần của bạn trực tiếp, không cần phím hoặc tệp. Trang này giải thích sự khác biệt để bạn có thể chọn công cụ phù hợp cho ứng dụng của mình.

Sơ lược

Mã khác nhau như thế nào

Với react-i18next, bạn giữ một tệp ngôn ngữ cho mỗi ngôn ngữ và tham khảo các văn bản theo phím:

// locales/en/translation.json
{ "cart": { "title": "Your shopping cart" } }

// Cart.tsx
import { useTranslation } from 'react-i18next';

const Cart = () => {
  const { t } = useTranslation();
  return <h2>{t('cart.title')}</h2>;
};

Với Magic Translate, văn bản vẫn ở trong thành phần:

import { T } from '@magic-translate/react';

const Cart = () => (
  <h2>
    <T>Your shopping cart</T>
  </h2>
);

Khi nào nên chọn Magic Translate

• Bạn muốn ứng dụng của mình bằng nhiều ngôn ngữ mà không cần quản lý các tệp ngôn ngữ.
• Bạn không có dịch giả hoặc bạn không muốn chờ đợi họ trước khi phát hành phiên bản mới.
• Văn bản của bạn thay đổi thường xuyên và bạn muốn mọi ngôn ngữ được cập nhật.
• Bạn sử dụng React Server Components hoặc Next.js và muốn HTML được dịch đầy đủ cho các công cụ tìm kiếm.

Khi nào nên chọn i18next

• Mỗi văn bản phải được dịch hoặc xem xét bởi một người.
• Bạn cần kiểm soát chính xác các dạng số nhiều, ngày tháng và số trong mỗi ngôn ngữ.
• Bạn muốn có một thư viện mã nguồn mở miễn phí mà không có dịch vụ bên ngoài.

Chuyển từ i18next sang Magic Translate

Bạn có thể chuyển đổi một thành phần tại một thời điểm. Thay thế t('key') bằng văn bản tiếng Anh từ tệp ngôn ngữ của bạn, được gói bằng <T> hoặc sử dụng useT hook cho props và thuộc tính. Cả hai thư viện có thể chạy cạnh nhau trong khi bạn di chuyển.

Sẵn sàng để thử nó? Làm theo hướng dẫn bắt đầu để dịch thành phần đầu tiên của bạn trong năm phút.