React Sunucu Bileşenleri

Magic Translate React Server Bileşenlerini tam olarak destekler. İçerik sunucuda çevrilir, böylece arama motorları ve kullanıcılar herhangi bir istemci tarafı JavaScript olmadan HTML'yi çevirir.

Kurulum

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

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

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

Kurulum

Çeviri işlevini bir kez ayarlayın, örneğin lib/translate.ts 'de. API anahtarınızı bir ortam değişkeninde tutun.

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

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

Henüz bir API anahtarınız yoksa, bir tane almak için Magic Translate 'a kaydolun.

Sunucu bileşenini çevirme

createLocalizedT translate işlevini bir dile bağlar ve <T> bileşenini ve t() işlevini döndürür. Bir Language veya de veya pt-BR gibi herhangi bir yerel ayarı kabul eder.

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>
  );
}

Her sayfa aynı çeviri işlevini paylaştığından, çeviriler tüm uygulamanızda toplu olarak toplanır ve önbelleğe alınır.

Tek bir bileşen için createServerT her şeyi tek bir çağrıda ayarlar. Sadece bu çağrı içinde önbelleğe alınır.

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

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

React SSR'nin <T> bileşeni yalnızca React Server Bileşenlerinde çalışır. İstemci bileşenlerinde, bunun yerine React istemc isini kullanın.

Bileşen başına dili seçme

createT, dili prop olarak alan bir <T> bileşeni döndürür. Bu, dil bileşenden bileşene farklılık gösterdiğinde kullanışlıdır.

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üm <T> bileşenleri, formality gibi istemci <T> bileşeniyle aynı seçenekleri kabul eder.

Örnek proje

Örnek bir SSR projesi GitHub 'da bulabilirsiniz.