अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
अपने पसंदीदा AI एसिस्टेंट में Intlayer MCP सर्वर को एकीकृत करके आप सभी दस्तावेज़ को सीधे ChatGPT, DeepSeek, Cursor, VSCode से प्राप्त कर सकते हैं।
MCP सर्वर दस्तावेज़ देखेंइस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
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 हेल्पर्स शामिल हैं।