React Internationalization (i18n) with react-i18next and Intlayer

Overview

• Intlayer आपको component-level सामग्री घोषणा फ़ाइलों के माध्यम से अनुवाद प्रबंधित करने में सहायता करता है।
• react-i18next एक लोकप्रिय React एकीकरण है जो i18next के लिए useTranslation जैसे हुक प्रदान करता है ताकि आपके घटकों में स्थानीयकृत स्ट्रिंग्स प्राप्त की जा सकें।

जब इनका संयोजन किया जाता है, Intlayer i18next-संगत JSON में शब्दकोशों को निर्यात कर सकता है ताकि react-i18next उन्हें रन-टाइम पर उपयोग कर सके।

Why Use Intlayer with react-i18next?

Intlayer सामग्री घोषणा फ़ाइलें बेहतर डेवलपर अनुभव प्रदान करती हैं क्योंकि वे:

1. फाइल प्लेसमेंट में लचीली
   प्रत्येक सामग्री घोषणा फ़ाइल को उस घटक के पास रखें जिसे इसकी आवश्यकता है। यह संरचना आपको अनुवादों को सह-स्थान पर रखने की अनुमति देती है, जब घटक स्थानांतरित होते हैं या हटा दिए जाते हैं।

   bash

   .└── src    └── components        └── MyComponent            ├── index.content.ts # सामग्री घोषणा फ़ाइल            └── index.tsx

2. केंद्रित अनुवाद
   एकल सामग्री घोषणा फ़ाइल किसी घटक के लिए सभी आवश्यक अनुवादों को एकत्रित करती है, जिससे गायब अनुवादों को पकड़ना आसान हो जाता है।
   TypeScript के साथ, यदि अनुवाद गायब हैं तो आपको संकलन-समय की त्रुटियाँ भी मिलती हैं।

Installation

एक Create React App प्रोजेक्ट में, इन निर्भरता को स्थापित करें:

# npm के साथnpm install intlayer react-i18next i18next i18next-resources-to-backend

# yarn के साथyarn add intlayer react-i18next i18next i18next-resources-to-backend

# pnpm के साथpnpm add intlayer react-i18next i18next i18next-resources-to-backend

ये पैकेज क्या हैं?

• intlayer – i18n कॉन्फ़िगरेशन, सामग्री विवरण, और शब्दकोश आउटपुट बनाने के लिए CLI और कोर पुस्तकालय।
• react-intlayer – Intlayer के लिए React-विशिष्ट एकीकरण, विशेष रूप से शब्दकोशों के निर्माण को स्वचालित करने के लिए कुछ स्क्रिप्ट प्रदान करना।
• react-i18next – i18next के लिए React-विशिष्ट एकीकरण लाइब्रेरी, जिसमें useTranslation हुक शामिल है।
• i18next – अनुवाद प्रबंधन के लिए मौलिक ढांचा।
• i18next-resources-to-backend – एक i18next बैकएंड जो JSON संसाधनों को डायनेमिक रूप से आयात करता है।

Configuring Intlayer to Export i18next Dictionaries

अपने प्रोजेक्ट की जड़ में intlayer.config.ts बनाएं (या अपडेट करें):

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    // अपनी इच्छा से जितने चाहें स्थानीयताएँ जोड़ें    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  content: {    // Intlayer को i18next-संगत JSON बनाने के लिए बताएं    dictionaryOutput: ["i18next"],    // उत्पन्न संसाधनों के लिए एक आउटपुट डायरेक्टरी चुनें    // यह फ़ोल्डर अगर अभी तक मौजूद नहीं है तो बनाया जाएगा।    i18nextResourcesDir: "./i18next/resources",  },};export default config;

नोट: यदि आप TypeScript का उपयोग नहीं कर रहे हैं, तो आप इस कॉन्फ़िग फ़ाइल को .cjs, .mjs, या .js के रूप में बना सकते हैं (और विस्तार से जानने के लिए Intlayer docs देखें)।

Building the i18next Resources

एक बार आपकी सामग्री घोषणाएँ जगह में होने के बाद (अगली अनुभाग), Intlayer निर्माण कमांड चलाएँ:

# npm के साथnpx run intlayer build

# yarn के साथyarn intlayer build

# pnpm के साथpnpm intlayer build

इसका मतलब है कि आपकी i18next संसाधनों का उत्पादन ./i18next/resources डायरेक्टरी के अंदर होगा।

एक सामान्य आउटपुट इस तरह दिखाई दे सकता है:

.└── i18next    └── resources       ├── hi       │   └── my-content.json       ├── fr       │   └── my-content.json       └── es           └── my-content.json

जहाँ प्रत्येक Intlayer घोषणा कुंजी का उपयोग एक i18next नेमस्पेस के रूप में किया जाता है (जैसे, my-content.json)।

Importing Dictionaries into Your react-i18next Configuration

इन संसाधनों को रन-टाइम पर डायनेमिक रूप से लोड करने के लिए, i18next-resources-to-backend का उपयोग करें। उदाहरण के लिए, अपने प्रोजेक्ट में एक i18n.ts (या .js) फ़ाइल बनाएं:

import i18next from "i18next";import { initReactI18next } from "react-i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next  // react-i18next प्लगइन  .use(initReactI18next)  // डायनेमिक रूप से संसाधनों को लोड करें  .use(    resourcesToBackend((language: string, namespace: string) => {      // अपने संसाधनों की डायरेक्टरी के लिए आयात पथ समायोजित करें      return import(`../i18next/resources/${language}/${namespace}.json`);    })  )  // i18next प्रारंभ करें  .init({    // बैकअप स्थानीयता    fallbackLng: "hi",    // आप यहाँ अन्य i18next कॉन्फ़िग विकल्प जोड़ सकते हैं, देखें:    // https://www.i18next.com/overview/configuration-options  });export default i18next;

import i18next from "i18next";import { initReactI18next } from "react-i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next  .use(initReactI18next)  .use(    resourcesToBackend(      (language, namespace) =>        import(`../i18next/resources/${language}/${namespace}.json`)    )  )  .init({    fallbackLng: "hi",  });export default i18next;

फिर, अपने root या index फ़ाइल (जैसे, src/index.tsx) में इस i18n सेटअप को App को रेंडर करने से पहले आयात करें:

import React from "react";import ReactDOM from "react-dom/client";// कुछ और करने से पहले i18n को प्रारंभ करेंimport "./i18n";import App from "./App";ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(  <React.StrictMode>    <App />  </React.StrictMode>);

Creating and Managing Your Content Declarations

Intlayer सामग्री घोषणाओं को ./src के तहत कहीं से भी निकालता है (डिफ़ॉल्ट रूप से)।
यहाँ TypeScript में एक न्यूनतम उदाहरण है:

import { t, type DeclarationContent } from "intlayer";const content = {  // "key" आपके i18next नेमस्पेस होगा (जैसे, "my-component")  key: "my-component",  content: {    // प्रत्येक "t" कॉल एक अलग अनुवाद नोड है    heading: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    description: t({      en: "My i18n description text...",      fr: "Ma description en i18n...",      es: "Mi descripción en i18n...",    }),  },} satisfies DeclarationContent;export default content;

यदि आप JSON, .cjs, या .mjs पसंद करते हैं, तो Intlayer docs देखें।

डिफ़ॉल्ट रूप से, मान्य सामग्री घोषणाएँ फ़ाइल एक्सटेंशन पैटर्न से मेल खाती हैं:
*.content.{ts,tsx,js,jsx,mjs,cjs,json}

Using the Translations in React Components

एक बार जब आपने अपने Intlayer संसाधनों को बना लिया और react-i18next को कॉन्फ़िगर कर लिया, तो आप सीधे react-i18next के useTranslation हुक का उपयोग कर सकते हैं।
उदाहरण के लिए:

import { FC } from "react";import { useTranslation } from "react-i18next";/** * i18next "namespace" Intlayer की `key` है "MyComponent.content.ts" से * इसलिए हम useTranslation() को "my-component" पास करेंगे। */const MyComponent: FC = () => {  const { t } = useTranslation("my-component");  return (    <div>      <h1>{t("heading")}</h1>      <p>{t("description")}</p>    </div>  );};export default MyComponent;

ध्यान दें कि t फ़ंक्शन आपके उत्पन्न JSON के अंदर कीज़ को संदर्भित करता है। एक Intlayer सामग्री प्रविष्टि जिसका नाम heading है, आप t("heading") का उपयोग करेंगे।

Optional: Integrate with Create React App Scripts (CRACO)

react-intlayer एक CRACO-आधारित दृष्टिकोण प्रदान करता है कस्टम बिल्ड और विकास सर्वर कॉन्फ़िगरेशन के लिए। यदि आप Intlayer के निर्माण चरण को निर्बाध रूप से एकीकृत करना चाहते हैं, तो आप:

1. react-intlayer स्थापित करें (यदि आपने नहीं किया है): bash npm install react-intlayer --save-dev

2. अपने package.json स्क्रिप्ट्स को react-intlayer स्क्रिप्ट्स का उपयोग करने के लिए समायोजित करें:

   jsonc

   "scripts": {  "start": "react-intlayer start",  "build": "react-intlayer build",  "transpile": "intlayer build"}

   react-intlayer स्क्रिप्ट्स CRACO पर आधारित हैं। आप intlayer craco प्लगइन के आधार पर अपनी सेटअप को भी कार्यान्वित कर सकते हैं। देखें उदाहरण यहाँ।

अब, npm run build, yarn build, या pnpm build चलाना Intlayer और CRA बिल्ड को ट्रिगर करता है।

TypeScript Configuration

Intlayer आपके सामग्री के लिए स्वचालित रूप से उत्पन्न टाइप परिभाषाएँ प्रदान करता है। यह सुनिश्चित करने के लिए कि TypeScript उन्हें उठाता है, types (या यदि आपने अलग तरीके से कॉन्फ़िगर किया है तो types) अपने tsconfig.json include ऐरे में जोड़ें:

{  "compilerOptions": {    // ...  },  "include": ["src", "types"],}

यह TypeScript को आपके अनुवादों के आकार का अनुमान लगाने के लिए अनुमति देगा ताकि बेहतर ऑटो-पूर्णता और त्रुटि पहचान हो सके।

Git Configuration

यह अनुशंसा की जाती है कि आप Intlayer से स्वत: उत्पन्न फ़ाइलों और फ़ोल्डरों को अनदेखा करें। अपने .gitignore में यह पंक्ति जोड़ें:

# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayeri18next

आप आमतौर पर इन संसाधनों या .intlayer आंतरिक निर्माण आर्टिफैक्ट्स को कमिट नहीं करते हैं, क्योंकि इन्हें प्रत्येक बिल्ड पर पुनः उत्पन्न किया जा सकता है।