इस स्टार्टर के बारे में
यह एक स्टार्टर टेम्पलेट है जो यह दर्शाता है कि बहुभाषी अनुप्रयोग बनाने के लिए Next.js App Router के साथ better-i18n का उपयोग कैसे करें।
तकनीकी स्टैक
Next.js 15
App Router + सर्वर कंपोनेंट
@better-i18n/next
CDN-संचालित अनुवाद
next-intl
टाइप-सुरक्षित अनुवाद हुक
Tailwind CSS 4
यूटिलिटी-फर्स्ट स्टाइलिंग
TypeScript 5
पूर्ण टाइप सुरक्षा
CDN अनुवाद आर्किटेक्चर
अधिक जानेंbetter-i18n एक CDN-प्रथम आर्किटेक्चर का उपयोग करती है। जब आप डैशबोर्ड में अनुवाद प्रकाशित करते हैं, तो वे Cloudflare के वैश्विक edge नेटवर्क पर तैनात होते हैं जो दुनिया भर में 50ms से कम डिलीवरी प्रदान करता है।
डैशबोर्ड से प्रकाशन
अनुवाद better-i18n डैशबोर्ड से Cloudflare R2 स्टोरेज में प्रकाशित किए जाते हैं।
Edge CDN डिलीवरी
अनुवाद बंडल वैश्विक edge स्थानों से 50ms से कम लोड समय के साथ परोसे जाते हैं।
सर्वर-साइड रेंडरिंग
Next.js सर्वर कंपोनेंट SEO-अनुकूल HTML के लिए getMessages() के माध्यम से अनुरोध के समय अनुवाद प्राप्त करते हैं।
क्लाइंट हाइड्रेशन
BetterI18nProvider बिना लेआउट शिफ्ट के क्लाइंट साइड पर अनुवादों को हाइड्रेट करता है। useSetLocale() तत्काल स्विचिंग सक्षम करता है।
SDK डिफ़ॉल्ट रूप से मैनिफेस्ट डेटा को 5 मिनट और अनुवाद संदेशों को 30 सेकंड के लिए कैश करता है। प्रकाशन पर कैश अमान्यीकरण स्वचालित रूप से होता है।
इस स्टार्टर में उपयोग किए गए SDK APIs
पूर्ण API संदर्भ| API | प्रकार | उद्देश्य |
|---|---|---|
createI18n() | Config | प्रोजेक्ट सेटिंग्स के साथ SDK प्रारंभ करें |
i18n.betterMiddleware() | Server | URL, कुकी या Accept-Language से भाषा की पहचान |
i18n.getMessages(locale) | Server | किसी भाषा के लिए सभी अनुवाद लोड करें |
i18n.getLocales() | Server | CDN से उपलब्ध भाषाएँ प्राप्त करें |
BetterI18nProvider | Client | अनुवादों के लिए React संदर्भ |
useTranslations(ns) | Client | टाइप-सुरक्षित अनुवाद पहुँच |
useSetLocale() | Client | तुरंत भाषा बदलें |
useManifestLanguages() | Client | CDN से डायनामिक भाषा खोज |
यह कैसे काम करता है
अनुवाद better-i18n डैशबोर्ड में प्रबंधित होते हैं और CDN के माध्यम से डिलीवर किए जाते हैं। मिडलवेयर URL, कुकी या ब्राउज़र भाषा से उपयोगकर्ता का लोकेल डिटेक्ट करता है। संदेश सर्वर साइड लोड होते हैं और क्लायंट कंपोनेंट के लिए BetterI18nProvider को पास किए जाते हैं।
उपलब्ध लोकेल
ये लोकेल सर्वर-साइड API i18n.getLocales() का उपयोग करके बिल्ड समय पर CDN से प्राप्त किए जाते हैं।
भाषाएँ प्रबंधित करें better-i18n डैशबोर्ड.