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

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

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

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

1. Compat एडॉप्टर (मौजूदा ऐप्स के लिए अनुशंसित) — @intlayer/next-i18next, @intlayer/react-i18next, और @intlayer/i18next स्थापित करें। ये पैकेज उनके counterparts के बिल्कुल समान API को उजागर करते हैं लेकिन सभी अनुवाद कार्य को हूड के तहत Intlayer को सौंपते हैं। आप अपने मौजूदा useTranslation, appWithTranslation, serverSideTranslations कॉल, और Next.js Pages routing को unchanged रखते हैं — एकमात्र परिवर्तन initialization है।

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

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

विषय सूची

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

निम्नलिखित चरण अपने मौजूदा Next.js Pages Router ऐप को बिना आपके पेजों और घटकों में कोड परिवर्तन के Intlayer पर चलाने के लिए आवश्यक न्यूनतम हैं।

1. 1

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

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

   bash

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

   कोड कॉपी करें

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

   npx intlayer-cli init --interactive

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

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

   bash

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

   कोड कॉपी करें

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

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

   आप माइग्रेशन के दौरान next-i18next, react-i18next, और i18next को सुरक्षित रूप से स्थापित रख सकते हैं, हालांकि एक बार एलिएस होने के बाद आप उन्हें हटा देंगे।

2. 2

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

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

   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({
         // i18next प्लेसहोल्डर सिंटैक्स से मेल खाता है: {{name}}
         format: "i18next",
         source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
         location: "public/locales",
       }),
     ],
   };
   
   export default config;

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

3. 3

   Next.js कॉन्फ़िगरेशन को अपडेट करें

   अपने मौजूदा next.config.ts (या .js) को @intlayer/next-i18next/plugin से createNextI18nPlugin से लपेटें। यह wrapper withIntlayer को compose करता है और next-i18next / react-i18next / i18next → @intlayer/* एलिएस को इंजेक्ट करता है, ताकि आपके मौजूदा import { useTranslation } from 'next-i18next' कॉल को build समय पर transparently रीडायरेक्ट किया जा सके। कोई स्रोत फाइल परिवर्तन आवश्यक नहीं है।

   next.config.ts

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

   कोड कॉपी करें

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

   import type { NextConfig } from "next";
   import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
   // आप next-i18next.config.js से आयात किए गए i18n कॉन्फ़िगरेशन को हटा सकते हैं
   // import { i18n } from './next-i18next.config';
   
   const withIntlayer = createNextI18nPlugin();
   
   const nextConfig: NextConfig = {
     // Intlayer हूड के तहत Next.js i18n routing को प्रबंधित करता है,
     // इसलिए आपको यहां i18n object को पास करने की आवश्यकता नहीं है।
   };
   
   export default withIntlayer(nextConfig);

   आपको अब next-i18next.config.js की आवश्यकता नहीं है। Intlayer सभी dictionaries को build समय पर compile करता है, locale detection, routing, और dictionary loading को seamlessly हैंडल करता है।

   next-intlayer/server से सादे withIntlayer को प्राथमिकता देते हैं? यह आपके dictionaries को compile करता है लेकिन नहीं next-i18next / react-i18next / i18next एलिएस को जोड़ता है — आप तब imports को @intlayer/* पर manually नाम दें (चरण 4 देखें)।

त्वरित माइग्रेशन के लिए बस इतना ही। आपका Next.js ऐप अब Intlayer पर चलता है जबकि हर useTranslation, serverSideTranslations, और appWithTranslation कॉल को बरकरार रखता है।

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

tsx

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

कोड कॉपी करें

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

// Pages Router — 'about' एक registered dictionary key हैconst { t } = useTranslation("about");t("counter.label"); // ✓ autocompletedt("does.not.exist"); // ✗ TypeScript error// getStaticProps / getServerSideProps (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 { 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'
   import { useTranslation } from 'react-i18next'	import { useTranslation } from '@intlayer/react-i18next'

   ये drop-in replacements हैं — कॉल signature, arguments, या return प्रकार में कोई परिवर्तन आवश्यक नहीं है।

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: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
         location: "public/locales",
       }),
     ],
     ai: {
       apiKey: process.env.OPENAI_API_KEY,
       // provider: "openai",     // default
       // model: "gpt-4o-mini",   // default
     },
   };
   
   export default config;

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

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

एक बार compat एडॉप्टर मौजूद होने के बाद, निम्नलिखित next-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 Next.js (Pages Router) — Next.js के लिए full setup guide: intlayerwithnextjspagerouter.md