ریکٹ سرور اجزاء

Magic Translate ریکٹ سرور اجزاء کی مکمل حمایت سرور پر مواد کا ترجمہ کیا جاتا ہے، لہذا سرچ انجن اور صارفین کو کسی کلائنٹ سائیڈ جاوا اسکرپٹ کے بغیر 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'
});

React SSR کا <T> جزو صرف ریکٹ سرور اجزاء میں کام کرتا ہے۔ کلائنٹ اجزاء میں، اس کے بجائے 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 ۔

مثال پروجیکٹ

آپ گٹ ہب پر ایک مثال ایس ایس آر پروجیکٹ تلاش کرسکتے ہیں۔