اجزای سرور ریاکت

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 پیدا کنید.