@intlayer/docs 6.1.5 → 6.1.6

package/docs/es/intlayer_with_vite+preact.md

@@ -1055,38 +1055,38 @@ const App = () => (
 module.exports = App;
 ```
 
-En paralelo, también puedes usar el `intlayerMiddlewarePlugin` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
+En paralelo, también puedes usar el `intlayerMiddleware` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
 
 ```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/es/intlayer_with_vite+react.md

@@ -1003,38 +1003,38 @@ const App = () => (
 );
 ```
 
-Paralelamente, también puedes usar el `intlayerMiddlewarePlugin` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
+Paralelamente, también puedes usar el `intlayerMiddleware` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
 
 ```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/es/intlayer_with_vite+vue.md

@@ -697,46 +697,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
-Paralelamente, también puede usar el `intlayerMiddlewarePlugin` para agregar enrutamiento del lado del servidor a su aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
+Paralelamente, también puede usar el `intlayerMiddleware` para agregar enrutamiento del lado del servidor a su aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
 
 ```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/es/vs_code_extension.md

@@ -1,10 +1,10 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
-title: Extensión Oficial de VS Code
+updatedAt: 2025-09-30
+title: Extensión Oficial para VS Code
 description: Aprende a usar la extensión Intlayer en VS Code para mejorar tu flujo de trabajo de desarrollo. Navega rápidamente entre contenido localizado y gestiona tus diccionarios de manera eficiente.
 keywords:
-  - Extensión de VS Code
+  - Extensión VS Code
   - Intlayer
   - Localización
   - Herramientas de Desarrollo
@@ -17,102 +17,46 @@ slugs:
   - vs-code-extension
 ---
 
-# Extensión Oficial de VS Code
+# Extensión Oficial para VS Code
 
-## Visión General
+## Descripción general
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) es la extensión oficial de Visual Studio Code para **Intlayer**, diseñada para mejorar la experiencia del desarrollador al trabajar con contenido localizado en tus proyectos.
 
-![Extensión Intlayer para VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Extensión Intlayer para VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Enlace de la extensión: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funcionalidades
 
-### Navegación Instantánea
+![Rellenar diccionarios](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Soporte para Ir a la Definición** – Usa `⌘ + Click` (Mac) o `Ctrl + Click` (Windows/Linux) sobre una clave `useIntlayer` para abrir instantáneamente el archivo de contenido correspondiente.  
-**Integración Perfecta** – Funciona sin problemas con proyectos **react-intlayer** y **next-intlayer**.  
-**Soporte Multilingüe** – Soporta contenido localizado en diferentes idiomas.  
-**Integración con VS Code** – Se integra de manera fluida con la navegación y la paleta de comandos de VS Code.
+- **Navegación Instantánea** – Salta rápidamente al archivo de contenido correcto al hacer clic en una clave `useIntlayer`.
+- **Rellenar Diccionarios** – Rellena los diccionarios con contenido de tu proyecto.
 
-### Comandos para la Gestión de Diccionarios
+![Listar comandos](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Gestiona tus diccionarios de contenido directamente desde VS Code:
+- **Acceso fácil a los comandos de Intlayer** – Construye, envía, descarga, rellena y prueba diccionarios de contenido con facilidad.
 
-- **Construir Diccionarios** – Genera archivos de contenido basados en la estructura de tu proyecto.
-- **Subir Diccionarios** – Sube el contenido más reciente del diccionario a tu repositorio.
-- **Descargar Diccionarios** – Sincroniza el contenido más reciente del diccionario desde tu repositorio a tu entorno local.
-- **Rellenar Diccionarios** – Llena los diccionarios con contenido de tu proyecto.
-- **Probar Diccionarios** – Identifica traducciones faltantes o incompletas.
+![Crear archivo de contenido](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Generador de Declaración de Contenido
+- **Generador de declaración de contenido** – Crea archivos de contenido de diccionario en varios formatos (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Genera fácilmente archivos de diccionario estructurados en diferentes formatos:
+![Probar diccionarios](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-Si estás trabajando actualmente en un componente, generará el archivo `.content.{ts,tsx,js,jsx,mjs,cjs,json}` para ti.
+- **Probar diccionarios** – Prueba diccionarios para detectar traducciones faltantes.
 
-Ejemplo de componente:
+![Reconstruir diccionario](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Mantén tus diccionarios actualizados** – Mantén tus diccionarios actualizados con el contenido más reciente de tu proyecto.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Archivo generado en formato TypeScript:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-Formatos disponibles:
-
-- **TypeScript (`.ts`)**
-- **Módulo ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Pestaña Intlayer (Barra de Actividad)
+![Pestaña Intlayer (Barra de Actividad)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Abre la pestaña de Intlayer haciendo clic en el ícono de Intlayer en la Barra de Actividades de VS Code. Contiene dos vistas:
-
-- **Buscar**: Una barra de búsqueda en vivo para filtrar rápidamente los diccionarios y su contenido. Al escribir, los resultados se actualizan instantáneamente.
-- **Diccionarios**: Una vista en árbol de tus entornos/proyectos, claves de diccionario y los archivos que aportan entradas. Puedes:
-  - Hacer clic en un archivo para abrirlo en el editor.
-  - Usar la barra de herramientas para ejecutar acciones: Construir, Extraer (Pull), Enviar (Push), Rellenar, Actualizar, Probar y Crear Archivo de Diccionario.
-  - Usar el menú contextual para acciones específicas del ítem:
-    - En un diccionario: Extraer (Pull) o Enviar (Push)
-    - En un archivo: Rellenar Diccionario
-  - Cuando cambias de editor, el árbol revelará el archivo correspondiente si pertenece a un diccionario.
-
-## Instalación
-
-Puedes instalar **Intlayer** directamente desde el Marketplace de VS Code:
-
-1. Abre **VS Code**.
-2. Ve al **Marketplace de Extensiones**.
-3. Busca **"Intlayer"**.
-4. Haz clic en **Instalar**.
+- **Pestaña Intlayer (Barra de Actividad)** – Navega y busca diccionarios desde una pestaña lateral dedicada con barra de herramientas y acciones contextuales (Construir, Descargar, Enviar, Rellenar, Actualizar, Probar, Crear Archivo).
 
 ## Uso
 
-### Navegación Rápida
+### Navegación rápida
 
 1. Abre un proyecto que use **react-intlayer**.
 2. Localiza una llamada a `useIntlayer()`, como:
@@ -121,63 +65,58 @@ Puedes instalar **Intlayer** directamente desde el Marketplace de VS Code:
    const content = useIntlayer("app");
    ```
 
-3. Haz **Command-click** (`⌘+Click` en macOS) o **Ctrl+Click** (en Windows/Linux) sobre la clave (por ejemplo, `"app"`).
+3. **Haz clic con comando** (`⌘+Click` en macOS) o **Ctrl+Click** (en Windows/Linux) sobre la clave (por ejemplo, `"app"`).
 4. VS Code abrirá automáticamente el archivo de diccionario correspondiente, por ejemplo, `src/app.content.ts`.
 
-### Gestión de Diccionarios de Contenido
-
-### Pestaña Intlayer (Barra de Actividades)
+### Pestaña Intlayer (Barra de Actividad)
 
-Usa la pestaña lateral para explorar y gestionar diccionarios:
+Usa la pestaña lateral para navegar y gestionar diccionarios:
 
-- Abre el ícono de Intlayer en la Barra de Actividades.
+- Abre el ícono de Intlayer en la Barra de Actividad.
 - En **Buscar**, escribe para filtrar diccionarios y entradas en tiempo real.
-- En **Diccionarios**, navega por entornos, diccionarios y archivos. Usa la barra de herramientas para Construir, Extraer, Enviar, Rellenar, Actualizar, Probar y Crear Archivo de Diccionario. Haz clic derecho para acciones contextuales (Extraer/Enviar en diccionarios, Rellenar en archivos). El archivo actual del editor se revela automáticamente en el árbol cuando es aplicable.
+- En **Diccionarios**, navega por entornos, diccionarios y archivos. Usa la barra de herramientas para Construir, Extraer (Pull), Enviar (Push), Rellenar, Actualizar, Probar y Crear Archivo de Diccionario. Haz clic derecho para acciones contextuales (Extraer/Enviar en diccionarios, Rellenar en archivos). El archivo actual del editor se revela automáticamente en el árbol cuando es aplicable.
 
-#### Construcción de Diccionarios
+### Acceso a los comandos
 
-Genera todos los archivos de contenido del diccionario con:
+Puedes acceder a los comandos desde la **Paleta de Comandos**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Busca **Construir Diccionarios** y ejecuta el comando.
-
-#### Envío de Diccionarios
-
-Sube el contenido más reciente del diccionario:
-
-1. Abre la **Paleta de Comandos**.
-2. Busca **Enviar Diccionarios**.
-3. Selecciona los diccionarios a enviar y confirma.
-
-#### Extracción de Diccionarios
+- **Construir Diccionarios**
+- **Enviar Diccionarios**
+- **Obtener Diccionarios**
+- **Rellenar Diccionarios**
+- **Probar Diccionarios**
+- **Crear Archivo de Diccionario**
 
-Sincroniza el contenido más reciente del diccionario:
+### Carga de Variables de Entorno
 
-1. Abre la **Paleta de Comandos**.
-2. Busca **Extraer Diccionarios**.
-3. Elige los diccionarios que deseas extraer.
+Intlayer recomienda almacenar tus claves API de IA, así como el ID y secreto del cliente de Intlayer en variables de entorno.
 
-#### Rellenar Diccionarios
+La extensión puede cargar variables de entorno desde tu espacio de trabajo para ejecutar comandos de Intlayer con el contexto correcto.
 
-Rellena los diccionarios con contenido de tu proyecto:
+- **Orden de carga (por prioridad)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **No destructivo**: los valores existentes en `process.env` no son sobrescritos.
+- **Alcance**: los archivos se resuelven desde el directorio base configurado (por defecto la raíz del espacio de trabajo).
 
-1. Abre la **Paleta de Comandos**.
-2. Busca **Rellenar Diccionarios**.
-3. Ejecuta el comando para poblar los diccionarios.
+#### Selección del entorno activo
 
-#### Probar Diccionarios
+- **Paleta de Comandos**: abre la paleta y ejecuta `Intlayer: Select Environment`, luego elige el entorno (por ejemplo, `development`, `staging`, `production`). La extensión intentará cargar el primer archivo disponible en la lista de prioridad mencionada y mostrará una notificación como “Entorno cargado desde .env.<env>.local”.
+- **Configuración**: ve a `Settings → Extensions → Intlayer`, y configura:
+  - **Environment**: el nombre del entorno usado para resolver archivos `.env.<env>*`.
+  - (Opcional) **Env File**: una ruta explícita a un archivo `.env`. Cuando se proporciona, tiene prioridad sobre la lista inferida.
 
-Valida los diccionarios y encuentra traducciones faltantes:
+#### Monorepos y directorios personalizados
 
-1. Abre la **Paleta de Comandos**.
-2. Busca **Probar Diccionarios**.
-3. Revisa los problemas reportados y corrígelos según sea necesario.
+Si tus archivos `.env` están fuera de la raíz del espacio de trabajo, configura el **Directorio Base** en `Configuración → Extensiones → Intlayer`. El cargador buscará los archivos `.env` relativos a ese directorio.
 
-## Historial del Documento
+## Historial de Documentación
 
-| Versión | Fecha      | Cambios           |
-| ------- | ---------- | ----------------- |
-| 5.5.10  | 2025-06-29 | Historial inicial |
+| Versión | Fecha      | Cambios                                       |
+| ------- | ---------- | --------------------------------------------- |
+| 6.1.5   | 2025-09-30 | Añadido gif de demostración                   |
+| 6.1.0   | 2025-09-24 | Añadida sección de selección de entorno       |
+| 6.0.0   | 2025-09-22 | Pestaña Intlayer / Comandos Rellenar y Probar |
+| 5.5.10  | 2025-06-29 | Historial inicial                             |

package/docs/fr/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Rendre un composant multilingue (i18n) en React et Next.js
+description: Apprenez à déclarer et récupérer du contenu localisé pour créer un composant React ou Next.js multilingue avec Intlayer.
+keywords:
+  - i18n
+  - composant
+  - 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
+---
+
+# Comment rendre un composant multilingue (i18n) avec Intlayer
+
+Ce guide montre les étapes minimales pour rendre un composant d'interface utilisateur multilingue dans deux configurations courantes :
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Vous commencerez par déclarer votre contenu, puis vous le récupérerez dans votre composant.
+
+## 1) Déclarez votre contenu (partagé pour React et Next.js)
+
+Créez un fichier de déclaration de contenu à proximité de votre composant. Cela permet de garder les traductions proches de leur utilisation et assure la sécurité des types.
+
+```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;
+```
+
+Le JSON est également supporté si vous préférez les fichiers de configuration.
+
+```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) Récupérez votre contenu
+
+### Cas A — Application React (Vite/SPA)
+
+Approche par défaut : utilisez `useIntlayer` pour récupérer par clé. Cela permet de garder les composants légers et typés.
+
+```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>
+  );
+}
+```
+
+Rendu côté serveur ou hors du provider : utilisez `react-intlayer/server` et passez un `locale` explicite si nécessaire.
+
+```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>
+    </>
+  );
+}
+```
+
+Alternative : `useDictionary` peut lire un objet déclaré en entier si vous préférez regrouper la structure au point d'appel.
+
+```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>
+  );
+}
+```
+
+### Cas B — Next.js (App Router)
+
+Privilégiez les composants serveur pour la sécurité des données et la performance. Utilisez `useIntlayer` depuis `next-intlayer/server` dans les fichiers serveur, et `useIntlayer` depuis `next-intlayer` dans les composants clients.
+
+```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>
+  );
+}
+```
+
+Astuce : Pour les métadonnées de page et le SEO, vous pouvez également récupérer le contenu en utilisant `getIntlayer` et générer des URLs multilingues via `getMultilingualUrls`.
+
+## Pourquoi l’approche composant d’Intlayer est la meilleure
+
+- **Collocation** : Les déclarations de contenu vivent à proximité des composants, réduisant les dérives et améliorant la réutilisation à travers les systèmes de design.
+- **Sécurité des types** : Les clés et structures sont fortement typées ; les traductions manquantes apparaissent à la compilation plutôt qu’à l’exécution.
+- **Serveur d'abord** : Fonctionne nativement dans les composants serveur pour une meilleure sécurité et performance ; les hooks client restent ergonomiques.
+- **Tree-shaking** : Seul le contenu utilisé par le composant est inclus, ce qui maintient les charges utiles légères dans les grandes applications.
+- **Expérience développeur & outils** : Middleware intégré, assistants SEO, et traductions optionnelles via éditeur visuel/IA facilitent le travail quotidien.
+
+Consultez les comparaisons et les modèles dans le résumé axé sur Next.js : https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Guides et références associés
+
+- Configuration React (Vite) : https://intlayer.org/doc/environment/vite-and-react
+- React Router v7 : https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- Démarrage TanStack : https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Configuration Next.js : https://intlayer.org/doc/environment/nextjs
+- Pourquoi Intlayer vs. next-intl vs. next-i18next : https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Ces pages incluent la configuration de bout en bout, les fournisseurs, le routage et les assistants SEO.

package/docs/fr/intlayer_with_angular.md

@@ -648,9 +648,9 @@ Pour des scénarios plus complexes, vous pouvez créer un pipe pour rendre le HT
 
 Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
 
-![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)
 
 Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.