@intlayer/docs 7.0.4-canary.0 → 7.0.4

package/blog/hi/intlayer_with_next-i18next.md

@@ -1,367 +1,142 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2025-10-29
 title: Intlayer और next-i18next
-description: Next.js एप्लिकेशन के लिए next-i18next को एक्सटेंशन करें
+description: एक व्यापक Next.js अंतरराष्ट्रीयकरण समाधान के लिए Intlayer को next-i18next के साथ एकीकृत करें
 keywords:
   - i18next
   - next-i18next
   - Intlayer
-  - अंतर्राष्ट्रीयकरण
-  - दस्तावेज़ीकरण
+  - अंतरराष्ट्रीयकरण
+  - ब्लॉग
   - Next.js
-  - JavaScript
-  - React
+  - जावास्क्रिप्ट
+  - रिएक्ट
 slugs:
   - blog
   - intlayer-with-next-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSON प्लगइन में बदलाव और व्यापक पुनर्लेखन
 ---
 
-# Next.js अंतर्राष्ट्रीयकरण (i18n) next-i18next और Intlayer के साथ
+# next-i18next और Intlayer के साथ Next.js अंतरराष्ट्रीयकरण (i18n)
 
-next-i18next और Intlayer दोनों ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) ढांचे हैं जो Next.js अनुप्रयोगों के लिए डिज़ाइन किए गए हैं। उनका उपयोग सॉफ़्टवेयर परियोजनाओं में अनुवाद, स्थानीयकरण और भाषा स्विचिंग के प्रबंधन के लिए किया जाता है।
+## सामग्री सूची
 
-दोनों समाधानों में तीन मुख्य अवधारणाएँ शामिल हैं:
+<TOC/>
 
-1. **सामग्री घोषणा**: आपके अनुप्रयोग की अनुवाद योग्य सामग्री को परिभाषित करने की विधि।
-   - `i18next` के मामले में `resource` के नाम से जाना जाता है, सामग्री घोषणा एक संरचित JSON ऑब्जेक्ट है जिसमें एक या अधिक भाषाओं में अनुवाद के लिए कुंजी-मूल्य जोड़ होते हैं। अधिक जानकारी के लिए [i18next डॉक्यूमेंटेशन](https://www.i18next.com/translation-function/essentials) देखें।
-   - `Intlayer` के मामले में `content declaration file` के नाम से जाना जाता है, सामग्री घोषणा एक JSON, JS, या TS फ़ाइल हो सकती है जो संरचित डेटा को निर्यात करती है। अधिक जानकारी के लिए [Intlayer डॉक्यूमेंटेशन](https://intlayer.org/fr/doc/concept/content) देखें।
+## next-i18next क्या है?
 
-2. **उपकरण**: अनुप्रयोग में सामग्री घोषणाओं को बनाने और व्याख्या करने के लिए उपकरण, जैसे `getI18n()`, `useCurrentLocale()`, या `useChangeLocale()` next-i18next के लिए, और `useIntlayer()` या `useLocale()` Intlayer के लिए।
+**next-i18next** Next.js अनुप्रयोगों के लिए सबसे लोकप्रिय अंतरराष्ट्रीयकरण (i18n) फ्रेमवर्क में से एक है। शक्तिशाली **i18next** इकोसिस्टम के ऊपर निर्मित, यह Next.js परियोजनाओं में अनुवाद, स्थानीयकरण, और भाषा स्विचिंग को प्रबंधित करने के लिए एक व्यापक समाधान प्रदान करता है।
 
-3. **प्लगइन्स और मिडलवेयर**: URL रिडायरेक्शन, बंडल ऑप्टिमाइजेशन, और अधिक के प्रबंधन के लिए सुविधाएँ, जैसे next-i18next के लिए `next-i18next/middleware` या Intlayer के लिए `intlayerMiddleware`।
+हालांकि, next-i18next के साथ कुछ चुनौतियाँ भी हैं:
 
-## Intlayer बनाम i18next: महत्वपूर्ण मतभेद
+- **जटिल कॉन्फ़िगरेशन**: next-i18next को सेटअप करने के लिए कई कॉन्फ़िगरेशन फ़ाइलों और सर्वर-साइड तथा क्लाइंट-साइड i18n इंस्टेंस की सावधानीपूर्वक सेटअप की आवश्यकता होती है।
+- **विखरे हुए अनुवाद**: अनुवाद फ़ाइलें आमतौर पर कंपोनेंट्स से अलग निर्देशिकाओं में संग्रहीत होती हैं, जिससे स्थिरता बनाए रखना कठिन हो जाता है।
+- **मैनुअल नेमस्पेस प्रबंधन**: डेवलपर्स को नेमस्पेस को मैन्युअली प्रबंधित करना पड़ता है और अनुवाद संसाधनों के सही लोडिंग को सुनिश्चित करना होता है।
+- **सीमित प्रकार सुरक्षा**: TypeScript समर्थन के लिए अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता होती है और यह अनुवादों के लिए स्वचालित प्रकार जनरेशन प्रदान नहीं करता है।
 
-i18next और Intlayer के बीच मतभेदों का पता लगाने के लिए हमारे [next-i18next बनाम next-intl बनाम Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/i18next_vs_next-intl_vs_intlayer.md) के ब्लॉग पोस्ट पर जाएँ।
+## Intlayer क्या है?
 
-## Intlayer के साथ next-i18next शब्दकोश कैसे उत्पन्न करें
+**Intlayer** एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण लाइब्रेरी है जिसे पारंपरिक i18n समाधानों की कमियों को दूर करने के लिए डिज़ाइन किया गया है। यह Next.js अनुप्रयोगों में सामग्री प्रबंधन के लिए एक आधुनिक दृष्टिकोण प्रदान करता है।
 
-### Intlayer को next-i18next के साथ उपयोग करने का कारण?
+हमारे [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md) ब्लॉग पोस्ट में next-intl के साथ एक ठोस तुलना देखें।
 
-Intlayer सामग्री घोषणा फ़ाइलें आमतौर पर बेहतर डेवलपर अनुभव प्रदान करती हैं। वे दो मुख्य लाभों के कारण अधिक लचीली और प्रबंधन योग्य हैं:
+## Intlayer को next-i18next के साथ क्यों संयोजित करें?
 
-1. **लचीला स्थान**: एक Intlayer सामग्री घोषणा फ़ाइल अनुप्रयोग की फ़ाइल वृक्ष में कहीं भी रखी जा सकती है, जिससे अप्रयुक्त सामग्री घोषणाओं को छोड़े बिना दोहराए गए या हटाए गए घटकों का प्रबंधन सरल हो जाता है।
+जबकि Intlayer एक उत्कृष्ट स्टैंडअलोन i18n समाधान प्रदान करता है (हमारे [Next.js इंटीग्रेशन गाइड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_with_nextjs_16.md) देखें), आप इसे कई कारणों से next-i18next के साथ संयोजित करना चाह सकते हैं:
 
-   उदाहरण फ़ाइल संरचनाएँ:
+1. **मौजूदा कोडबेस**: आपके पास एक स्थापित next-i18next कार्यान्वयन है और आप धीरे-धीरे Intlayer के बेहतर डेवलपर अनुभव की ओर माइग्रेट करना चाहते हैं।
+2. **पुराने आवश्यकताएँ**: आपके प्रोजेक्ट को मौजूदा i18next प्लगइन्स या वर्कफ़्लोज़ के साथ संगतता की आवश्यकता है।
+3. **टीम की परिचितता**: आपकी टीम next-i18next के साथ सहज है लेकिन बेहतर सामग्री प्रबंधन चाहती है।
 
-   ```bash codeFormat="typescript"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts # सामग्री घोषणा फ़ाइल
-               └── index.tsx
-   ```
+**इसके लिए, Intlayer को next-i18next के लिए एक एडाप्टर के रूप में लागू किया जा सकता है जो CLI या CI/CD पाइपलाइनों में आपके JSON अनुवादों को स्वचालित करने, आपके अनुवादों का परीक्षण करने, और भी बहुत कुछ करने में मदद करता है।**
 
-   ```bash codeFormat="esm"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.mjs # सामग्री घोषणा फ़ाइल
-               └── index.mjx
-   ```
+यह गाइड आपको दिखाता है कि कैसे Intlayer की श्रेष्ठ कंटेंट घोषणा प्रणाली का लाभ उठाते हुए next-i18next के साथ संगतता बनाए रखी जाए।
 
-   ```bash codeFormat="cjs"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.cjs # सामग्री घोषणा फ़ाइल
-               └── index.cjx
-   ```
+---
 
-   ```bash codeFormat="json"
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.json # सामग्री घोषणा फ़ाइल
-               └── index.jsx
-   ```
+## Intlayer को next-i18next के साथ सेटअप करने के लिए चरण-दर-चरण गाइड
 
-2. **केंद्रीकृत अनुवाद**: Intlayer सभी अनुवादों को एकल फ़ाइल में संग्रहीत करता है, यह सुनिश्चित करता है कि कोई अनुवाद गायब नहीं है। जब TypeScript का उपयोग किया जाता है, तो गायब अनुवादों का स्वचालित रूप से पता लगाया जाता है और उन्हें त्रुटियों के रूप में रिपोर्ट किया जाता है।
+### चरण 1: निर्भरताएँ इंस्टॉल करें
 
-### स्थापना
+अपनी पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
 ```bash packageManager="npm"
-npm install intlayer i18next next-i18next i18next-resources-to-backend
+npm install intlayer @intlayer/sync-json-plugin
 ```
 
-```bash packageManager="yarn"
-yarn add intlayer i18next next-i18next i18next-resources-to-backend
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
 ```
 
-```bash packageManager="pnpm"
-pnpm add intlayer i18next next-i18next i18next-resources-to-backend
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### Intlayer को i18next शब्दकोश निर्यात करने के लिए कॉन्फ़िगर करना
+**पैकेज व्याख्याएँ:**
+
+- **intlayer**: सामग्री घोषणा और प्रबंधन के लिए कोर लाइब्रेरी
+- **next-intlayer**: Next.js इंटीग्रेशन लेयर बिल्ड प्लगइन्स के साथ
+- **i18next**: कोर i18n फ्रेमवर्क
+- **next-i18next**: i18next के लिए Next.js रैपर
+- **i18next-resources-to-backend**: i18next के लिए डायनामिक रिसोर्स लोडिंग
+- **@intlayer/sync-json-plugin**: Intlayer सामग्री घोषणाओं को i18next JSON फॉर्मेट में सिंक करने के लिए प्लगइन
 
-> i18next संसाधनों का निर्यात अन्य ढांचों के साथ 1:1 संगतता सुनिश्चित नहीं करता है। समस्याओं को कम करने के लिए Intlayer-आधारित कॉन्फ़िगरेशन से चिपके रहना अनुशंसित है।
+### चरण 2: JSON को रैप करने के लिए Intlayer प्लगइन लागू करें
 
-i18next संसाधनों को निर्यात करने के लिए, एक `intlayer.config.ts` फ़ाइल में Intlayer को कॉन्फ़िगर करें। उदाहरण कॉन्फ़िगरेशन:
+अपने समर्थित लोकल्स को परिभाषित करने के लिए एक Intlayer कॉन्फ़िगरेशन फ़ाइल बनाएं:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+**यदि आप i18next के लिए JSON शब्दकोश भी एक्सपोर्ट करना चाहते हैं**, तो `syncJSON` प्लगइन जोड़ें:
+
+```typescript fileName="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,
   },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
-
-export default config;
-```
+`syncJSON` प्लगइन स्वचालित रूप से JSON को रैप करेगा। यह JSON फ़ाइलों को पढ़ेगा और लिखेगा बिना सामग्री संरचना को बदले।
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
+यदि आप JSON को intlayer सामग्री घोषणा फ़ाइलों (`.content` फ़ाइलें) के साथ सह-अस्तित्व में रखना चाहते हैं, तो Intlayer इस प्रकार आगे बढ़ेगा:
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["i18next"],
-    i18nextResourcesDir: "./i18next/resources",
-  },
-};
+    1. JSON और सामग्री घोषणा फ़ाइलों दोनों को लोड करेगा और उन्हें intlayer शब्दकोश में परिवर्तित करेगा।
+    2. यदि JSON और सामग्री घोषणा फ़ाइलों के बीच कोई संघर्ष होता है, तो Intlayer उन सभी शब्दकोशों को मर्ज करने की प्रक्रिया करेगा। यह प्लगइन्स की प्राथमिकता और सामग्री घोषणा फ़ाइल की प्राथमिकता पर निर्भर करता है (सभी कॉन्फ़िगर करने योग्य हैं)।
 
-module.exports = config;
-```
+यदि JSON का अनुवाद करने के लिए CLI या CMS का उपयोग करके परिवर्तन किए जाते हैं, तो Intlayer नई अनुवादों के साथ JSON फ़ाइल को अपडेट करेगा।
 
-यहाँ आपके दस्तावेज़ के शेष भागों का निरंतरता और सुधार है:
+`syncJSON` प्लगइन के बारे में अधिक विवरण देखने के लिए, कृपया [syncJSON प्लगइन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/plugins/sync-json.md) देखें।
 
 ---
 
-### आपके i18next कॉन्फ़िगरेशन में शब्दकोशों को आयात करना
-
-उत्पन्न संसाधनों को आपके i18next कॉन्फ़िगरेशन में आयात करने के लिए, `i18next-resources-to-backend` का उपयोग करें। नीचे उदाहरण दिए गए हैं:
-
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next.use(
-  resourcesToBackend(
-    (language: string, namespace: string) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
-
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next.use(
-  resourcesToBackend(
-    (language, namespace) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
-
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next.use(
-  resourcesToBackend(
-    (language, namespace) =>
-      import(`../i18next/resources/${language}/${namespace}.json`)
-  )
-);
-```
-
-### सामग्री घोषणा
-
-विभिन्न प्रारूपों में सामग्री घोषणा फ़ाइलों के उदाहरण:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const content = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-module.exports = {
-  key: "my-content",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my-content",
-  "content": {
-    "myTranslatedContent": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Hello World",
-        "fr": "Bonjour le monde",
-        "es": "Hola Mundo"
-      }
-    }
-  }
-}
-```
-
-### next-i18next संसाधनों का निर्माण
-
-next-i18next संसाधनों का निर्माण करने के लिए, निम्नलिखित कमांड चलाएँ:
-
-```bash packageManager="npm"
-npx run intlayer build
-```
-
-```bash packageManager="yarn"
-yarn intlayer build
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer build
-```
-
-यह `./i18next/resources` निर्देशिका में संसाधन उत्पन्न करेगा। अपेक्षित आउटपुट:
-
-```bash
-.
-└── i18next
-    └── resources
-       └── en
-           └── my-content.json
-       └── fr
-           └── my-content.json
-       └── es
-           └── my-content.json
-```
-
-नोट: i18next namespace Intlayer घोषणा कुंजी के अनुरूप है।
-
-### Next.js प्लगइन का कार्यान्वयन
-
-एक बार कॉन्फ़िगर हो जाने के बाद, जब भी Intlayer सामग्री घोषणा फ़ाइलें अपडेट होती हैं, तब आपके i18next संसाधनों को फिर से बनाने के लिए Next.js प्लगइन को लागू करें।
-
-```typescript fileName="next.config.mjs"
-import { withIntlayer } from "next-intlayer/server";
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default withIntlayer(nextConfig);
-```
+## Git कॉन्फ़िगरेशन
 
-### Next.js घटकों में सामग्री का उपयोग करना
+जनरेट की गई फ़ाइलों को संस्करण नियंत्रण से बाहर करें:
 
-Next.js प्लगइन को लागू करने के बाद, आप अपने घटकों में सामग्री का उपयोग कर सकते हैं:
-
-```typescript fileName="src/components/myComponent/index.tsx" codeFormat="typescript"
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-const IndexPage: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-
-export default IndexPage;
+```plaintext fileName=".gitignore"
+# Intlayer द्वारा जनरेट की गई फ़ाइलों को अनदेखा करें
+.intlayer
+intl
 ```
 
-```jsx fileName="src/components/myComponent/index.mjx" codeFormat="esm"
-import { useTranslation } from "react-i18next";
+ये फ़ाइलें बिल्ड प्रक्रिया के दौरान स्वचालित रूप से पुनः उत्पन्न होती हैं और इन्हें आपके रिपॉजिटरी में कमिट करने की आवश्यकता नहीं है।
 
-const IndexPage = () => {
-  const { t } = useTranslation();
+### VS कोड एक्सटेंशन
 
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/myComponent/index.cjx" codeFormat="commonjs"
-const { useTranslation } = require("react-i18next");
-
-const IndexPage = () => {
-  const { t } = useTranslation();
+बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS कोड एक्सटेंशन** इंस्टॉल करें:
 
-  return (
-    <div>
-      <h1>{t("my-content.title")}</h1>
-      <p>{t("my-content.description")}</p>
-    </div>
-  );
-};
-```
+[VS कोड मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)