react-i18next / i18next से Intlayer में माइग्रेशन

react-i18next / i18next से Intlayer में माइग्रेट करने के लिए?

माइग्रेशन रणनीति

react-i18next / i18next से Intlayer में माइग्रेट करने के लिए दो पूरक रणनीतियां हैं:

1. Compat एडॉप्टर (मौजूदा ऐप्स के लिए अनुशंसित) — @intlayer/react-i18next (React घटकों के लिए) और/या @intlayer/i18next (core i18n instance के लिए) स्थापित करें। ये पैकेज react-i18next / i18next के बिल्कुल समान API को उजागर करते हैं लेकिन सभी अनुवाद कार्य को हूड के तहत Intlayer को सौंपते हैं। आप अपने मौजूदा useTranslation, Trans, withTranslation, i18next.t() कॉल रखते हैं — एकमात्र परिवर्तन import पथ है।

2. पूर्ण माइग्रेशन — धीरे-धीरे react-i18next API को native Intlayer hooks (useIntlayer, IntlayerProvider) और सह-स्थित सामग्री के साथ .content.ts फाइलों में बदलें।

यह गाइड रणनीति 1 को पहले कवर करता है (drop-in compat एडॉप्टर), फिर वैकल्पिक पूर्ण माइग्रेशन के माध्यम से चलता है।

विषय सूची

त्वरित माइग्रेशन

निम्नलिखित चरण अपने मौजूदा react-i18next ऐप को बिना कोड परिवर्तन के Intlayer पर चलाने के लिए आवश्यक न्यूनतम हैं।

1. 1

   डिपेंडेंसी स्थापित करें

   Intlayer मुख्य पैकेज और compat एडॉप्टर स्थापित करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npx intlayer init --interactive
   

   --interactive फ्लैग वैकल्पिक है। अगर आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।

   यह कमांड आपके वातावरण का पता लगाएगा और आवश्यक पैकेज स्थापित करेगा। उदाहरण के लिए:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npm install intlayer react-intlayer @intlayer/react-i18next @intlayer/i18next @intlayer/sync-json-plugin
   

   आप react-i18next और i18next को स्थापित रख सकते हैं — compat एडॉप्टर उन्हें TypeScript प्रकारों के लिए devDependencies / optional peerDependencies के रूप में उपयोग करते हैं। आपको कोई package.json peers बदलने की आवश्यकता नहीं है।

2. 2

   Intlayer को कॉन्फ़िगर करें

   intlayer init कमांड एक स्टार्टर intlayer.config.ts बनाता है। अपने मौजूदा locales से मेल खाने के लिए इसे अपडेट करें और syncJSON प्लग-इन को अपनी संदेश फाइलों पर इंगित करें:

   intlayer.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // अपने सभी मौजूदा locales यहां जोड़ें
       ],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         // react-i18next प्लेसहोल्डर सिंटैक्स से मेल खाता है: {{name}}
         format: "i18next",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
   };
   
   export default config;
   

   source एक locale को इसकी JSON फाइल पथ पर मैप करता है। location Intlayer को बताता है कि परिवर्तनों की निगरानी के लिए कौन सा फोल्डर देखना चाहिए। format: 'i18next' विकल्प सुनिश्चित करता है कि {{name}} जैसे placeholders को सही ढंग से पार्स किया जाता है।

3. 3

   अपने Bundler में Intlayer Plugin जोड़ें

   अपने मौजूदा bundler config को compat प्लग-इन से लपेटें। यह core Intlayer प्लग-इन को compose करता है, content watching को wire करता है, और — महत्वपूर्ण रूप से — module एलिएस को injects करता है ताकि आपके मौजूदा import … from 'react-i18next' (और 'i18next') कॉल को build समय पर transparently @intlayer/react-i18next / @intlayer/i18next पर रीडायरेक्ट किया जा सके। कोई स्रोत फाइल परिवर्तन आवश्यक नहीं है।

   Vite के लिए:

   vite.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react";
   import { reactI18nextVitePlugin } from "@intlayer/react-i18next/plugin";
   
   export default defineConfig({
     plugins: [react(), reactI18nextVitePlugin()],
   });
   

   reactI18nextVitePlugin() vite-intlayer के intlayer() प्लग-इन को लपेटता है और react-i18next / i18next एलिएस को जोड़ता है। vite-intlayer से सादे intlayer() प्लग-इन का उपयोग करने से dictionaries को संकलित किया जाता है लेकिन नहीं वह एलिएस जोड़ता है — आप तब imports को @intlayer/* पर manually नाम दें (चरण 4 देखें)।

   Next.js के लिए:

   अगर आप next-i18next (Pages Router integration) का उपयोग कर रहे हैं, तो @intlayer/next-i18next और next-intlayer स्थापित करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   npm install @intlayer/next-i18next next-intlayer
   

   फिर compat प्लग-इन को अपने next.config.ts में जोड़ें (यह next-i18next / react-i18next / i18next एलिएस को इंजेक्ट करता है):

   next.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import type { NextConfig } from "next";
   import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
   
   const withIntlayer = createNextI18nPlugin();
   
   const nextConfig: NextConfig = {/* आपके विकल्प */};
   
   export default withIntlayer(nextConfig);
   

   आपको अब i18next.init() या manual provider bootstrapping की आवश्यकता नहीं है। Intlayer सभी dictionaries को build समय पर compile करता है, इसलिए कोई runtime loading चरण नहीं है। एलिएस किए गए provider initialization को आपके लिए हैंडल करता है।

त्वरित माइग्रेशन के लिए बस इतना ही। आपका ऐप अब Intlayer पर चलता है जबकि हर react-i18next import और API को बरकरार रखता है।

Typed अनुवाद कुंजियां — स्वचालित। एक बार Intlayer आपके dictionaries को compile कर देने के बाद, useTranslation और getFixedT आपकी वास्तविक सामग्री के विरुद्ध typed होते हैं। कुंजियां आपके IDE में autocompleted होती हैं और invalid paths build समय पर TypeScript त्रुटियां पैदा करते हैं — कोई अतिरिक्त setup आवश्यक नहीं है।

tsx

सामग्री कॉपी करें

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

// 'about' एक registered dictionary key है → t() केवल वैध dot-paths स्वीकार करता है
const { t } = useTranslation("about");
t("counter.label"); // ✓ autocompleted
t("does.not.exist"); // ✗ TypeScript error

// Server-side (i18next instance)
const tAbout = i18n.getFixedT(null, "about");
tAbout("counter.label"); // ✓ typed

पूर्ण माइग्रेशन

नीचे दिए गए चरण वैकल्पिक हैं और वृद्धिशील रूप से किए जा सकते हैं। वे पूर्ण Intlayer फीचर सेट को अनलॉक करते हैं: visual editor, CMS, typed content फाइलें, AI-powered अनुवाद, और बहुत कुछ।

1. 4

   स्पष्ट import नाम देना (वैकल्पिक)

   वैकल्पिक

   Intlayer प्लग-इन पहले से ही bundler स्तर पर aliasing को हैंडल करते हैं। अगर आप अपनी स्रोत फाइलों में निर्भरता को स्पष्ट बनाना पसंद करते हैं, तो आप imports को manually नाम दे सकते हैं:

   सभी तालिका सामग्री दिखाएं

   सभी तालिका सामग्री दिखाएं

   सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें

   पहले	बाद में
   import { useTranslation } from 'react-i18next'	import { useTranslation } from '@intlayer/react-i18next'
   import { Trans } from 'react-i18next'	import { Trans } from '@intlayer/react-i18next'
   import { withTranslation } from 'react-i18next'	import { withTranslation } from '@intlayer/react-i18next'
   import { I18nextProvider } from 'react-i18next'	import { I18nextProvider } from '@intlayer/react-i18next'
   import { initReactI18next } from 'react-i18next'	import { initReactI18next } from '@intlayer/react-i18next'
   import i18next from 'i18next'	import i18next from '@intlayer/i18next'
   import { createInstance } from 'i18next'	import { createInstance } from '@intlayer/i18next'
   import { t } from 'i18next'	import { t } from '@intlayer/i18next'

   Next.js (next-i18next) के लिए:

   सभी तालिका सामग्री दिखाएं

   सभी तालिका सामग्री दिखाएं

   सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें

   पहले	बाद में
   import { serverSideTranslations } from 'next-i18next/serverSideTranslations'	import { serverSideTranslations } from '@intlayer/next-i18next'
   import { appWithTranslation } from 'next-i18next'	import { appWithTranslation } from '@intlayer/next-i18next'
   import { useTranslation } from 'next-i18next'	import { useTranslation } from '@intlayer/next-i18next'

2. 5

   AI-Powered अनुवाद ऑटोमेशन को सक्षम करें

   वैकल्पिक

   एक बार Intlayer वायर्ड होने के बाद, अनुपलब्ध अनुवादों को स्वचालित रूप से भरने के लिए इसके CLI का उपयोग करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   # अनुपलब्ध अनुवादों के लिए परीक्षण (CI में जोड़ें)
   npx intlayer test
   
   # AI के साथ अनुपलब्ध अनुवाद भरें
   npx intlayer fill
   

   intlayer.config.ts में AI कॉन्फ़िगरेशन जोड़ें:

   intlayer.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

   कोड को क्लिपबोर्ड पर कॉपी करें

   import { Locales, type IntlayerConfig } from "intlayer";
   import { syncJSON } from "@intlayer/sync-json-plugin";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     plugins: [
       syncJSON({
         format: "i18next",
         source: ({ locale }) => `./src/locales/${locale}.json`,
         location: "src/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // default
       // model: "gpt-4o-mini",   // default
     },
   };
   
   export default config;
   

   सभी उपलब्ध विकल्पों के लिए Intlayer CLI documentation देखें।

माइग्रेशन के बाद आप क्या हटा सकते हैं

एक बार compat एडॉप्टर मौजूद होने के बाद, निम्नलिखित react-i18next / i18next boilerplate को हटाया जा सकता है:

जब आप आगे बढ़ने के लिए तैयार हों, Intlayer स्वचालित रूप से आपके कोडबेस में कहीं भी सभी .content.ts और .content.json फाइलों को खोजता है (डिफ़ॉल्ट रूप से, ./src के अंदर कहीं भी)। आप एक my-component.content.ts फाइल को अपने MyComponent.tsx के बगल में रख सकते हैं और Intlayer इसे बिल्ड समय पर किसी अतिरिक्त कॉन्फ़िगरेशन के बिना उठाएगा — कोई imports, कोई पंजीकरण, कोई केंद्रीकृत index फाइल आवश्यक नहीं है। यह अनुवाद को पेजों और घटकों के साथ सह-स्थित करना पूरी तरह से घर्षण रहित बनाता है।

TypeScript को कॉन्फ़िगर करें

Intlayer module augmentation का उपयोग करता है आपके अनुवाद कुंजियों के लिए पूर्ण TypeScript intellisense प्रदान करने के लिए। सुनिश्चित करें कि आपका tsconfig.json auto-generated प्रकारों को शामिल करता है:

{
  // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन
  "include": [
    // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन
    ".intlayer/**/*.ts", // auto-generated प्रकारों को शामिल करें
  ],
}

Git कॉन्फ़िगरेशन

Intlayer के generated directory को अपने .gitignore में जोड़ें:

# Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें
.intlayer

आगे बढ़ें

• Visual Editor — अपने ब्राउज़र में translations को visually प्रबंधित करें: Intlayer Visual Editor
• CMS — सामग्री को बाहरी रूप से प्रबंधित करें: Intlayer CMS
• VS Code Extension — autocompletion और real-time अनुवाद त्रुटि पहचान प्राप्त करें: Intlayer VS Code Extension
• CLI Reference — CLI commands की पूर्ण सूची: Intlayer CLI
• Intlayer with React — React के लिए full setup guide: intlayerwithvite+react.md
• Intlayer with Next.js — Next.js के लिए full setup guide: intlayerwithnextjs_16.md