Intlayer के साथ एक कंपोनेंट को बहुभाषी (i18n) कैसे बनाएं

यह गाइड दो सामान्य सेटअप में एक UI कंपोनेंट को बहुभाषी बनाने के लिए न्यूनतम कदम दिखाता है:

• React (Vite/SPA)
• Next.js (App Router)

आप पहले अपनी सामग्री घोषित करेंगे, फिर इसे अपने कंपोनेंट में पुनः प्राप्त करेंगे।

1) अपनी सामग्री घोषित करें (React और Next.js दोनों के लिए साझा)

अपने कंपोनेंट के पास एक सामग्री घोषणा फ़ाइल बनाएं। यह अनुवादों को उस स्थान के करीब रखता है जहाँ उनका उपयोग होता है और टाइप सुरक्षा सक्षम करता है।

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-example",
  content: {
    title: t({
      en: "Hello",
      fr: "Bonjour",
      es: "Hola",
    }),
    description: t({
      en: "A multilingual React component",
      fr: "Un composant React multilingue",
      es: "Un componente React multilingüe",
    }),
  },
} satisfies Dictionary;

export default componentContent;

यदि आप कॉन्फ़िगरेशन फ़ाइलों को प्राथमिकता देते हैं तो JSON भी समर्थित है।

{
  "$schema": "https://intlayer.org/schema.json",
  "key": "component-example",
  "content": {
    "title": {
      "nodeType": "translation",
      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
    },
    "description": {
      "nodeType": "translation",
      "translation": {
        "en": "A multilingual React component",
        "fr": "Un composant React multilingue",
        "es": "Un componente React multilingüe"
      }
    }
  }
}

2) अपनी सामग्री पुनः प्राप्त करें

केस A. React ऐप (Vite/SPA)

डिफ़ॉल्ट तरीका: कुंजी द्वारा पुनः प्राप्त करने के लिए useIntlayer का उपयोग करें। यह कंपोनेंट्स को हल्का और टाइप किया हुआ रखता है।

import { useIntlayer } from "react-intlayer";

export function ComponentExample() {
  const content = useIntlayer("component-example");
  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
}

सर्वर-साइड रेंडरिंग या बाहरी प्रदाता: react-intlayer/server का उपयोग करें और आवश्यक होने पर स्पष्ट locale पास करें।

import { useIntlayer } from "react-intlayer/server";

export function ServerRenderedExample({ locale }: { locale: string }) {
  const content = useIntlayer("component-example", locale);
  return (
    <>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </>
  );
}

वैकल्पिक: यदि आप कॉल साइट पर संरचना को एक साथ रखना पसंद करते हैं, तो useDictionary पूरी घोषित वस्तु पढ़ सकता है।

import { useDictionary } from "react-intlayer";
import componentContent from "./component.content";

export function ComponentWithDictionary() {
  const { title, description } = useDictionary(componentContent);
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

मामला बी. Next.js (ऐप राउटर)

डेटा सुरक्षा और प्रदर्शन के लिए सर्वर कंपोनेंट्स को प्राथमिकता दें। सर्वर फाइलों में next-intlayer/server से useIntlayer का उपयोग करें, और क्लाइंट कंपोनेंट्स में next-intlayer से useIntlayer का उपयोग करें।

import { useIntlayer } from "next-intlayer/server";

export default function ServerComponent() {
  const content = useIntlayer("component-example");
  return (
    <>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </>
  );
}

"use client";

import { useIntlayer } from "next-intlayer";

export function ClientComponent() {
  const content = useIntlayer("component-example");
  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
}

टिप: पेज मेटाडेटा और SEO के लिए, आप getIntlayer का उपयोग करके कंटेंट भी प्राप्त कर सकते हैं और getMultilingualUrls के माध्यम से बहुभाषी URL जनरेट कर सकते हैं।

क्यों Intlayer का कंपोनेंट दृष्टिकोण सबसे अच्छा है

• समीपता: कंटेंट घोषणाएँ कंपोनेंट्स के पास रहती हैं, जिससे विचलन कम होता है और डिज़ाइन सिस्टम्स में पुन: उपयोग बेहतर होता है।
• टाइप सुरक्षा: कुंजियाँ और संरचनाएँ मजबूत प्रकारित होती हैं; गायब अनुवाद बिल्ड-टाइम पर ही सामने आते हैं, रनटाइम पर नहीं।
• सर्वर-प्रथम: बेहतर सुरक्षा और प्रदर्शन के लिए सर्वर कंपोनेंट्स में मूल रूप से काम करता है; क्लाइंट हुक्स सहज बने रहते हैं।
• ट्री-शेकिंग: केवल वही कंटेंट जो कंपोनेंट द्वारा उपयोग किया जाता है, उसे बंडल किया जाता है, जिससे बड़े ऐप्स में पेलोड छोटे रहते हैं।
• डीएक्स और टूलिंग: बिल्ट-इन मिडलवेयर, SEO हेल्पर्स, और वैकल्पिक विजुअल एडिटर/एआई अनुवाद रोज़मर्रा के काम को सरल बनाते हैं।

Next.js-केंद्रित राउंडअप में तुलना और पैटर्न देखें: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

संबंधित गाइड और संदर्भ

• React सेटअप (Vite): https://intlayer.org/doc/environment/vite-and-react
• React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
• TanStack स्टार्ट: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
• Next.js सेटअप: https://intlayer.org/doc/environment/nextjs
• क्यों Intlayer बनाम next-intl बनाम next-i18next - https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

इन पृष्ठों में एंड-टू-एंड सेटअप, प्रोवाइडर्स, रूटिंग, और SEO हेल्पर्स शामिल हैं।