Giới Thiệu
Trong thế giới phát triển ứng dụng web, việc địa phương hóa (localization) một ứng dụng React không phải là điều khó khăn. Có rất nhiều công cụ hỗ trợ bạn trong quá trình này. Tuy nhiên, khi bắt tay vào thực hiện, bạn sẽ nhận ra rằng việc này có thể gây rắc rối. Bạn sẽ phải lục lọi qua các tệp JSON, thực hiện thay đổi, nhận thông báo từ các cộng tác viên, đoán xem văn bản xuất hiện ở đâu và hy vọng rằng ngữ cảnh vẫn hợp lý khi được dịch.
Nhưng nếu như bạn và đội ngũ của mình có thể chỉ cần nhấp vào văn bản trên trang web và chỉnh sửa bản dịch ngay tại đó? Đó chính là điều mà SejHey mang lại. Không cần cài đặt phức tạp hay các plugin trên Chrome, nó "chỉ hoạt động" và xử lý mọi thứ cho bạn.
Cách Thức Truyền Thống Của React i18n
- Địa ngục JSON: hàng nghìn khóa, không biết chúng xuất hiện ở đâu.
- Cơn đau đầu về cấu hình:
react-i18next, namespaces, fallbacks... - Chuyển đổi ngữ cảnh: ứng dụng ở một tab, bản dịch ở tab khác, hoặc tệ hơn, trong một tệp JSON.
- Thời gian lặp chậm: thay đổi → lưu → triển khai → làm mới → kiểm tra → lặp lại.
Nghe quen thuộc không? 😅
Cách Thức SejHey
Với SejHey, ứng dụng React của bạn trở thành trình chỉnh sửa bản dịch:
- Thấy một chuỗi trong ứng dụng của bạn? 👉 Nhấp vào nó.
- Chỉnh sửa bản dịch trực tiếp, hoặc tạo một bản mới.
- Lưu lại, và nó sẽ cập nhật ngay lập tức.
Bản dịch được lưu thông qua API SejHey, tự động làm mới bộ đệm CDN và cung cấp các bản cập nhật cho tất cả người dùng cuối. Bạn muốn kiểm soát nhiều hơn về thời gian cập nhật? Với SejHey, bạn có thể quản lý các bản phát hành trên các môi trường khác nhau - chẳng hạn như kiểm tra, staging và sản xuất. Bằng cách này, bạn chỉ công bố lên môi trường sản xuất khi các bản cập nhật của bạn đã được xem xét và phê duyệt.
Bắt Đầu Nhanh Chóng Với React
Cài đặt SDK:
bash
npm install @sejhey/react-i18nKhởi tạo i18n và bao bọc ứng dụng của bạn:
javascript
import { SejheyI18n, SejHeyProvider } from '@sejhey/react-i18n';
const i18n = new SejheyI18n({
defaultLanguage: 'en',
projectId: 'YOUR_PROJECT_ID' // Thay thế bằng project_id của bạn tại SejHey
})
.useCdnLoader()
.useInContextEditor()
.useLanguagePicker();
export default function MyApp() {
return (
<SejHeyProvider i18n={i18n}>
<YourComponents />
</SejHeyProvider>
);
}Sử Dụng Bản Dịch Trong Các Thành Phần
SejHey cung cấp tất cả những gì bạn cần, bao gồm biến, số nhiều, giá trị thay thế và nhiều hơn nữa.
javascript
import { T, useTranslate } from '@sejhey/react-i18n';
const MyComponent = () => {
const { t } = useTranslate();
return (
<>
{t('welcome_message')}
<T keyName='welcome_message' />
<T keyName='unread_messages' params={{ count: 3 }} />
<T keyName='welcome_name' params={{ name: 'John' }} />
</>
);
};Hiệu Năng Mượt Mà Với Next.js
SejHey hoạt động liền mạch với server-side rendering:
javascript
// pages/_app.tsx
import { SejHeyProvider } from '@sejhey/react-i18n';
import { i18n } from '../i18n';
export default function MyApp({ Component, pageProps, serialized }) {
return (
<SejHeyProvider i18n={i18n} serialized={serialized}>
<Component {...pageProps} />
</SejHeyProvider>
);
}
MyApp.getInitialProps = async (appContext) =>
getSejHeyInitialProps(App, appContext, i18n);Hiệu Năng Nhanh Chóng
Các bản dịch được lưu trữ trên backend Next.js hoặc trình duyệt, đảm bảo tốc độ tải nhanh chóng cho người dùng. SejHey cũng tận dụng chiến lược stale-while-revalidate (SWR) tiên tiến, do đó các bản cập nhật xuất hiện trong ứng dụng của bạn gần như ngay lập tức mà không hy sinh lợi ích của việc lưu trữ.
CDN & Cloudflare Workers
Phân phối các bản dịch của bạn qua CDN để giao hàng toàn cầu siêu nhanh:
- Cloudflare Workers lưu trữ các bản dịch tại các vị trí biên.
- Tự động xóa bộ đệm nếu có thay đổi.
- Giảm thiểu yêu cầu mạng cho người dùng cuối.
Phát Hiện Ngôn Ngữ
SejHey tự động phát hiện và tải ngôn ngữ ưa thích của từng người dùng ngay lập tức. Bạn cũng có thể tùy chỉnh phát hiện với nhiều tùy chọn cấu hình để phù hợp với nhu cầu của mình.
Trình Chỉnh Sửa SejHey
Ngoài việc chỉnh sửa bản dịch trực tiếp trên trang web của bạn, bạn còn có thể tận dụng Trình Chỉnh Sửa SejHey mạnh mẽ. Nó được trang bị nhiều công cụ tiên tiến giúp bạn quản lý và tinh chỉnh các bản dịch dễ dàng hơn bao giờ hết. Nó có nhiều tính năng bổ sung:
- Danh sách từ vựng
- Cộng tác viên
- Đảm bảo chất lượng, chính tả, biến, dấu câu...
- Bản dịch AI
- Lịch sử
- Bình luận
- Nhiệm vụ
- Tích hợp GitHub
Kích Hoạt Chế Độ Trong Ngữ Cảnh
Kích hoạt trình chỉnh sửa trong ngữ cảnh trong ứng dụng của bạn bằng cách bật .useInContextEditor() khi khởi tạo plugin SejHey.
Khi được kích hoạt, trình chỉnh sửa sẽ được kích hoạt bằng cách thêm tham số truy vấn ?in_context=true vào URL của bạn. Người dùng sẽ được yêu cầu xác thực quyền truy cập của họ qua SejHey. Các cộng tác viên có thể nhấp trực tiếp vào các văn bản trong ứng dụng của bạn để chỉnh sửa bản dịch ngay trên trang web của bạn.
Kích Hoạt Chỉnh Sửa Trong Ngữ Cảnh Có Tăng Kích Thước Bundle Của Tôi Không?
Không. Khi kích hoạt chỉnh sửa trong ngữ cảnh, mã cần thiết sẽ được tải theo yêu cầu vào frontend của bạn. Nó chỉ được tải khi cần thiết, giữ cho bundle của bạn gọn nhẹ.
Ứng Dụng Sản Xuất Của Tôi Có Phụ Thuộc Vào Máy Chủ SejHey Không?
Không. Các bản dịch luôn được lưu trữ trên các máy chủ biên do Cloudflare cung cấp - CDN đáng tin cậy nhất thế giới. Chúng cũng được lưu trữ cục bộ trong backend Next.js của bạn để tăng độ tin cậy.
Tôi Có Thể Sử Dụng Tệp Tĩnh Như Một Phương Thức Dự Phòng Không?
Có. SejHey hoàn toàn hỗ trợ các tệp dịch tĩnh, giống như các plugin phổ biến như i18next.
Nhưng Liệu Điều Này Có Đắt Không?
Không! SejHey được phát triển từ sự thất vọng với các dịch vụ i18n tính phí quá cao cho những chức năng đơn giản. Ngay từ đầu, mục tiêu là xây dựng một công cụ mạnh mẽ, tiên tiến mà các startup và đội ngũ đang phát triển có thể thực sự chi trả. Hơn nữa, SejHey cung cấp một phiên bản miễn phí rộng rãi đã bao gồm hầu hết các trường hợp sử dụng.
Hãy Thử Ngay
Nếu React i18n từng khiến bạn cảm thấy chán nản, điều này sẽ giống như gian lận:
Khám phá SejHey React i18n SDK
Cuối cùng, React i18n mà chỉ đơn giản hoạt động.
