तुमच्या अ‍ॅपमध्ये अनेक भाषा कशा जोडाव्यात

अ‍ॅपमध्ये अनेक भाषा जोडण्यासाठी, इंटरफेसमधील प्रत्येक मजकूर भाषांतर फाइल्समध्ये (प्रत्येक भाषेसाठी एक) हलवा, एखाद्या i18n लायब्ररीने त्या लोड करा, आणि निवड लक्षात ठेवणारा भाषा बदलण्याचा पर्याय जोडा. सार्वजनिक पाने जी शोधात सापडावीत अशी तुमची इच्छा असेल, तर प्रत्येक भाषेला /fr/ सारखा स्वतंत्र URL द्या आणि hreflang टॅगद्वारे आवृत्त्या जोडा. त्यानंतर लोक विसरणाऱ्या भागांकडे लक्ष द्या: तारखा, आकडे आणि चलने, काही भाषांमधील लांब मजकूर, उजवीकडून डावीकडे लिहिल्या जाणाऱ्या लिपी, आणि तुमच्या डेटाबेसमध्ये साठवलेला मजकूर.

तुम्हाला ऐकू येणारे शब्द

• Internationalisation (i18n): कोडला कोणतीही भाषा हाताळण्यासाठी तयार करणे — कोडमध्ये थेट लिहिलेले मजकूर नसणे, स्थानिक पद्धतीने स्वरूपन आणि लवचिक लेआउट. "18" म्हणजे i आणि n यांच्यामधील अक्षरांची संख्या.
• Localisation (l10n): अ‍ॅपला एका विशिष्ट भाषेसाठी किंवा बाजारपेठेसाठी जुळवून घेणे, मुख्यतः भाषांतर, कधी कधी चलन, प्रतिमा आणि कायदेशीर मजकूरही.
• Locale: भाषा आणि, पर्यायाने, प्रदेश, जसे en-GB किंवा pt-BR.

i18n एकदाच करा, मग प्रत्येक नवीन भाषा जोडणे हे मुख्यतः भाषांतराचेच काम राहते.

पर्याय आणि तडजोडी

बहुतेक अ‍ॅप्ससाठी, भाषांतर फाइल्ससह मानक i18n लायब्ररी हा योग्य पाया आहे. हवे असल्यास मशीन किंवा AI भाषांतराने मसुदा तयार करा, आणि ग्राहकांना सर्वाधिक दिसणाऱ्या मजकुरावर अस्खलित भाषिकांकडून पुनरावलोकन करून घ्या.

बहुभाषिक अ‍ॅपचे भाग

भाषांतर फाइल्स

<h1>Welcome back</h1> लिहिण्याऐवजी, कोड t('dashboard.welcome') असे लिहितो, आणि प्रत्येक locale मध्ये मजकूर असलेली फाइल असते:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

चलांसाठी प्लेसहोल्डर वापरा, वाक्याचे तुकडे जोडू नका — शब्दांचा क्रम भाषेनुसार बदलतो. आणि लायब्ररीचे बहुवचन नियम वापरा: इंग्रजीत दोन रूपे आहेत (1 item, 2 items), पण काही भाषांमध्ये तीन, चार किंवा अधिक रूपे असतात.

तारखा, आकडे आणि पैशांचे स्वरूपन

हे हाताने स्वरूपित करू नका. ब्राउझरचा अंगभूत Intl API कोणत्याही locale साठी स्वरूपन करतो: इंग्रजीत 1,234.5 असलेले आकडे जर्मनमध्ये 1.234,5 होतात; तारखा दिवस-पहिले किंवा महिना-पहिले अशा बदलतात; चलन चिन्ह जागा बदलते. तारखा UTC मध्ये साठवा आणि पैसे चलन कोडसह संख्या म्हणून साठवा, आणि फक्त प्रदर्शनासाठी स्वरूपन करा.

ताणणारा लेआउट

भाषांतरित मजकूर अनेकदा इंग्रजीपेक्षा लांब असतो — विशेषतः जर्मन आणि फिनिश शब्द. निश्चित रुंदीची बटणे आणि कापलेली लेबले टाळा, आणि तुमच्या सर्वात लांब भाषेसह चाचणी करा.

उजवीकडून डावीकडे लिहिल्या जाणाऱ्या भाषा

अरबी, हिब्रू, पर्शियन आणि उर्दू उजवीकडून डावीकडे वाचल्या जातात. त्या locale साठी पानावर dir="rtl" सेट करा आणि CSS लॉजिकल प्रॉपर्टीज वापरा (margin-left ऐवजी margin-inline-start; Tailwind मध्ये ml-4 ऐवजी ms-4), जेणेकरून लेआउट आपोआप उलटा होईल. बाण यांसारखे दिशा दर्शवणारे आयकॉन्सही उलटवावे लागतात.

भाषा बदलण्याचा पर्याय आणि ओळख

प्रत्येक पानावर भाषा बदलण्याचा पर्याय दाखवा, आणि प्रत्येक भाषेचे स्वतःचे नाव वापरा ("Deutsch", "Français", "العربية") — ध्वजांऐवजी. ध्वज देश दर्शवतात, भाषा नव्हे. पहिल्या भेटीत ब्राउझरची पसंतीची भाषा ओळखा आणि एक आवृत्ती सुचवा, पण अभ्यागताची स्पष्ट निवड अंतिम ठरू द्या आणि ती लक्षात ठेवा.

URL आणि SEO

शोध निकालांमध्ये दिसावी अशी पाने असतील, तर प्रत्येक भाषेला स्वतःचा URL हवा. सप्टेंबर 2026 पर्यंत, बहुभाषिक साइट्ससाठी Google चे मार्गदर्शन असे आहे:

• प्रत्येक भाषेसाठी वेगळे URL — सबडिरेक्टरी (example.com/fr/) सर्वात सोपी आहेत; सबडोमेन आणि देश-डोमेन देखील चालतात. URL पॅरामीटर्स (?lang=fr) शिफारसीय नाहीत.
• फक्त कुकी किंवा ब्राउझर सेटिंगने भाषा बदलू नका; Google चा क्रॉलर इतर आवृत्त्या कधीच पाहू शकत नाही.
• भाषेनुसार स्वयंचलित रीडायरेक्ट करू नका; त्याऐवजी आवृत्त्यांमध्ये लिंक द्या.
• hreflang वापरा, Google ला सांगण्यासाठी कोणती पाने एकमेकांची भाषांतरे आहेत. प्रत्येक आवृत्तीने स्वतःला आणि इतर सर्वांना सूचीबद्ध करणे आवश्यक आहे, नाहीतर त्या नोंदी दुर्लक्षित होऊ शकतात. फॉलबॅक पानासाठी x-default जोडा.
• Google पानाची भाषा त्यावर दिसणाऱ्या मजकुरावरून ओळखते, lang किंवा hreflang वरून नव्हे — त्यामुळे फक्त मेनू नव्हे, तर संपूर्ण पान भाषांतरित करा.

तरीही प्रत्येक आवृत्तीवर <html lang="fr"> सेट करा: स्क्रीन रीडर्स त्याचा वापर योग्य उच्चार निवडण्यासाठी करतात, जी एक प्रवेशयोग्यता आवश्यकता आहे.

लॉग-इन केलेल्या अ‍ॅप स्क्रीन्सना इंडेक्स होण्याची गरज नसते, त्यामुळे त्यांच्यासाठी भाषा वापरकर्त्याच्या प्रोफाइलमध्ये साठवणे ठीक आहे. सार्वजनिक पानांना आधी क्रॉल करून घेण्यासाठी AI-निर्मित वेबसाइट्ससाठी SEO पहा.

तुमच्या डेटाबेसमधील मजकूर

इंटरफेस मजकूर फाइल्समध्ये राहतो; उत्पादनांची नावे, ब्लॉग पोस्ट्स आणि श्रेणींसारखा मजकूर डेटाबेस मध्ये राहतो. दोन सामान्य पद्धती:

• भाषांतर टेबल: product_translations (product_id, locale, name, description). स्वच्छ आणि अनेक भाषांसाठी स्केल होणारी.
• प्रत्येक फील्डसाठी JSON कॉलम: name: {"en": "...", "fr": "..."}. काही भाषांसाठी सोपी.

भाषांतर गहाळ असताना काय होईल ते ठरवा — सहसा रिकामी जागा दाखवण्याऐवजी मुख्य भाषेवर परत जा.

ईमेल आणि सूचना

प्रत्येक वापरकर्त्याची भाषा साठवा आणि ती ईमेल, सूचना आणि PDF साठीही वापरा. अ‍ॅप भाषांतरित करणे सोपे असते, आणि स्वागत ईमेल अजूनही इंग्रजीत जातो हे विसरणेही सोपे असते.

उपयोगी प्रॉम्प्ट्स

react-i18next सह internationalisation जोडा. प्रत्येक वापरकर्त्याला दिसणारा मजकूर namespaced की वापरून locales/en.json मध्ये हलवा, शब्द जोडण्याऐवजी interpolation आणि बहुवचन नियम वापरा, आणि तारखा, आकडे व किमती current locale नुसार Intl वापरून स्वरूपित करा. अजून कोणताही शब्द बदलू नका.

फ्रेंच आणि जर्मन जोडा. सार्वजनिक मार्केटिंग पानांना /fr/ आणि /de/ URL prefix द्या, इंग्रजी root वर ठेवा, प्रत्येक पानावर hreflang लिंक्स द्या (स्वतःचा संदर्भ आणि x-default यासह), आणि प्रत्येक पानासाठी html lang सेट करा. प्रत्येक भाषेचे स्वतःचे नाव दाखवणारा भाषा बदलण्याचा पर्याय जोडा. लॉग-इन केलेल्या पानांसाठी भाषा वापरकर्त्याच्या प्रोफाइलमध्ये साठवा.

dir="rtl" सह अरबी जोडा: अरबीसाठी dir="rtl" सेट करा, डावे/उजवे मार्जिन आणि पॅडिंग लॉजिकल प्रॉपर्टीजने बदला, दिशा दर्शवणारे आयकॉन्स उलटवा, आणि फॉर्म्स व टेबल्स अजूनही योग्य वाचता येतात का ते तपासा.

टप्प्याटप्प्याने

1. तुमची पहिली अतिरिक्त भाषा निवडा वास्तविक मागणीच्या आधारे — तुमचे अभ्यागत किंवा ग्राहक कुठे आहेत.
2. कोड internationalise करा: मजकूर फाइल्समध्ये हलवा, बहुवचन आणि Intl स्वरूपन जोडा. फक्त इंग्रजीसह पाठवा आणि काहीही बदललेले नाही हे तपासा.
3. सार्वजनिक पानांसाठी URL रचना ठरवा आणि hreflang जोडा.
4. भाषांतर करा: मशीन किंवा AI भाषांतराने मसुदा तयार करा, मग अस्खलित भाषिकाकडून पुनरावलोकन करून घ्या. भाषांतरकारांना संदर्भ द्या — "Book" हा शब्द एका स्क्रीनवर नाम आहे आणि दुसऱ्यावर क्रियापद.
5. डेटाबेस मजकूराचे भाषांतर करा आणि फॉलबॅक ठरवा.
6. उरलेले स्थानिकीकरण करा: ईमेल, एरर संदेश, कायदेशीर पाने, मजकूर असलेल्या प्रतिमा.
7. प्रत्येक भाषा फोन रुंदीवर तपासा, आणि लागू असल्यास उजवीकडून डावीकडे लेआउटसह.
8. प्रक्रिया ठरवा जेणेकरून नवी फीचर्स भाषांतरासह येतील, महिन्यांनंतर नव्हे.

सामान्य चुका

• वाक्ये जोडणे ("You have " + n + " messages"), जे इतर भाषांमध्ये तुटते.
• कंपोनंटमध्ये कोडेड मजकूर राहणे, एरर संदेश आणि प्रमाणीकरण स्ट्रिंग्ससह.
• तारखा आणि किमती हाताने स्वरूपित करणे.
• भाषांसाठी ध्वज वापरणे, आणि लोकांना चुकीच्या आवृत्तीत अडकवणारे स्वयंचलित रीडायरेक्ट.
• शोधात यावीत अशा पानांसाठी सर्व भाषांना एकच URL.
• गहाळ hreflang परत-लिंक्स, त्यामुळे Google नोंदी दुर्लक्षित करते.
• इंटरफेस भाषांतरित करणे पण कंटेंट नाही, किंवा उलट.
• किंमत, कायदेशीर आणि चेकआउट पानांवर पुनरावलोकन न केलेले मशीन भाषांतर.

बहुभाषिक चेकलिस्ट

• वापरकर्त्याला दिसणारे कोणतेही कोडेड स्ट्रिंग नाहीत; बहुवचन नियम आणि प्लेसहोल्डर वापरले
• तारखा, आकडे आणि चलने Intl ने स्वरूपित
• प्रत्येक पानावर मूळ नावांसह भाषा बदलण्याचा पर्याय; निवड लक्षात ठेवली
• सार्वजनिक पानांसाठी प्रत्येक भाषेला वेगळा URL; सक्तीचे रीडायरेक्ट नाहीत
• प्रत्येक आवृत्तीवर hreflang, स्वतःसह आणि x-default
• प्रत्येक पानासाठी html lang (आणि आवश्यक तिथे dir="rtl") सेट
• डेटाबेस कंटेंट भाषांतरित, योग्य फॉलबॅकसह
• ईमेल आणि सूचना वापरकर्त्याच्या भाषेत पाठवल्या जातात
• ग्राहकांना दिसणारा मजकूर अस्खलित भाषिकाकडून पुनरावलोकित

Mythex वर अनेक भाषा

Mythex वर, तुम्ही चॅटमध्ये विचारून भाषा जोडता — वेगळे भाषांतर पॅनल नाही — त्यामुळे वर दिलेले प्रॉम्प्ट जसेच्या तसे चालतात. पहिले internationalisation करा आणि भाषा जोडण्यापूर्वी Preview मध्ये तपासा; हा मोठा रिफॅक्टर आहे, आणि चॅट चेकपॉइंट तुम्हाला काही बिघडल्यास परत जाण्याचा मुद्दा देतो (chat and checkpoints). अ‍ॅपने AI किंवा भाषांतर API द्वारे कंटेंट स्वयंचलितपणे भाषांतरित करावा असे वाटत असल्यास, ते तुमच्या स्वतःच्या API key वापरते, जी प्रोजेक्ट सेटिंग्जमध्ये साठवली जाते (environment variables and secrets); खर्चाबद्दल LLM APIs कसे वापरावे मध्ये माहिती आहे. नव्या भाषा तयार झाल्यावर पुन्हा publish करा.

प्रश्न