Các thành phần máy chủ React

Magic Translate hỗ trợ đầy đủ React Server Components. Nội dung được dịch trên máy chủ, vì vậy các công cụ tìm kiếm và người dùng sẽ được dịch HTML mà không cần bất kỳ JavaScript phía máy khách nào.

Lắp đặt

# using npm
npm i @magic-translate/react-ssr

# using yarn
yarn add @magic-translate/react-ssr

# using pnpm
pnpm add @magic-translate/react-ssr

Thiết lập

Thiết lập chức năng dịch một lần, ví dụ trong lib/translate.ts. Giữ khóa API của bạn trong một biến môi trường.

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

export const translate = setupT({
  apiKey: process.env.MAGIC_TRANSLATE_API_KEY!
});

Nếu bạn chưa có khóa API, hãy đăng ký Magic Translate để nhận khóa.

Dịch một thành phần máy chủ

createLocalizedT liên kết hàm translate với một ngôn ngữ và trả về thành phần <T> và hàm t(). Nó chấp nhận Language hoặc bất kỳ địa phương nào như de hoặc pt-BR.

import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function AboutPage() {
  const { T, t } = createLocalizedT(translate, 'de');

  return (
    <article>
      <h1>
        <T>About us</T>
      </h1>
      <img src="/team.jpg" alt={await t('Our team in Zurich')} />
    </article>
  );
}

Bởi vì mỗi trang đều chia sẻ cùng một chức năng dịch, các bản dịch được lưu trữ hàng loạt và lưu trong bộ nhớ đệm trên toàn bộ ứng dụng của bạn.

Đối với một thành phần duy nhất, createServerT thiết lập mọi thứ trong một cuộc gọi. Nó chỉ lưu trữ trong cuộc gọi đó.

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

const { T } = createServerT({
  apiKey: process.env.MAGIC_TRANSLATE_API_KEY!,
  locale: 'zh'
});

Thành phần <T> từ React SSR chỉ hoạt động trong React Server Components. Trong các thành phần client, hãy sử dụng React client để thay thế.

Chọn ngôn ngữ cho mỗi thành phần

createT trả về một thành phần <T> lấy ngôn ngữ là prop. Điều này rất hữu ích khi ngôn ngữ khác nhau giữa các thành phần.

import { createT, Language } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

const T = createT(translate);

const Greeting = async () => <T lang={Language.ZH}>Please translate me!</T>;

Tất cả các thành phần <T> chấp nhận các tùy chọn giống như thành phần client <T>, chẳng hạn như formality.

Dự án ví dụ

Bạn có thể tìm thấy một dự án SSR ví dụ trên GitHub.