Next.js Internationalization: Complete i18n Guide with next-intl

75% से अधिक इंटरनेट उपयोगकर्ता अपनी मूल भाषा में ब्राउज़ करना पसंद करते हैं, और जो व्यवसाय स्थानीयकरण करते हैं वे गैर-अंग्रेजी बाजारों में 70% अधिक रूपांतरण दर देखते हैं। नेक्स्ट.जेएस नेक्स्ट-इंटल के साथ मिलकर किसी भी स्थान पर रूटिंग, अनुवाद, फ़ॉर्मेटिंग और एसईओ को संभालने के लिए एक मजबूत अंतर्राष्ट्रीयकरण ढांचा प्रदान करता है।

मुख्य बातें

• नेक्स्ट-इंटल नेक्स्ट.जेएस ऐप राउटर और सर्वर घटकों के साथ सहजता से एकीकृत होता है
• लोकेल-प्रीफिक्स्ड रूटिंग अन्य भाषाओं के लिए प्रीफिक्स जोड़ते समय अंग्रेजी यूआरएल को साफ रखती है
• सर्वर घटक क्लाइंट-साइड जावास्क्रिप्ट बंडल ओवरहेड के बिना अनुवाद लोड करते हैं
• अंतर्राष्ट्रीय एसईओ के लिए उचित hreflang टैग और बहुभाषी साइटमैप आवश्यक हैं

---

प्रोजेक्ट सेटअप

नेक्स्ट-इंटल इंस्टॉल करें और अपने प्रोजेक्ट को routing.ts, नेविगेशन.ts और request.ts वाली i18n डायरेक्टरी के साथ व्यवस्थित करें। अपने ऐप को ऐप राउटर में [लोकेल] के अंतर्गत रखें। प्रोजेक्ट रूट पर संदेश निर्देशिका में अनुवादित JSON फ़ाइलों को संग्रहीत करें।

रूटिंग कॉन्फ़िगरेशन

अपने लोकेल सरणी, डिफ़ॉल्ट लोकेल और लोकेल उपसर्ग रणनीति को निर्दिष्ट करते हुए परिभाषा रूटिंग() के साथ रूटिंग को परिभाषित करें। "आवश्यकतानुसार" रणनीति डिफ़ॉल्ट लोकेल (अंग्रेजी) के लिए उपसर्ग को हटा देती है जबकि अन्य के लिए /es/, /fr/, /ar/ उपसर्ग जोड़ती है।

स्थानीय-जागरूक लिंक, यूज़राउटर, यूज़पाथनाम और रीडायरेक्ट फ़ंक्शंस प्राप्त करने के लिए क्रिएटनेविगेशन (रूटिंग) के साथ नेविगेशन रैपर बनाएं। अपने पूरे ऐप में Next.js नेटिव नेविगेशन के बजाय इनका उपयोग करें।

मिडलवेयर सेटअप

Next.js 16 में, एक proxy.ts फ़ाइल बनाएं (पुराने मिडिलवेयर.ts पैटर्न को प्रतिस्थापित करते हुए)। createMiddleware(रूटिंग) द्वारा बनाए गए प्रॉक्सी फ़ंक्शन को निर्यात करें। एपीआई मार्गों, स्थिर फ़ाइलों और _अगले पथों को बाहर करने के लिए मिलानकर्ता को कॉन्फ़िगर करें।

---

अनुवाद फ़ाइलें

JSON संरचना (नेस्टेड, फ़्लैट नहीं)

नेमस्पेस द्वारा व्यवस्थित नेस्टेड कुंजियों का उपयोग करें। कभी भी "home.title" जैसी फ़्लैट डॉट-पृथक कुंजियों का उपयोग न करें - वे नेक्स्ट-इंटल नेमस्पेस रिज़ॉल्यूशन को तोड़ देती हैं। संरचना अनुवाद इस प्रकार है:

• सामान्य: साझा शर्तें (बटन, लेबल, लोडिंग स्थिति)
• नेव: नेविगेशन आइटम
• होम: होम पेज सामग्री
• के बारे में: पेज सामग्री के बारे में
• admin.common: साझा व्यवस्थापक शर्तें
• admin.products: उत्पाद प्रबंधन पृष्ठ

सर्वर घटक

async सर्वर घटकों में getTranslations("namespace") का उपयोग करें। यह शून्य क्लाइंट बंडल प्रभाव के साथ सर्वर पर अनुवाद लोड करता है। स्ट्रिंग अनुवाद के लिए t("key") को कॉल करें, रिच टेक्स्ट के लिए t.rich("key", { बोल्ड: (टुकड़े) => ... }) को कॉल करें।

ग्राहक घटक

"क्लाइंट का उपयोग करें" के साथ चिह्नित क्लाइंट घटकों में यूज़ट्रांसलेशन("नेमस्पेस") हुक का उपयोग करें। हुक समान t() फ़ंक्शन प्रदान करता है। क्लाइंट बंडल में केवल सक्रिय नामस्थान के अनुवाद शामिल हैं।

---

आरटीएल (दाएं से बाएं) समर्थन

अरबी, हिब्रू, उर्दू और अन्य आरटीएल भाषाओं के लिए, वर्तमान स्थान के आधार पर HTML तत्व पर dir='rtl' सेट करें। लोकेल लेआउट में, जांचें कि क्या लोकेल आपके rtlLocales सरणी में है और तदनुसार दिशा निर्धारित करें।

आरटीएल मोड में स्वचालित रूप से फ़्लिप होने वाले लेआउट के लिए टेलविंड सीएसएस तार्किक गुणों (पीएल, पीआर, एमएल, एमआर के बजाय पीएस, पीई, एमएस, मी) का उपयोग करें। आरटीएल स्क्रिप्ट के लिए उपयुक्त फ़ॉन्ट लोड करें (उदाहरण के लिए, अरबी और उर्दू के लिए नोटो सैन्स अरबी)।

---

एसईओ: मेटाडेटा और ह्रेफ्लांग

गतिशील मेटाडेटा

स्थानीय-जागरूक शीर्षकों, विवरणों और hreflang विकल्पों के लिए प्रत्येक पृष्ठ को generateMetadata() (कभी भी स्थिर निर्यात स्थिरांक मेटाडेटा नहीं) का उपयोग करना चाहिए। प्रत्येक स्थान को उसके यूआरएल पथ पर मैप करते हुए एक अल्टरनेटिव.लैंग्वेज ऑब्जेक्ट बनाएं, साथ ही अंग्रेजी संस्करण की ओर इशारा करने वाली एक एक्स-डिफ़ॉल्ट प्रविष्टि भी बनाएं।

बहुभाषी साइटमैप

प्रत्येक स्थान में प्रत्येक पृष्ठ के लिए साइटमैप प्रविष्टियाँ उत्पन्न करें। प्रत्येक प्रविष्टि में सभी स्थानीय वेरिएंट को मैप करने वाली वैकल्पिक भाषाएँ शामिल होनी चाहिए। यह खोज इंजनों को प्रत्येक बाज़ार में सही भाषा संस्करण परोसने में सक्षम बनाता है।

सामग्री-भाषा मेटा टैग

खोज इंजन और एआई क्रॉलर को पृष्ठ भाषा की पहचान करने में मदद करने के लिए अपने स्थानीय लेआउट में सामग्री-भाषा मेटा टैग सेट करें। यह बिंग और उभरते एआई खोज इंजनों के लिए विशेष रूप से महत्वपूर्ण है।

---

अनुवाद कार्यप्रवाह

1. सभी अनुवाद योग्य स्ट्रिंग्स के लिए सत्य के एकल स्रोत के रूप में en.json को संपादित करें
2. सभी स्थानीय फ़ाइलों में नई कुंजियाँ प्रसारित करने के लिए अनुवाद स्क्रिप्ट चलाएँ (प्रारंभिक ड्राफ्ट के लिए Google Translate API या DeepL का उपयोग करके)
3. गुणवत्ता और सांस्कृतिक उपयुक्तता के लिए देशी वक्ताओं के साथ अनुवादों की समीक्षा करें
4. आरटीएल भाषाओं का अच्छी तरह से परीक्षण करें - लेआउट फ़्लिपिंग, टेक्स्ट संरेखण और फॉर्म इनपुट की जाँच करें
5. hreflang सत्यापनकर्ता टूल और Google खोज कंसोल अंतर्राष्ट्रीय लक्ष्यीकरण के साथ SEO सत्यापित करें

बड़ी अनुवाद फ़ाइलों को संभालना

5,000+ अनुवाद कुंजियों वाले अनुप्रयोगों के लिए, रखरखाव में सुधार के लिए JSON फ़ाइलों को नामस्थान द्वारा व्यवस्थित करें। नेक्स्ट-इंटल प्रदर्शन को इष्टतम बनाए रखते हुए केवल वर्तमान पृष्ठ के लिए आवश्यक नामस्थान लोड करता है।

---

प्रदर्शन संबंधी विचार

• सर्वर रेंडरिंग: अनुवाद सर्वर पर लोड होता है। जब तक घटक क्लाइंट घटक न हो तब तक कोई भी अनुवाद JSON क्लाइंट को नहीं भेजा जाता है।
• नेमस्पेस विभाजन: प्रति पृष्ठ केवल सक्रिय नेमस्पेस लोड होता है, संपूर्ण अनुवाद फ़ाइल नहीं।
• स्थैतिक पीढ़ी: getTranslations() का उपयोग करने वाले पेज सभी स्थानों के लिए निर्माण समय पर स्थिर रूप से उत्पन्न किए जा सकते हैं।
• बंडल आकार: क्लाइंट घटकों में केवल उनके नामस्थान अनुवाद शामिल हैं। यूज़ट्रांसलेशन("होम") का उपयोग करने वाला पृष्ठ केवल "होम" नेमस्पेस भेजता है।

---

सामान्य ख़तरे

1. फ़्लैट कुंजियाँ: नेस्टेड { "home": { "title": "..." } } के बजाय कुंजी के रूप में "home.title" का उपयोग करने से नेमस्पेस रिज़ॉल्यूशन टूट जाता है
2. अनुपलब्ध अनुवाद: हमेशा फ़ॉलबैक व्यवहार प्रदान करें - यदि कोई अनुवाद गायब है तो नेक्स्ट-इंटल कुंजी नाम दिखाता है, लेकिन यह उपयोगकर्ताओं को टूटा हुआ दिखता है
3. हार्डकोडेड स्ट्रिंग्स: अनुवाद प्रणाली के बाहर किसी भी स्ट्रिंग के लिए अपने कोडबेस का ऑडिट करें
4. दिनांक/संख्या फ़ॉर्मेटिंग: सुसंगत व्यवहार के लिए toLocaleDateString() के बजाय नेक्स्ट-इंटल फ़ॉर्मेटर्स का उपयोग करें
5. स्टेटिक मेटाडेटा: generateMetadata() के बजाय एक्सपोर्ट कॉन्स्ट मेटाडेटा का उपयोग करना स्थानीय-जागरूक शीर्षकों और विवरणों को रोकता है

---

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: नेक्स्ट-इंटल कितने स्थानों को संभाल सकता है?

कोई व्यावहारिक सीमा नहीं है. 11+ लोकेशंस और 7,000+ अनुवाद कुंजियों वाले एप्लिकेशन प्रदर्शन समस्याओं के बिना चलते हैं। सर्वर-साइड रेंडरिंग का मतलब है कि अनुवाद क्लाइंट बंडलों को फुलाता नहीं है।

प्रश्न: क्या i18n पेज लोड प्रदर्शन को प्रभावित करता है?

सर्वर घटकों के साथ, अनुवाद लोडिंग सर्वर पर होती है। प्रदर्शन पर प्रभाव नगण्य है. क्लाइंट घटकों में केवल उनके नामस्थान अनुवाद शामिल होते हैं, आमतौर पर कुछ KB।

प्रश्न: हम अनेक भाषाओं में गतिशील डेटाबेस सामग्री को कैसे संभालते हैं?

स्टेटिक यूआई टेक्स्ट JSON फ़ाइलों का उपयोग करता है। डेटाबेस सामग्री (ब्लॉग पोस्ट, उत्पाद विवरण) के लिए समर्पित कॉलम या तालिकाओं में अनुवाद संग्रहीत करने, या अंतर्निहित अनुवाद वर्कफ़्लो के साथ सीएमएस का उपयोग करने की आवश्यकता होती है। कुछ टीमें हाइब्रिड का उपयोग करती हैं: यूआई के लिए JSON, सामग्री के लिए डेटाबेस।

प्रश्न: संख्या और दिनांक स्वरूपण के बारे में क्या?

नेक्स्ट-इंटल संख्याओं, मुद्राओं, तिथियों और सापेक्ष समय के स्थानीय-जागरूक स्वरूपण के लिए उपयोगफॉर्मेटर () प्रदान करता है। सभी स्वरूपण अंतर्राष्ट्रीय मानक का पालन करते हैं और स्थानीय परंपराओं का स्वचालित रूप से सम्मान करते हैं।

---

आगे क्या है

अंतर्राष्ट्रीयकरण एक ऐसा निवेश है जो हर गैर-अंग्रेज़ी बाज़ार में लाभांश देता है। अपने उच्चतम-मूल्य वाले स्थानों से शुरुआत करें और वहां से विस्तार करें।

i18n कार्यान्वयन सहायता के लिए ECOSIRE से संपर्क करें, या बहुभाषी ERP परिनियोजन के लिए हमारी Odoo कार्यान्वयन सेवाओं का पता लगाएं।

---

ECOSIRE द्वारा प्रकाशित - एंटरप्राइज़ सॉफ़्टवेयर समाधानों के साथ व्यवसायों को बड़े पैमाने पर मदद करना।