مكونات خادم React

Magic Translate يدعم مكونات خادم React بشكل كامل. تتم ترجمة المحتوى على الخادم، لذلك تحصل محركات البحث والمستخدمين على ترجمة HTML بدون أي جافا سكريبت من جانب العميل.

التثبيت

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

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

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

الإعداد

قم بإعداد وظيفة الترجمة مرة واحدة، على سبيل المثال في lib/translate.ts. احتفظ بمفتاح API الخاص بك في متغير البيئة.

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

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

إذا لم يكن لديك مفتاح API حتى الآن، فقم بالتسجيل في Magic Translate للحصول على واحد.

ترجمة مكون خادم

createLocalizedT يربط وظيفة الترجمة بلغة واحدة ويعيد مكون <T> ووظيفة t(). وهي تقبل Language أو أي لغة مثل de أو 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>
  );
}

نظرًا لأن كل صفحة تشترك في نفس وظيفة الترجمة، يتم تجميع الترجمات وتخزينها مؤقتًا عبر التطبيق بأكمله.

بالنسبة لمكون واحد، يقوم createServerT بإعداد كل شيء في مكالمة واحدة. يتم التخزين المؤقت فقط داخل تلك المكالمة.

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

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

المكوّن <T> من React SSR يعمل فقط في مكونات خادم React. في مكونات العميل، استخدم عميل React بدلاً من ذلك.

اختيار اللغة لكل مكون

تقوم createT بإرجاع مكون <T> الذي يأخذ اللغة كـ prop. يكون هذا مفيدًا عندما تختلف اللغة من مكون إلى مكون.

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>، مثل formality.

مشروع مثال

يمكنك العثور على مثال لمشروع SSR على GitHub.