पुर्तगाली में यहां क्लिक करने के बारे में और जानें

हाल ही में, मैंने डैशबोर्ड जैसा प्रोजेक्ट बनाने के लिए एस्ट्रो सीखना शुरू किया।

मैं वास्तव में इस परियोजना में अंतर्राष्ट्रीयकरण (i18n) लागू करना चाहता हूं - विचार यह है कि हर कोई अपनी भाषा की परवाह किए बिना इसका उपयोग करने में सक्षम होना चाहिए।

संकट

एस्ट्रो का i18n सपोर्ट काफी अच्छा है। यह फ़ाइल/फ़ोल्डर संरचना के आधार पर रूटिंग के साथ Next.js या किसी अन्य फ्रेमवर्क के समान काम करता है।

इसलिए, यदि हम एक पेज अंग्रेजी में और वही पेज पुर्तगाली में चाहते हैं, तो हम अपनी फाइलों को इस तरह व्यवस्थित कर सकते हैं:

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

और प्रत्येक पृष्ठ की अपनी i18n स्ट्रिंग्स हैं—अच्छा!

लेकिन यहीं से मेरी समस्या शुरू होती है: मैं अपने सभी पृष्ठों का क्लोन नहीं बनाना चाहता; मैं केवल उन पृष्ठों पर स्ट्रिंग्स बदलना चाहता हूं।

मुझे /[any-भाषा-ध्वज]/सभी-मेरे-मार्गों जैसा कुछ चाहिए।

आप पूछ सकते हैं: "React-intl जैसी किसी चीज़ का उपयोग क्यों न करें?" मेरा उत्तर यह है कि मैं एस्ट्रो के इंजन का पूरी तरह से लाभ उठाना चाहता हूं, विशेष रूप से एसएसजी/एसएसआर के लिए, और किसी भी क्लाइंट घटक से बचना चाहता हूं। आम तौर पर, ये फ्रेमवर्क रिएक्ट कॉन्टेक्स्ट का उपयोग करते हैं, जो केवल क्लाइंट साइड पर प्रस्तुत किया जाता है।

कोशिश करना और असफल होना

सबसे पहले, मैंने i18n के बारे में एस्ट्रो रेसिपी पढ़ी और इस समस्या को हल करने के लिए कुछ सामुदायिक पुस्तकालयों की जाँच की।

पहली लाइब्रेरी जिसका मैंने परीक्षण किया वह एस्ट्रो-आई18नेक्स्ट थी, और यह बिल्कुल वैसी ही लग रही थी जैसी मुझे चाहिए थी!

कॉन्फ़िगरेशन फ़ाइल में एक सरणी के आधार पर, एस्ट्रो-आई18नेक्स्ट बिल्ड समय पर मेरे i18n पेज बनाता है, इसलिए मुझे केवल एक बार कोड करने की आवश्यकता है और पेजों की क्लोनिंग के बारे में चिंता करने की ज़रूरत नहीं है।

समस्या यह है कि एस्ट्रो-आई18नेक्स्ट संग्रहीत या अब अनुरक्षित नहीं है। बहुत सारे मुद्दे हैं, और आखिरी प्रतिबद्धता एक साल पहले खत्म हो गई थी।

समाधान

अन्य पुस्तकालयों (एस्ट्रो-आई18एन का सम्मानजनक उल्लेख) को आज़माने के बाद, मुझे पैराग्लाइड मिला, और यह मेरे प्रोजेक्ट के लिए गेम-चेंजर था।

मैंने पैराग्लाइड को चुना क्योंकि:

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

नोट: आप पैराग्लाइड का उपयोग JS प्रोजेक्ट में भी कर सकते हैं, और यह Next.js को भी सपोर्ट करता है।

इंस्टॉलेशन और कॉन्फ़िगरेशन के बाद, मैंने अपने संदेशों का उपयोग इस तरह किया:

---
import * as m from "../paraglide/messages.js";
---

{m.hello({ name: "Alan" })}

हालाँकि, इससे मेरी रूटिंग समस्या का समाधान नहीं हुआ—मैं अभी भी उस प्रत्येक भाषा के लिए अपने पृष्ठों की क्लोनिंग कर रहा था जिसे मैं जोड़ना चाहता था।

इसे हल करने के लिए, मैंने अपने प्रोजेक्ट को रूट रूट में डायनेमिक रूट का उपयोग करने के लिए बदल दिया, इसलिए मेरे सभी रूट अब भाषा ध्वज से शुरू होते हैं।

मेरी फ़ोल्डर संरचना इस में बदल गई:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

इस परिवर्तन के बाद, पैराग्लाइड स्वचालित रूप से रूट पैरामीटर से भाषा प्राप्त कर सकता है:

• http://localhost:4321/en/लॉगिन
• http://localhost:4321/pt-br/login

अब, मैं astro.config.ts में सेट करके और अपनी स्ट्रिंग फ़ाइल का अनुवाद करके एक नई भाषा जोड़ सकता हूं।

लेकिन मुझे अभी भी दो और मुद्दे सुलझाने हैं:

1. जब उपयोगकर्ता पहली बार भाषा ध्वज के बिना http://localhost:4321/ तक पहुंचता है।
2. यदि उपयोगकर्ता किसी विशिष्ट रूट पर भाषा बदलता है, तो मुझे उन्हें उसी रूट पर रखना होगा (उदाहरण के लिए, /en/create-account को /pt-br/create-account या /pt-br/criar पर रीडायरेक्ट करना चाहिए) -conta).

भाषा पुनर्निर्देशन के लिए मिडलवेयर

भाषा पुनर्निर्देशन के पहले मुद्दे को हल करने के लिए, मैंने एस्ट्रो मिडलवेयर का उपयोग किया।

src/middleware/index.ts में, मैंने यह कोड जोड़ा:

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

वर्तमान रूट के साथ भाषा चयनकर्ता

जब उपयोगकर्ता भाषाएं बदलते हैं तो उन्हें उसी रूट पर रखने के लिए, मैंने यह घटक जोड़ा:

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

• Ir para Português
• Go to English

इसके अतिरिक्त, हम पैराग्लाइड संदेश फ़ंक्शन में दूसरे पैरामीटर का उपयोग करके, इन संदेशों का अनुवाद भी कर सकते हैं:

• {m.goToLanguage(undefined, { languageTag: 'pt-br' })}
• {m.goToLanguage(undefined, { languageTag: 'en' })}

विचार

मैं अपने समाधान को सर्वश्रेष्ठ नहीं मानता, खासकर जब से मैं अभी भी एस्ट्रो सीख रहा हूं, इसलिए अन्य समाधान भी हो सकते हैं। यदि आप किसी के बारे में जानते हैं, तो कृपया टिप्पणी करें, और मैं उन्हें आज़माऊंगा :)

इस लेख को पढ़ने के लिए धन्यवाद! यदि आपके कोई प्रश्न हैं, तो कृपया टिप्पणी करें, मुझे उत्तर देने में खुशी होगी।