@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/docs/hi/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: React और Next.js में एक कंपोनेंट को बहुभाषी (i18n लाइब्रेरी) कैसे बनाएं
+description: Intlayer के साथ एक बहुभाषी React या Next.js कंपोनेंट बनाने के लिए स्थानीयकृत सामग्री को घोषित और पुनः प्राप्त करना सीखें।
+keywords:
+  - i18n
+  - component
+  - react
+  - multilingual
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Intlayer के साथ एक कंपोनेंट को बहुभाषी (i18n) कैसे बनाएं
+
+यह गाइड दो सामान्य सेटअप में एक UI कंपोनेंट को बहुभाषी बनाने के लिए न्यूनतम कदम दिखाता है:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+आप पहले अपनी सामग्री घोषित करेंगे, फिर इसे अपने कंपोनेंट में पुनः प्राप्त करेंगे।
+
+## 1) अपनी सामग्री घोषित करें (React और Next.js दोनों के लिए साझा)
+
+अपने कंपोनेंट के पास एक सामग्री घोषणा फ़ाइल बनाएं। यह अनुवादों को उस स्थान के करीब रखता है जहाँ उनका उपयोग होता है और टाइप सुरक्षा सक्षम करता है।
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+यदि आप कॉन्फ़िगरेशन फ़ाइलों को प्राथमिकता देते हैं तो JSON भी समर्थित है।
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) अपनी सामग्री पुनः प्राप्त करें
+
+### केस A — React ऐप (Vite/SPA)
+
+डिफ़ॉल्ट तरीका: कुंजी द्वारा पुनः प्राप्त करने के लिए `useIntlayer` का उपयोग करें। यह कंपोनेंट्स को हल्का और टाइप किया हुआ रखता है।
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+सर्वर-साइड रेंडरिंग या बाहरी प्रदाता: `react-intlayer/server` का उपयोग करें और आवश्यक होने पर स्पष्ट `locale` पास करें।
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+वैकल्पिक: यदि आप कॉल साइट पर संरचना को एक साथ रखना पसंद करते हैं, तो `useDictionary` पूरी घोषित वस्तु पढ़ सकता है।
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### मामला बी — Next.js (ऐप राउटर)
+
+डेटा सुरक्षा और प्रदर्शन के लिए सर्वर कंपोनेंट्स को प्राथमिकता दें। सर्वर फाइलों में `next-intlayer/server` से `useIntlayer` का उपयोग करें, और क्लाइंट कंपोनेंट्स में `next-intlayer` से `useIntlayer` का उपयोग करें।
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+टिप: पेज मेटाडेटा और SEO के लिए, आप `getIntlayer` का उपयोग करके कंटेंट भी प्राप्त कर सकते हैं और `getMultilingualUrls` के माध्यम से बहुभाषी URL जनरेट कर सकते हैं।
+
+## क्यों Intlayer का कंपोनेंट दृष्टिकोण सबसे अच्छा है
+
+- **समीपता**: कंटेंट घोषणाएँ कंपोनेंट्स के पास रहती हैं, जिससे विचलन कम होता है और डिज़ाइन सिस्टम्स में पुन: उपयोग बेहतर होता है।
+- **टाइप सुरक्षा**: कुंजियाँ और संरचनाएँ मजबूत प्रकारित होती हैं; गायब अनुवाद बिल्ड-टाइम पर ही सामने आते हैं, रनटाइम पर नहीं।
+- **सर्वर-प्रथम**: बेहतर सुरक्षा और प्रदर्शन के लिए सर्वर कंपोनेंट्स में मूल रूप से काम करता है; क्लाइंट हुक्स सहज बने रहते हैं।
+- **ट्री-शेकिंग**: केवल वही कंटेंट जो कंपोनेंट द्वारा उपयोग किया जाता है, उसे बंडल किया जाता है, जिससे बड़े ऐप्स में पेलोड छोटे रहते हैं।
+- **डीएक्स और टूलिंग**: बिल्ट-इन मिडलवेयर, SEO हेल्पर्स, और वैकल्पिक विजुअल एडिटर/एआई अनुवाद रोज़मर्रा के काम को सरल बनाते हैं।
+
+Next.js-केंद्रित राउंडअप में तुलना और पैटर्न देखें: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## संबंधित गाइड और संदर्भ
+
+- React सेटअप (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack स्टार्ट: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js सेटअप: https://intlayer.org/doc/environment/nextjs
+- क्यों Intlayer बनाम next-intl बनाम next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+इन पृष्ठों में एंड-टू-एंड सेटअप, प्रोवाइडर्स, रूटिंग, और SEO हेल्पर्स शामिल हैं।

package/docs/hi/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: आधिकारिक VS कोड एक्सटेंशन
-description: अपने विकास वर्कफ़्लो को बेहतर बनाने के लिए VS कोड में Intlayer एक्सटेंशन का उपयोग करना सीखें। स्थानीयकृत सामग्री के बीच तेजी से नेविगेट करें और अपनी शब्दकोशों का कुशलतापूर्वक प्रबंधन करें।
+description: अपने विकास वर्कफ़्लो को बेहतर बनाने के लिए VS कोड में Intlayer एक्सटेंशन का उपयोग कैसे करें, यह जानें। स्थानीयकृत सामग्री के बीच तेजी से नेविगेट करें और अपनी शब्दकोशों का कुशलतापूर्वक प्रबंधन करें।
 keywords:
   - VS कोड एक्सटेंशन
   - Intlayer
@@ -23,92 +23,36 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) **Intlayer** के लिए आधिकारिक विजुअल स्टूडियो कोड एक्सटेंशन है, जिसे आपके प्रोजेक्ट्स में स्थानीयकृत सामग्री के साथ काम करते समय डेवलपर अनुभव को बेहतर बनाने के लिए डिज़ाइन किया गया है।
 
-![Intlayer VS कोड एक्सटेंशन](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS कोड एक्सटेंशन](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 एक्सटेंशन लिंक: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## विशेषताएँ
 
-### त्वरित नेविगेशन
-
-**परिभाषा पर जाएं समर्थन** – `useIntlayer` कुंजी पर `⌘ + क्लिक` (Mac) या `Ctrl + क्लिक` (Windows/Linux) का उपयोग करें ताकि संबंधित सामग्री फ़ाइल तुरंत खुल जाए।  
-**सहज एकीकरण** – **react-intlayer** और **next-intlayer** प्रोजेक्ट्स के साथ बिना किसी परेशानी के काम करता है।  
-**बहुभाषी समर्थन** – विभिन्न भाषाओं में स्थानीयकृत सामग्री का समर्थन करता है।  
-**VS कोड एकीकरण** – VS कोड के नेविगेशन और कमांड पैलेट के साथ सहजता से एकीकृत होता है।
-
-### शब्दकोश प्रबंधन कमांड
-
-अपने कंटेंट शब्दकोशों का सीधे VS कोड से प्रबंधन करें:
-
-- **शब्दकोश बनाएँ** – अपने प्रोजेक्ट संरचना के आधार पर कंटेंट फ़ाइलें उत्पन्न करें।
-- **शब्दकोश पुश करें** – नवीनतम शब्दकोश सामग्री को अपने रिपॉजिटरी में अपलोड करें।
-- **शब्दकोश पुल करें** – अपने रिपॉजिटरी से नवीनतम शब्दकोश सामग्री को अपने स्थानीय पर्यावरण में सिंक करें।
-- **शब्दकोश भरें** – अपने प्रोजेक्ट से सामग्री के साथ शब्दकोशों को भरें।
-- **शब्दकोश परीक्षण करें** – गुम या अधूरी अनुवादों की पहचान करें।
+![शब्दकोश भरें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-### कंटेंट घोषणा जनरेटर
+- **तत्काल नेविगेशन** – `useIntlayer` कुंजी पर क्लिक करने पर सही सामग्री फ़ाइल पर तेजी से जाएं।
+- **शब्दकोश भरें** – अपने प्रोजेक्ट की सामग्री से शब्दकोश भरें।
 
-आसानी से विभिन्न प्रारूपों में संरचित शब्दकोश फ़ाइलें उत्पन्न करें:
+![कमांड सूची](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-यदि आप वर्तमान में किसी कॉम्पोनेंट पर काम कर रहे हैं, तो यह आपके लिए `.content.{ts,tsx,js,jsx,mjs,cjs,json}` फ़ाइल उत्पन्न करेगा।
+- **Intlayer कमांड्स तक आसान पहुँच** – सामग्री शब्दकोशों को आसानी से बनाएं, पुश करें, पुल करें, भरें, और परीक्षण करें।
 
-कॉम्पोनेंट का उदाहरण:
+![सामग्री फ़ाइल बनाएँ](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **सामग्री घोषणा जनरेटर** – विभिन्न स्वरूपों (`.ts`, `.esm`, `.cjs`, `.json`) में शब्दकोश सामग्री फ़ाइलें बनाएं।
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-TypeScript प्रारूप में उत्पन्न फ़ाइल:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+![शब्दकोशों का परीक्षण करें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
+- **शब्दकोश परीक्षण** – लापता अनुवादों के लिए शब्दकोशों का परीक्षण करें।
 
-उपलब्ध प्रारूप:
+![शब्दकोश पुनर्निर्माण करें](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-- **TypeScript (`.ts`)**
-- **ES मॉड्यूल (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+- **अपने शब्दकोशों को अद्यतित रखें** – अपने प्रोजेक्ट की नवीनतम सामग्री के साथ अपने शब्दकोशों को अद्यतित रखें।
 
-### Intlayer टैब (एक्टिविटी बार)
+![Intlayer टैब (गतिविधि बार)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-VS कोड एक्टिविटी बार में Intlayer आइकन पर क्लिक करके Intlayer टैब खोलें। इसमें दो दृश्य होते हैं:
-
-- **खोज**: एक लाइव खोज बार जो शब्दकोशों और उनके कंटेंट को जल्दी से फ़िल्टर करता है। टाइप करते ही परिणाम तुरंत अपडेट हो जाते हैं।
-- **शब्दकोश**: आपके एनवायरनमेंट/प्रोजेक्ट्स, शब्दकोश कुंजियों, और प्रविष्टियाँ देने वाली फ़ाइलों का एक ट्री व्यू। आप:
-  - किसी फ़ाइल पर क्लिक करके उसे एडिटर में खोल सकते हैं।
-  - टूलबार का उपयोग करके ये क्रियाएँ चला सकते हैं: Build, Pull, Push, Fill, Refresh, Test, और Create Dictionary File।
-  - आइटम-विशिष्ट क्रियाओं के लिए संदर्भ मेनू का उपयोग करें:
-    - किसी शब्दकोश पर: Pull या Push
-    - किसी फ़ाइल पर: Fill Dictionary
-  - जब आप एडिटर स्विच करते हैं, तो ट्री उस मेल खाने वाली फ़ाइल को दिखाएगा यदि वह किसी शब्दकोश से संबंधित हो।
-
-## स्थापना
-
-आप सीधे VS Code मार्केटप्लेस से **Intlayer** इंस्टॉल कर सकते हैं:
-
-1. **VS Code** खोलें।
-2. **Extensions Marketplace** पर जाएं।
-3. **"Intlayer"** खोजें।
-4. **Install** पर क्लिक करें।
+- **Intlayer टैब (गतिविधि बार)** – समर्पित साइड टैब से टूलबार और संदर्भ क्रियाओं (बिल्ड, पुल, पुश, फिल, रिफ्रेश, टेस्ट, फ़ाइल बनाएँ) के साथ शब्दकोश ब्राउज़ और खोजें।
 
 ## उपयोग
 
@@ -121,63 +65,58 @@ VS कोड एक्टिविटी बार में Intlayer आइक
    const content = useIntlayer("app");
    ```
 
-3. कुंजी (जैसे `"app"`) पर **Command-click** (`⌘+Click` macOS पर) या **Ctrl+Click** (Windows/Linux पर) करें।
-4. VS Code स्वचालित रूप से संबंधित शब्दकोश फ़ाइल खोल देगा, जैसे `src/app.content.ts`।
-
-### कंटेंट शब्दकोश प्रबंधन
+3. कुंजी (जैसे, `"app"`) पर **कमांड-क्लिक** (`⌘+Click` macOS पर) या **Ctrl+Click** (Windows/Linux पर) करें।
+4. VS Code स्वचालित रूप से संबंधित शब्दकोश फ़ाइल खोलेगा, जैसे `src/app.content.ts`।
 
-### Intlayer टैब (एक्टिविटी बार)
+### Intlayer टैब (गतिविधि बार)
 
 शब्दकोशों को ब्राउज़ और प्रबंधित करने के लिए साइड टैब का उपयोग करें:
 
-- एक्टिविटी बार में Intlayer आइकन खोलें।
-- **Search** में, वास्तविक समय में शब्दकोश और प्रविष्टियों को फ़िल्टर करने के लिए टाइप करें।
-- **Dictionaries** में, पर्यावरण, शब्दकोश, और फ़ाइलों को ब्राउज़ करें। टूलबार का उपयोग करें Build, Pull, Push, Fill, Refresh, Test, और Create Dictionary File के लिए। संदर्भ क्रियाओं के लिए राइट-क्लिक करें (शब्दकोशों पर Pull/Push, फ़ाइलों पर Fill)। जब लागू हो, तो वर्तमान संपादक फ़ाइल स्वचालित रूप से ट्री में प्रकट होती है।
+- गतिविधि बार में Intlayer आइकन खोलें।
+- **Search** में, वास्तविक समय में शब्दकोशों और प्रविष्टियों को फ़िल्टर करने के लिए टाइप करें।
+- **Dictionaries** में, पर्यावरण, शब्दकोश, और फ़ाइलों को ब्राउज़ करें। टूलबार का उपयोग करें जैसे Build, Pull, Push, Fill, Refresh, Test, और Create Dictionary File के लिए। संदर्भ क्रियाओं के लिए राइट-क्लिक करें (शब्दकोशों पर Pull/Push, फ़ाइलों पर Fill)। जब लागू हो, तो वर्तमान संपादक फ़ाइल स्वचालित रूप से पेड़ में प्रकट होती है।
 
-#### शब्दकोश बनाना
+### कमांड्स तक पहुँच
 
-सभी शब्दकोश सामग्री फ़ाइलें उत्पन्न करें:
+आप **Command Palette** से कमांड्स तक पहुँच सकते हैं।
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-**Build Dictionaries** खोजें और कमांड निष्पादित करें।
-
-#### शब्दकोश पुश करना
-
-नवीनतम शब्दकोश सामग्री अपलोड करें:
-
-1. **Command Palette** खोलें।
-2. **Push Dictionaries** खोजें।
-3. पुश करने के लिए शब्दकोश चुनें और पुष्टि करें।
-
-#### शब्दकोश पुल करना
+- **शब्दकोश बनाएं (Build Dictionaries)**
+- **शब्दकोश पुश करें (Push Dictionaries)**
+- **शब्दकोश पुल करें (Pull Dictionaries)**
+- **शब्दकोश भरें (Fill Dictionaries)**
+- **शब्दकोश परीक्षण करें (Test Dictionaries)**
+- **शब्दकोश फ़ाइल बनाएँ (Create Dictionary File)**
 
-नवीनतम शब्दकोश सामग्री सिंक करें:
+### पर्यावरण चर लोड करना
 
-1. **Command Palette** खोलें।
-2. **Pull Dictionaries** खोजें।
-3. पुल करने के लिए शब्दकोश चुनें।
+Intlayer सुझाव देता है कि आप अपने AI API कुंजी, साथ ही Intlayer क्लाइंट ID और सीक्रेट को पर्यावरण चर में संग्रहीत करें।
 
-#### शब्दकोश भरना
+एक्सटेंशन आपके वर्कस्पेस से पर्यावरण चर लोड कर सकता है ताकि Intlayer कमांड सही संदर्भ के साथ चल सकें।
 
-अपने प्रोजेक्ट की सामग्री से शब्दकोश भरें:
+- **लोड क्रम (प्राथमिकता के अनुसार)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **गैर-विनाशकारी**: मौजूदा `process.env` मानों को अधिलेखित नहीं किया जाता है।
+- **स्कोप**: फ़ाइलें कॉन्फ़िगर किए गए बेस डायरेक्टरी से हल की जाती हैं (डिफ़ॉल्ट वर्कस्पेस रूट)।
 
-1. **Command Palette** खोलें।
-2. **Fill Dictionaries** खोजें।
-3. शब्दकोश भरने के लिए कमांड चलाएं।
+#### सक्रिय पर्यावरण का चयन करना
 
-#### शब्दकोश परीक्षण
+- **कमांड पैलेट**: पैलेट खोलें और `Intlayer: Select Environment` चलाएं, फिर पर्यावरण चुनें (जैसे, `development`, `staging`, `production`)। एक्सटेंशन प्राथमिकता सूची में उपलब्ध पहली फ़ाइल लोड करने का प्रयास करेगा और “Loaded env from .env.<env>.local” जैसी सूचना दिखाएगा।
+- **सेटिंग्स**: `Settings → Extensions → Intlayer` पर जाएं, और सेट करें:
+  - **पर्यावरण**: वह पर्यावरण नाम जिसका उपयोग `.env.<env>*` फ़ाइलों को हल करने के लिए किया जाता है।
+  - (वैकल्पिक) **Env फ़ाइल**: `.env` फ़ाइल का स्पष्ट पथ। जब प्रदान किया जाता है, तो यह अनुमानित सूची पर प्राथमिकता लेता है।
 
-शब्दकोशों को मान्य करें और गायब अनुवाद खोजें:
+#### मोनोरिपोज़ और कस्टम निर्देशिकाएँ
 
-1. **Command Palette** खोलें।
-2. **Test Dictionaries** खोजें।
-3. रिपोर्ट की गई समस्याओं की समीक्षा करें और आवश्यकतानुसार सुधार करें।
+यदि आपकी `.env` फ़ाइलें वर्कस्पेस रूट के बाहर स्थित हैं, तो `Settings → Extensions → Intlayer` में **Base Directory** सेट करें। लोडर उस निर्देशिका के सापेक्ष `.env` फ़ाइलों को खोजेगा।
 
 ## दस्तावेज़ इतिहास
 
-| संस्करण | तिथि       | परिवर्तन       |
-| ------- | ---------- | -------------- |
-| 5.5.10  | 2025-06-29 | इतिहास प्रारंभ |
+| संस्करण | तिथि       | परिवर्तन                           |
+| ------- | ---------- | ---------------------------------- |
+| 6.1.5   | 2025-09-30 | डेमो GIF जोड़ा                     |
+| 6.1.0   | 2025-09-24 | पर्यावरण चयन अनुभाग जोड़ा          |
+| 6.0.0   | 2025-09-22 | Intlayer टैब / Fill & Test कमांड्स |
+| 5.5.10  | 2025-06-29 | प्रारंभिक इतिहास                   |

package/docs/it/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Rendere un componente multilingue (libreria i18n) in React e Next.js
+description: Impara come dichiarare e recuperare contenuti localizzati per costruire un componente React o Next.js multilingue con Intlayer.
+keywords:
+  - i18n
+  - componente
+  - react
+  - multilingue
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Come rendere un componente multilingue (i18n) con Intlayer
+
+Questa guida mostra i passaggi minimi per rendere un componente UI multilingue in due configurazioni comuni:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Per prima cosa dichiarerai il tuo contenuto, poi lo recupererai nel tuo componente.
+
+## 1) Dichiara il tuo contenuto (condiviso per React e Next.js)
+
+Crea un file di dichiarazione del contenuto vicino al tuo componente. Questo mantiene le traduzioni vicine al punto in cui vengono utilizzate e consente la sicurezza dei tipi.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+Anche JSON è supportato se preferisci i file di configurazione.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Recupera il tuo contenuto
+
+### Caso A — App React (Vite/SPA)
+
+Approccio predefinito: usa `useIntlayer` per recuperare tramite chiave. Questo mantiene i componenti leggeri e tipizzati.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Rendering lato server o fuori dal provider: usa `react-intlayer/server` e passa un `locale` esplicito quando necessario.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Alternativa: `useDictionary` può leggere un intero oggetto dichiarato se preferisci collocare la struttura nel punto di chiamata.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Caso B — Next.js (App Router)
+
+Preferisci i componenti server per sicurezza dei dati e prestazioni. Usa `useIntlayer` da `next-intlayer/server` nei file server, e `useIntlayer` da `next-intlayer` nei componenti client.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Suggerimento: Per i metadata della pagina e la SEO, puoi anche recuperare contenuti usando `getIntlayer` e generare URL multilingue tramite `getMultilingualUrls`.
+
+## Perché l’approccio a componenti di Intlayer è il migliore
+
+- **Collocazione**: Le dichiarazioni di contenuto vivono vicino ai componenti, riducendo la deriva e migliorando il riutilizzo nei sistemi di design.
+- **Sicurezza dei tipi**: Chiavi e strutture sono fortemente tipizzate; le traduzioni mancanti emergono in fase di build anziché a runtime.
+- **Server-first**: Funziona nativamente nei componenti server per una migliore sicurezza e prestazioni; gli hook client rimangono ergonomici.
+- **Tree-shaking**: Viene incluso solo il contenuto utilizzato dal componente, mantenendo i payload piccoli nelle grandi applicazioni.
+- **DX e strumenti**: Middleware integrati, helper SEO e traduzioni opzionali con Visual Editor/AI semplificano il lavoro quotidiano.
+
+Consulta i confronti e i modelli nel riepilogo focalizzato su Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Guide e riferimenti correlati
+
+- Configurazione React (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Configurazione Next.js: https://intlayer.org/doc/environment/nextjs
+- Perché Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Queste pagine includono la configurazione end-to-end, i provider, il routing e gli helper SEO.