Getting Started Internationalizing (i18n) with Intlayer and Vite and React
What is Intlayer?
Intlayer एक नवोन्मेषी, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) पुस्तकालय है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
Intlayer के साथ, आप:
- डेकरटिव डिक्शनरीज़ का उपयोग करके अनुवादों को आसानी से प्रबंधित करें।
- सक्रिय रूप से स्थानीयकरण मेटाडेटा, रूट और सामग्री।
- टाइपस्क्रिप्ट समर्थन सुनिश्चित करें स्वचालित रूप से उत्पन्न प्रकारों के साथ, ऑटो-पूर्णता और त्रुटि पहचान में सुधार।
- उन्नत सुविधाओं का लाभ उठाएं, जैसे गतिशील स्थानीय भाषा पहचान और स्विचिंग।
Step-by-Step Guide to Set Up Intlayer in a Vite and React Application
Step 1: Install Dependencies
आवश्यक पैकेजों को npm का उपयोग करके स्थापित करें:
1npm install intlayer react-intlayer1yarn add intlayer react-intlayer1pnpm add intlayer react-intlayerStep 2: Configuration of your project
अपने अनुप्रयोग की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएँ:
1// intlayer.config.ts
2
3import { Locales, type IntlayerConfig } from "intlayer";
4
5const config: IntlayerConfig = {
6 internationalization: {
7 locales: [
8 Locales.ENGLISH,
9 Locales.FRENCH,
10 Locales.SPANISH,
11 // आपके अन्य स्थानीयकरण
12 ],
13 defaultLocale: Locales.ENGLISH,
14 },
15};
16
17export default config;सभी उपलब्ध पैरामीटर देखने के लिए, configuration documentation here पर जाएं।
Step 3: Integrate Intlayer in Your Vite Configuration
अपनी कॉन्फ़िग्रेशन में intlayer प्लगइन जोड़ें।
1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react-swc";
3import { intLayerPlugin } from "react-intlayer/vite";
4
5// https://vitejs.dev/config/
6export default defineConfig({
7 plugins: [react(), intLayerPlugin()],
8});Step 4: Declare Your Content
अपने सामग्री डिक्शनरीज़ को बनाएँ और प्रबंधित करें:
1// src/app.content.tsx
2import { t, type DeclarationContent } from "intlayer";
3import { type ReactNode } from "react";
4
5const appContent = {
6 key: "app",
7 content: {
8 viteLogo: t({
9 en: "Vite logo",
10 fr: "Logo Vite",
11 es: "Logo Vite",
12 }),
13 reactLogo: t({
14 en: "React logo",
15 fr: "Logo React",
16 es: "Logo React",
17 }),
18
19 title: "Vite + React",
20
21 count: t({
22 en: "count is ",
23 fr: "le compte est ",
24 es: "el recuento es ",
25 }),
26
27 edit: t<ReactNode>({
28 // यदि आप अपने सामग्री में एक React नोड उपयोग कर रहे हैं तो React को आयात करना न भूलें
29 en: (
30 <>
31 Edit <code>src/App.tsx</code> and save to test HMR
32 </>
33 ),
34 fr: (
35 <>
36 Éditez <code>src/App.tsx</code> et enregistrez pour tester HMR
37 </>
38 ),
39 es: (
40 <>
41 Edita <code>src/App.tsx</code> y guarda para probar HMR
42 </>
43 ),
44 }),
45
46 readTheDocs: t({
47 en: "Click on the Vite and React logos to learn more",
48 fr: "Cliquez sur les logos Vite et React pour en savoir plus",
49 es: "Haga clic en los logotipos de Vite y React para obtener más información",
50 }),
51 },
52} satisfies DeclarationContent;
53
54export default appContent;नोट: यदि आपकी सामग्री फ़ाइल में TSX कोड शामिल है, तो आपको अपने सामग्री फ़ाइल में import React from "react"; को आयात करने पर विचार करना चाहिए।
See how to declare your Intlayer declaration files पर जाएँ।
Step 5: Utilize Intlayer in Your Code
अपने अनुप्रयोग में अपने सामग्री डिक्शनरीज़ का उपयोग करें:
1import { useState } from "react";
2import reactLogo from "./assets/react.svg";
3import viteLogo from "/vite.svg";
4import "./App.css";
5import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
6import { IntlayerProvider, useIntlayer } from "react-intlayer";
7
8function AppContent() {
9 const [count, setCount] = useState(0);
10 const content = useIntlayer("app");
11
12 return (
13 <>
14 <div>
15 <a href="https://vitejs.dev" target="_blank">
16 <img src={viteLogo} className="logo" alt={content.viteLogo.value} />
17 </a>
18 <a href="https://react.dev" target="_blank">
19 <img
20 src={reactLogo}
21 className="logo react"
22 alt={content.reactLogo.value}
23 />
24 </a>
25 </div>
26 <h1>{content.title}</h1>
27 <div className="card">
28 <button onClick={() => setCount((count) => count + 1)}>
29 {content.count}
30 {count}
31 </button>
32 <p>{content.edit}</p>
33 </div>
34 <p className="read-the-docs">{content.readTheDocs}</p>
35 <div className="absolute bottom-5 right-5 z-50">
36 <LocaleSwitcher />
37 </div>
38 </>
39 );
40}
41
42function App() {
43 return (
44 <IntlayerProvider>
45 <AppContent />
46 </IntlayerProvider>
47 );
48}
49
50export default App;नोट: यदि आप अपने सामग्री का उपयोग किसी string विशेषता जैसे alt, title, href, aria-label, आदि में करना चाहते हैं, तो आपको फ़ंक्शन के मान को कॉल करना होगा, जैसे:
tsx1<img src={content.image.src.value} alt={content.image.value} />
(Optional) Step 6: Change the language of your content
अपने सामग्री की भाषा बदलने के लिए, आप useLocale हुक द्वारा प्रदान की गई setLocale फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपके अनुप्रयोग की स्थानीय भाषा सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।
1import { Locales } from "intlayer";
2import { useLocale } from "react-intlayer";
3
4const LocaleSwitcher = () => {
5 const { setLocale } = useLocale();
6
7 return (
8 <button onClick={() => setLocale(Locales.English)}>
9 Change Language to English
10 </button>
11 );
12};(Optional) Step 7: Add localized Routing to your application
इस कदम का उद्देश्य प्रत्येक भाषा के लिए अद्वितीय रूट बनाना है। यह SEO और SEO-अनुकूल URLs के लिए फायदेमंद होता है। उदाहरण:
1// /dashboard
2// /es/dashboard
3// /fr/dashboardडिफ़ॉल्ट रूप से, रूट्स डिफ़ॉल्ट स्थानीय भाषा के लिए पूर्वसर्गित नहीं होते हैं। यदि आप डिफ़ॉल्ट स्थानीय भाषा के लिए पूर्वसर्गित करना चाहते हैं, तो आप अपनी कॉन्फ़िगरेशन में middleware.prefixDefault विकल्प को true सेट कर सकते हैं। जानकारी के लिए configuration documentation देखें।
अपने अनुप्रयोग में स्थानीयकृत राउटिंग जोड़ने के लिए, आप एक LocaleRouter घटक बना सकते हैं जो आपके अनुप्रयोग के रूट्स को लपेटता है और स्थानीयकृत राउटिंग को संभालता है। यहाँ एक उदाहरण है जो React Router का उपयोग करता है:
1// आवश्यक निर्भरताओं और कार्यों को आयात करना
2import { Locales, getConfiguration, getPathWithoutLocale } from "intlayer"; // 'intlayer' से उपयोगिता कार्य और प्रकार
3import { FC, PropsWithChildren } from "react"; // कार्यात्मक घटकों और संपत्तियों के लिए React प्रकार
4import { IntlayerProvider } from "react-intlayer"; // अंतर्राष्ट्रीयकरण संदर्भ के लिए प्रदाता
5import {
6 BrowserRouter,
7 Routes,
8 Route,
9 useParams,
10 Navigate,
11 useLocation,
12} from "react-router-dom"; // नेविगेशन प्रबंधन के लिए राउटर घटक
13
14// Intlayer से कॉन्फ़िगरेशन को निकालना
15const { internationalization, middleware } = getConfiguration();
16const { locales, defaultLocale } = internationalization;
17
18/**
19 * एक घटक जो स्थानीयकरण को संभालता है और बच्चों को उपयुक्त स्थानीय संदर्भ के साथ लपेटता है।
20 * यह URL-आधारित स्थानीय पहचान और मान्यता का प्रबंधन करता है।
21 */
22const AppLocalized: FC<PropsWithChildren> = ({ children }) => {
23 const path = useLocation().pathname; // वर्तमान URL पथ प्राप्त करना
24 const { locale } = useParams<{ locale: Locales }>(); // URL से स्थानीय भाषा पैरामीटर निकालना
25
26 // वर्तमान स्थानीय भाषा निर्धारित करना, यदि उपलब्ध नहीं है तो डिफ़ॉल्ट पर वापस लौटें
27 const currentLocale = locale ?? defaultLocale;
28
29 // एक आधार पथ बनाने के लिए पथ से स्थानीय भाषा प्रीफ़िक्स को हटाना
30 const pathWithoutLocale = getPathWithoutLocale(
31 path // वर्तमान URL पथ
32 );
33
34 /**
35 * यदि middleware.prefixDefault सत्य है, तो डिफ़ॉल्ट स्थानीय भाषा हमेशा पूर्वसर्गित होनी चाहिए।
36 */
37 if (middleware.prefixDefault) {
38 // स्थानीय भाषा की मान्यता करना
39 if (!locale || !locales.includes(locale)) {
40 // अपडेटेड पाथ के साथ डिफ़ॉल्ट स्थानीय भाषा पर रीडायरेक्ट करना
41 return (
42 <Navigate
43 to={`/${defaultLocale}/${pathWithoutLocale}`}
44 replace // नए के साथ वर्तमान इतिहास प्रविष्टि को बदलें
45 />
46 );
47 }
48
49 // बच्चों को IntlayerProvider के साथ लपेटना और वर्तमान स्थानीय भाषा सेट करना
50 return (
51 <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
52 );
53 } else {
54 /**
55 * जब middleware.prefixDefault मिथ्या हो, तो डिफ़ॉल्ट स्थानीय भाषा को पूर्वसर्गित नहीं किया जाता है।
56 * सुनिश्चित करना कि वर्तमान स्थानीय भाषा मान्य है और डिफ़ॉल्ट स्थानीय भाषा नहीं है।
57 */
58 if (
59 currentLocale.toString() !== defaultLocale.toString() &&
60 !locales
61 .filter(
62 (locale) => locale.toString() !== defaultLocale.toString() // डिफ़ॉल्ट स्थानीय भाषा को छोड़ें
63 )
64 .includes(currentLocale) // जांचें कि वर्तमान स्थानीय भाषा मान्य स्थानीय भाषाओं की सूची में है
65 ) {
66 // बिना स्थानीय प्रीफ़िक्स के पथ पर रीडायरेक्ट करें
67 return <Navigate to={pathWithoutLocale} replace />;
68 }
69
70 // बच्चों को IntlayerProvider के साथ लपेटना और वर्तमान स्थानीय भाषा सेट करना
71 return (
72 <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
73 );
74 }
75};
76
77/**
78 * एक राउटर घटक जो स्थानीय विशिष्ट रूट सेट करता है।
79 * यह नेविगेशन प्रबंधन और स्थानीयकृत घटकों को रेंडर करने के लिए React Router का उपयोग करता है।
80 */
81export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
82 <BrowserRouter>
83 <Routes>
84 <Route
85 // रूट पैटर्न जो स्थानीय भाषा को कैप्चर करता है (जैसे, /en/, /fr/) और सभी बाद के पथों से मेल खाता है
86 path="/:locale/*"
87 element={<AppLocalized>{children}</AppLocalized>} // स्थानीय प्रबंधन के साथ बच्चों को लपेटता है
88 />
89
90 {
91 // यदि डिफ़ॉल्ट स्थानीय भाषा को पूर्वसर्गित करना निष्क्रिय है, तो रूट पथ पर बच्चों को सीधे रेंडर करें
92 !middleware.prefixDefault && (
93 <Route
94 path="*"
95 element={<AppLocalized>{children}</AppLocalized>} // स्थानीय प्रबंधन के साथ बच्चों को लपेटता है
96 />
97 )
98 }
99 </Routes>
100 </BrowserRouter>
101);साथ ही, आप अपने अनुप्रयोग में सर्वर-साइड रूटिंग जोड़ने के लिए intLayerMiddlewarePlugin का उपयोग कर सकते हैं। यह प्लगइन वर्तमान स्थानीय भाषा का पता लगाने के लिए URL का उपयोग करेगा और उपयुक्त स्थानीय कुकी सेट करेगा। यदि कोई स्थानीय भाषा निर्धारित नहीं होती है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त स्थानीय भाषा का निर्धारण करेगा। यदि कोई स्थानीय भाषा नहीं होती है, तो यह डिफ़ॉल्ट स्थानीय भाषा पर रीडायरेक्ट करेगा।
1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react-swc";
3import { intLayerPlugin, intLayerMiddlewarePlugin } from "react-intlayer/vite";
4
5// https://vitejs.dev/config/
6export default defineConfig({
7 plugins: [react(), intLayerPlugin(), intLayerMiddlewarePlugin()],
8});(Optional) Step 8: Change the URL when the locale changes
जब स्थानीय भाषा बदलती है तो URL बदलने के लिए, आप useLocale हुक द्वारा प्रदान किए गए onLocaleChange प्रॉप का उपयोग कर सकते हैं। साथ ही, आप URL पथ को अपडेट करने के लिए react-router-dom से useLocation और useNavigate हुक का उपयोग कर सकते हैं।
1import { Locales, getLocalizedUrl } from "intlayer";
2import { useLocale } from "react-intlayer";
3import { useLocation, useNavigate } from "react-router-dom";
4
5const LocaleSwitcher = () => {
6 const location = useLocation(); // वर्तमान URL पथ प्राप्त करें। उदाहरण: /fr/about
7 const navigate = useNavigate();
8
9 const changeUrl = (locale: Locales) => {
10 // अपडेटेड स्थानीय भाषा के साथ URL बनाना
11 // उदाहरण: /es/about जब स्थानीय भाषा स्पेनिश पर सेट हो
12 const pathWithLocale = getLocalizedUrl(location.pathname, locale);
13
14 // URL पथ अपडेट करें
15 navigate(pathWithLocale);
16 };
17
18 const { setLocale } = useLocale({
19 onLocaleChange: changeUrl,
20 });
21
22 return (
23 <button onClick={() => setLocale(Locales.English)}>
24 Change Language to English
25 </button>
26 );
27};Configure TypeScript
Intlayer टाइपस्क्रिप्ट के फायदों को प्राप्त करने के लिए मॉड्यूल वृद्धि का उपयोग करता है और आपके कोडबेस को मजबूत बनाता है।
सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में स्वचालित रूप से उत्पन्न प्रकार शामिल हैं।
1// tsconfig.json
2
3{
4 // आपकी कस्टम कॉन्फ़िग
5 include: [
6 "src",
7 "types", // <- ऑटो जनरेटेड प्रकार शामिल करें
8 ],
9}Git Configuration
Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की सिफारिश की जाती है। इससे आप उन्हें अपने Git भंडारण में कमिट करने से बच सकते हैं।
इसका करने के लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
1# Ignore the files generated by Intlayer
2.intlayerअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंक