रिएक्ट सर्वर कंपोनेंट्स

Magic Translate रिएक्ट सर्वर कंपोनेंट्स का पूरी तरह से समर्थन करता है। कॉन्टेंट सर्वर पर ट्रांसलेट किया जाता है, इसलिए सर्च इंजन और यूज़र को बिना किसी क्लाइंट-साइड JavaScript के एचटीएमएल का अनुवाद मिलता है।

इंस्टालेशन

# 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> कॉम्पोनेन्ट सिर्फ़ रिएक्ट सर्वर कंपोनेंट्स में काम करता है। क्लाइंट कंपोनेंट्स में, इसके बजाय रिएक्ट क्लाइंट का इस्तेमाल करें।

हर कॉम्पोनेन्ट के लिए भाषा चुनना

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।

प्रोजेक्ट का उदाहरण

तुम्हेंं GitHub पर SSR प्रोजेक्ट का उदाहरण मिल सकता है।