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

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

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

मौजूदा ऐप्स के लिए अनुशंसित दृष्टिकोण compat एडॉप्टर है: @intlayer/next-intl स्थापित करें, जो next-intl के बिल्कुल समान API को उजागर करता है लेकिन सभी अनुवाद कार्य को हूड के तहत Intlayer को सौंपता है।

आप अपने मौजूदा useTranslations, getTranslations, NextIntlClientProvider और दोस्त रखते हैं — एकमात्र परिवर्तन import पथ है। कॉल signature, prop shapes, या component structure के कोई refactoring आवश्यक नहीं है।

समय के साथ आप optionally individual फाइलों को Intlayer के रicher .content.ts format में माइग्रेट कर सकते हैं visual editor, CMS, और per-component content scoping को अनलॉक करने के लिए — लेकिन वह चरण पूरी तरह से वैकल्पिक है और वृद्धिशील रूप से किया जा सकता है।

विषय सूची

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

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

1. 1

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

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

   bash

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

   कोड कॉपी करें

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

   npx intlayer-cli init --interactive

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

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

   bash

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

   कोड कॉपी करें

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

   npm install intlayer next-intlayer @intlayer/next-intl @intlayer/sync-json-plugin

   next-intl को स्थापित रखें — यह अभी भी URL routing के लिए आवश्यक है (createNavigation, createMiddleware, Link, redirect, usePathname, useRouter)। compat एडॉप्टर routing परत को नहीं replace करता।

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

   source एक locale को इसकी JSON फाइल पथ पर मैप करता है। location Intlayer को बताता है कि परिवर्तनों की निगरानी के लिए कौन सा फोल्डर देखना चाहिए। format: 'icu' विकल्प सुनिश्चित करता है कि ICU placeholders जैसे {name} और {count, plural, one {# item} other {# items}} को सही ढंग से पार्स किया जाता है।

   configuration विकल्पों की पूरी सूची के लिए, configuration documentation देखें।

3. 3

   Next.js में Intlayer Plugin जोड़ें

   अपने मौजूदा Next.js config को @intlayer/next-intl/plugin से createNextIntlPlugin से लपेटें। यह wrapper withIntlayer को compose करता है और आपके लिए next-intl → @intlayer/next-intl एलिएस को register करता है:

   next.config.ts

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

   कोड कॉपी करें

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

   import type { NextConfig } from "next";
   import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
   
   const withIntlayer = createNextIntlPlugin();
   
   const nextConfig: NextConfig = {
     /* आपके मौजूदा config विकल्प */
   };
   
   export default withIntlayer(nextConfig);

   createNextIntlPlugin() withIntlayer को लपेटता है, स्वचालित रूप से Webpack या Turbopack को detect करता है, content watching, dictionary compilation को wire करता है, और — महत्वपूर्ण रूप से — module एलिएस को injects करता है ताकि आपके मौजूदा import … from 'next-intl' कॉल को build समय पर transparently @intlayer/next-intl पर रीडायरेक्ट किया जा सके। routing entry next-intl/routing को असली package की ओर इंगित रहता है। कोई स्रोत फाइल परिवर्तन आवश्यक नहीं है।

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

   आपको अब getRequestConfig या loadMessages की आवश्यकता नहीं है। next-intl के साथ, आपको एक src/i18n.ts फाइल लिखनी थी जो getRequestConfig के माध्यम से हर request पर JSON message bundles को load करती थी। Intlayer सभी dictionaries को build समय पर compile करता है, इसलिए कोई runtime loading चरण नहीं है। आप उस फाइल को पूरी तरह से delete कर सकते हैं (या यदि आप अभी भी createNavigation routing parts का उपयोग करते हैं तो केवल वह भाग रखें)।

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

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

tsx

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

कोड कॉपी करें

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

// Client component — 'about' एक registered dictionary key हैconst t = useTranslations("about");t("counter.label"); // ✓ autocompletedt("does.not.exist"); // ✗ TypeScript error// Server componentconst t = await getTranslations("about");t("counter.label"); // ✓ typed

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

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

1. 4

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

   वैकल्पिक

   createNextIntlPlugin() wrapper पहले से ही bundler स्तर पर next-intl → @intlayer/next-intl aliasing को हैंडल करता है। अगर आप अपनी स्रोत फाइलों में निर्भरता को स्पष्ट बनाना पसंद करते हैं (और सादे withIntlayer प्लग-इन का उपयोग करते हैं), तो आप imports को manually नाम दे सकते हैं:

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

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

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

   पहले	बाद में
   import { useTranslations } from 'next-intl'	import { useTranslations } from '@intlayer/next-intl'
   import { useLocale } from 'next-intl'	import { useLocale } from '@intlayer/next-intl'
   import { NextIntlClientProvider } from 'next-intl'	import { NextIntlClientProvider } from '@intlayer/next-intl'
   import { getTranslations } from 'next-intl/server'	import { getTranslations } from '@intlayer/next-intl/server'
   import { getLocale } from 'next-intl/server'	import { getLocale } from '@intlayer/next-intl/server'
   import { setLocale } from 'next-intl/server'	import { setLocale } from '@intlayer/next-intl/server'
   import { getMessages } from 'next-intl/server'	import { getMessages } from '@intlayer/next-intl/server'

   हमेशा असली next-intl से routing imports को रखें — compat एडॉप्टर नहीं URL routing परत को replace करता है:

   ts

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

   कोड कॉपी करें

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

   // ✅ हमेशा इन्हें असली 'next-intl' से रखेंimport { createNavigation } from "next-intl/routing";import { createMiddleware } from "next-intl/server";import { defineRouting } from "next-intl/routing";

   वैकल्पिक रूप से, आप @intlayer/next-intl/routing से defineRouting का उपयोग कर सकते हैं जो अपने intlayer.config.ts से locale config को स्वचालित रूप से merge करता है।

2. 5

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

   वैकल्पिक

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

   bash

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

   कोड कॉपी करें

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

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

   अपनी .env फाइल में OPENAI_API_KEY (या अपने पसंद के प्रदाता की key) जोड़ें, फिर अपने intlayer.config.ts को extend करें:

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

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

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

एक बार @intlayer/next-intl मौजूद होने के बाद, निम्नलिखित next-intl boilerplate को हटाया जा सकता है:

जब आप आगे बढ़ने के लिए तैयार हों, Intlayer स्वचालित रूप से आपके कोडबेस में कहीं भी सभी .content.ts और .content.json फाइलों को खोजता है (डिफ़ॉल्ट रूप से, ./src के अंदर कहीं भी)। आप एक about.content.ts फाइल को अपने about/page.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 — Next.js के लिए full setup guide: intlayerwithnextjs_16.md