@intlayer/docs 6.1.5 → 6.1.6

package/docs/fr/intlayer_with_vite+preact.md

@@ -1039,38 +1039,38 @@ const App = () => (
 module.exports = App;
 ```
 
-En parallèle, vous pouvez également utiliser le `intlayerMiddlewarePlugin` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
+En parallèle, vous pouvez également utiliser le `intlayerMiddleware` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const preact = require("@preact/preset-vite");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 

package/docs/fr/intlayer_with_vite+react.md

@@ -1003,38 +1003,38 @@ const App = () => (
 );
 ```
 
-En parallèle, vous pouvez également utiliser le `intlayerMiddlewarePlugin` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
+En parallèle, vous pouvez également utiliser le `intlayerMiddleware` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const react = require("@vitejs/plugin-react-swc");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 

package/docs/fr/intlayer_with_vite+vue.md

@@ -648,46 +648,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
-Parallèlement, vous pouvez également utiliser le `intlayerMiddlewarePlugin` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
+Parallèlement, vous pouvez également utiliser le `intlayerMiddleware` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 

package/docs/fr/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Extension officielle VS Code
-description: Apprenez à utiliser l'extension Intlayer dans VS Code pour améliorer votre flux de développement. Naviguez rapidement entre les contenus localisés et gérez efficacement vos dictionnaires.
+description: Apprenez à utiliser l'extension Intlayer dans VS Code pour améliorer votre flux de travail de développement. Naviguez rapidement entre les contenus localisés et gérez efficacement vos dictionnaires.
 keywords:
   - Extension VS Code
   - Intlayer
@@ -19,165 +19,104 @@ slugs:
 
 # Extension officielle VS Code
 
-## Vue d'ensemble
+## Aperçu
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) est l'extension officielle Visual Studio Code pour **Intlayer**, conçue pour améliorer l'expérience développeur lors du travail avec du contenu localisé dans vos projets.
 
-![Extension Intlayer VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Extension Intlayer VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Lien de l'extension : [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Fonctionnalités
 
-### Navigation instantanée
+![Remplir les dictionnaires](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Support de Aller à la définition** – Utilisez `⌘ + Clic` (Mac) ou `Ctrl + Clic` (Windows/Linux) sur une clé `useIntlayer` pour ouvrir instantanément le fichier de contenu correspondant.  
-**Intégration transparente** – Fonctionne sans effort avec les projets **react-intlayer** et **next-intlayer**.  
-**Support multilingue** – Prend en charge le contenu localisé dans différentes langues.  
-**Intégration VS Code** – S'intègre parfaitement à la navigation et à la palette de commandes de VS Code.
-
-### Commandes de gestion des dictionnaires
-
-Gérez vos dictionnaires de contenu directement depuis VS Code :
-
-- **Construire les dictionnaires** – Générez des fichiers de contenu basés sur la structure de votre projet.
-- **Pousser les dictionnaires** – Téléchargez le contenu le plus récent des dictionnaires vers votre dépôt.
-- **Tirer les dictionnaires** – Synchronisez le contenu le plus récent des dictionnaires depuis votre dépôt vers votre environnement local.
+- **Navigation instantanée** – Accédez rapidement au fichier de contenu correct en cliquant sur une clé `useIntlayer`.
 - **Remplir les dictionnaires** – Remplissez les dictionnaires avec le contenu de votre projet.
-- **Tester les dictionnaires** – Identifiez les traductions manquantes ou incomplètes.
-
-### Générateur de déclaration de contenu
-
-Générez facilement des fichiers de dictionnaire structurés dans différents formats :
-
-Si vous travaillez actuellement sur un composant, il générera pour vous le fichier `.content.{ts,tsx,js,jsx,mjs,cjs,json}`.
-
-Exemple de composant :
-
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
 
-Fichier généré au format TypeScript :
+![Liste des commandes](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+- **Accès facile aux commandes Intlayer** – Construisez, poussez, tirez, remplissez, testez les dictionnaires de contenu en toute simplicité.
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+![Créer un fichier de contenu](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-export default componentContent;
-```
-
-Formats disponibles :
+- **Générateur de déclaration de contenu** – Créez des fichiers de contenu de dictionnaire dans divers formats (`.ts`, `.esm`, `.cjs`, `.json`).
 
-- **TypeScript (`.ts`)**
-- **Module ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
+![Tester les dictionnaires](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-### Onglet Intlayer (Barre d'activité)
+- **Tester les dictionnaires** – Testez les dictionnaires pour détecter les traductions manquantes.
 
-Ouvrez l’onglet Intlayer en cliquant sur l’icône Intlayer dans la barre d’activités de VS Code. Il contient deux vues :
+![Reconstruire le dictionnaire](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-- **Recherche** : Une barre de recherche en direct pour filtrer rapidement les dictionnaires et leur contenu. La saisie met à jour les résultats instantanément.
-- **Dictionnaires** : Une vue arborescente de vos environnements/projets, des clés de dictionnaire, et des fichiers contribuant aux entrées. Vous pouvez :
-  - Cliquer sur un fichier pour l’ouvrir dans l’éditeur.
-  - Utiliser la barre d’outils pour exécuter des actions : Construire, Pull, Push, Remplir, Actualiser, Tester, et Créer un fichier de dictionnaire.
-  - Utiliser le menu contextuel pour des actions spécifiques à l’élément :
-    - Sur un dictionnaire : Pull ou Push
-    - Sur un fichier : Remplir le dictionnaire
-  - Lorsque vous changez d’éditeur, l’arborescence révélera le fichier correspondant s’il appartient à un dictionnaire.
+- **Gardez vos dictionnaires à jour** – Maintenez vos dictionnaires à jour avec le contenu le plus récent de votre projet.
 
-## Installation
+![Onglet Intlayer (Barre d'activité)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Vous pouvez installer **Intlayer** directement depuis le Marketplace de VS Code :
-
-1. Ouvrez **VS Code**.
-2. Allez dans le **Marketplace des extensions**.
-3. Recherchez **"Intlayer"**.
-4. Cliquez sur **Installer**.
+- **Onglet Intlayer (Barre d'activité)** – Parcourez et recherchez les dictionnaires depuis un onglet latéral dédié avec une barre d'outils et des actions contextuelles (Construire, Tirer, Pousser, Remplir, Actualiser, Tester, Créer un fichier).
 
 ## Utilisation
 
 ### Navigation rapide
 
 1. Ouvrez un projet utilisant **react-intlayer**.
-2. Localisez un appel à `useIntlayer()`, par exemple :
+2. Localisez un appel à `useIntlayer()`, tel que :
 
    ```tsx
    const content = useIntlayer("app");
    ```
 
-3. **Command-clic** (`⌘+Click` sur macOS) ou **Ctrl-clic** (sur Windows/Linux) sur la clé (par exemple, `"app"`).
-4. VS Code ouvrira automatiquement le fichier de dictionnaire correspondant, par exemple `src/app.content.ts`.
-
-### Gestion des dictionnaires de contenu
+3. **Cliquez avec la commande** (`⌘+Click` sur macOS) ou **Ctrl+Click** (sur Windows/Linux) sur la clé (par exemple, `"app"`).
+4. VS Code ouvrira automatiquement le fichier de dictionnaire correspondant, par exemple, `src/app.content.ts`.
 
-### Onglet Intlayer (Barre d’activités)
+### Onglet Intlayer (Barre d'activité)
 
-Utilisez l’onglet latéral pour parcourir et gérer les dictionnaires :
+Utilisez l'onglet latéral pour parcourir et gérer les dictionnaires :
 
-- Ouvrez l’icône Intlayer dans la barre d’activités.
+- Ouvrez l'icône Intlayer dans la Barre d'activité.
 - Dans **Recherche**, tapez pour filtrer les dictionnaires et les entrées en temps réel.
-- Dans **Dictionnaires**, parcourez les environnements, les dictionnaires et les fichiers. Utilisez la barre d’outils pour Construire, Tirer, Pousser, Remplir, Actualiser, Tester et Créer un fichier de dictionnaire. Faites un clic droit pour les actions contextuelles (Tirer/Pousser sur les dictionnaires, Remplir sur les fichiers). Le fichier actuellement ouvert dans l’éditeur se révèle automatiquement dans l’arborescence lorsque c’est applicable.
+- Dans **Dictionnaires**, parcourez les environnements, dictionnaires et fichiers. Utilisez la barre d'outils pour Construire, Tirer, Pousser, Remplir, Actualiser, Tester et Créer un fichier de dictionnaire. Cliquez avec le bouton droit pour les actions contextuelles (Tirer/Pousser sur les dictionnaires, Remplir sur les fichiers). Le fichier actuel de l'éditeur se révèle automatiquement dans l'arborescence lorsque c'est applicable.
 
-#### Construction des dictionnaires
+### Accéder aux commandes
 
-Générez tous les fichiers de contenu des dictionnaires avec :
+Vous pouvez accéder aux commandes depuis la **Palette de commandes**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Recherchez **Construire les dictionnaires** et exécutez la commande.
-
-#### Pousser les dictionnaires
-
-Téléchargez le contenu le plus récent des dictionnaires :
-
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Pousser les dictionnaires**.
-3. Sélectionnez les dictionnaires à pousser et confirmez.
-
-#### Tirer les dictionnaires
+- **Construire les dictionnaires**
+- **Pousser les dictionnaires**
+- **Tirer les dictionnaires**
+- **Remplir les dictionnaires**
+- **Tester les dictionnaires**
+- **Créer un fichier de dictionnaire**
 
-Synchronisez le contenu le plus récent des dictionnaires :
+### Chargement des variables d'environnement
 
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Pull Dictionaries**.
-3. Choisissez les dictionnaires à synchroniser.
+Intlayer recommande de stocker vos clés API d'IA, ainsi que l'ID client et le secret Intlayer dans des variables d'environnement.
 
-#### Remplissage des dictionnaires
+L'extension peut charger les variables d'environnement depuis votre espace de travail pour exécuter les commandes Intlayer avec le contexte correct.
 
-Remplissez les dictionnaires avec le contenu de votre projet :
+- **Ordre de chargement (par priorité)** : `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Non destructif** : les valeurs existantes de `process.env` ne sont pas écrasées.
+- **Portée** : les fichiers sont résolus à partir du répertoire de base configuré (par défaut la racine de l'espace de travail).
 
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Fill Dictionaries**.
-3. Exécutez la commande pour peupler les dictionnaires.
+#### Sélection de l'environnement actif
 
-#### Test des dictionnaires
+- **Palette de commandes** : ouvrez la palette et exécutez `Intlayer : Sélectionner l’environnement`, puis choisissez l’environnement (par exemple, `development`, `staging`, `production`). L’extension tentera de charger le premier fichier disponible dans la liste de priorité ci-dessus et affichera une notification comme « Environnement chargé depuis .env.<env>.local ».
+- **Paramètres** : allez dans `Paramètres → Extensions → Intlayer`, et configurez :
+  - **Environnement** : le nom de l’environnement utilisé pour résoudre les fichiers `.env.<env>*`.
+  - (Optionnel) **Fichier Env** : un chemin explicite vers un fichier `.env`. Lorsqu’il est fourni, il prend le pas sur la liste déduite.
 
-Validez les dictionnaires et trouvez les traductions manquantes :
+#### Monorepos et répertoires personnalisés
 
-1. Ouvrez la **Palette de commandes**.
-2. Recherchez **Test Dictionaries**.
-3. Passez en revue les problèmes signalés et corrigez-les si nécessaire.
+Si vos fichiers `.env` se trouvent en dehors de la racine de l’espace de travail, définissez le **Répertoire de base** dans `Paramètres → Extensions → Intlayer`. Le chargeur recherchera les fichiers `.env` relatifs à ce répertoire.
 
 ## Historique de la documentation
 
-| Version | Date       | Modifications      |
-| ------- | ---------- | ------------------ |
-| 5.5.10  | 2025-06-29 | Historique initial |
+| Version | Date       | Modifications                                       |
+| ------- | ---------- | --------------------------------------------------- |
+| 6.1.5   | 2025-09-30 | Ajout d’un gif de démonstration                     |
+| 6.1.0   | 2025-09-24 | Ajout de la section de sélection de l’environnement |
+| 6.0.0   | 2025-09-22 | Onglet Intlayer / Commandes Remplir & Tester        |
+| 5.5.10  | 2025-06-29 | Historique initial                                  |

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/intlayer_cli.md

@@ -40,7 +40,7 @@ pnpm add intlayer-cli -g
 
 ## intlayer-cli पैकेज
 
-`intlayer-cli` पैकेज आपके [intlayer घोषणाओं](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/get_started.md) को शब्दकोशों में ट्रांसपाइल करने का उद्देश्य रखता है।
+`intlayer-cli` पैकेज आपके [intlayer घोषणाओं](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) को शब्दकोशों में ट्रांसपाइल करने का उद्देश्य रखता है।
 
 यह पैकेज सभी intlayer फाइलों को ट्रांसपाइल करेगा, जैसे कि `src/**/*.content.{ts|js|mjs|cjs|json}`। [देखें कि अपने Intlayer घोषणा फाइलों को कैसे घोषित करें](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer/README.md)।
 
@@ -367,7 +367,6 @@ npx intlayer doc translate
   > उदाहरण: `npx intlayer doc translate --excluded-glob-pattern "docs/internal/**"`
 
 - **`--skip-if-modified-before [skipIfModifiedBefore]`**: यदि फ़ाइल दिए गए समय से पहले संशोधित की गई है तो उसे छोड़ दें।
-
   - यह एक निश्चित समय हो सकता है जैसे "2025-12-05" (स्ट्रिंग या Date)
   - यह एक सापेक्ष समय हो सकता है मिलीसेकंड में `1 * 60 * 60 * 1000` (1 घंटा)
   - यह विकल्प `fs.stat` मेथड का उपयोग करके फ़ाइल के अपडेट समय की जांच करता है। इसलिए यह Git या अन्य टूल्स से प्रभावित हो सकता है जो फ़ाइल को संशोधित करते हैं।
@@ -375,7 +374,6 @@ npx intlayer doc translate
   > उदाहरण: `npx intlayer doc translate --skip-if-modified-before "2025-12-05"`
 
 - **`--skip-if-modified-after [skipIfModifiedAfter]`**: यदि फ़ाइल दिए गए समय के भीतर संशोधित की गई है तो उसे छोड़ दें।
-
   - यह एक निश्चित समय हो सकता है जैसे "2025-12-05" (स्ट्रिंग या Date)
   - यह एक सापेक्ष समय हो सकता है मिलीसेकंड में `1 * 60 * 60 * 1000` (1 घंटा)
   - यह विकल्प `fs.stat` मेथड का उपयोग करके फ़ाइल के अपडेट समय की जांच करता है। इसलिए यह Git या अन्य उपकरणों से प्रभावित हो सकता है जो फ़ाइल को संशोधित करते हैं।
@@ -426,7 +424,6 @@ npx intlayer doc translate
 **कस्टम निर्देश विकल्प:**
 
 - **`--custom-instructions [customInstructions]`**: प्रॉम्प्ट में जोड़े गए कस्टम निर्देश। फॉर्मेटिंग, URL अनुवाद आदि के संबंध में विशिष्ट नियम लागू करने के लिए उपयोगी।
-
   - यह एक निश्चित समय हो सकता है जैसे "2025-12-05" (स्ट्रिंग या डेट)
   - यह एक सापेक्ष समय हो सकता है मिलीसेकंड में `1 * 60 * 60 * 1000` (1 घंटा)
   - यह विकल्प `fs.stat` मेथड का उपयोग करके फ़ाइल के अपडेट समय की जांच करता है। इसलिए यह Git या अन्य टूल्स से प्रभावित हो सकता है जो फ़ाइल को संशोधित करते हैं।

package/docs/hi/intlayer_with_angular.md

@@ -623,9 +623,9 @@ export const appConfig: ApplicationConfig = {
 
 Intlayer TypeScript के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में ऑटो-जेनरेटेड टाइप्स शामिल हैं।