@intlayer/docs 6.1.4 → 6.1.6-canary.0

package/docs/es/component_i18n.md

@@ -0,0 +1,182 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Hacer un componente multilingüe (biblioteca i18n) en React y Next.js
+description: Aprende a declarar y recuperar contenido localizado para construir un componente multilingüe de React o Next.js con Intlayer.
+keywords:
+  - i18n
+  - componente
+  - react
+  - multilingüe
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Cómo hacer un componente multilingüe (i18n) con Intlayer
+
+Esta guía muestra los pasos mínimos para hacer que un componente de interfaz sea multilingüe en dos configuraciones comunes:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Primero declararás tu contenido y luego lo recuperarás en tu componente.
+
+## 1) Declara tu contenido (compartido para React y Next.js)
+
+Crea un archivo de declaración de contenido cerca de tu componente. Esto mantiene las traducciones cerca del lugar donde se usan y habilita la seguridad de tipos.
+
+```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;
+```
+
+También se admite JSON si prefieres archivos de configuración.
+
+```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 tu contenido
+
+### Caso A — Aplicación React (Vite/SPA)
+
+Enfoque por defecto: usa `useIntlayer` para recuperar por clave. Esto mantiene los componentes ligeros y tipados.
+
+```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>
+  );
+}
+```
+
+Renderizado en servidor o fuera del provider: usa `react-intlayer/server` y pasa un `locale` explícito cuando sea necesario.
+
+```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` puede leer un objeto declarado completo si prefieres colocar la estructura en el punto de uso.
+
+```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)
+
+Prefiere componentes de servidor por seguridad y rendimiento. Usa `useIntlayer` de `next-intlayer/server` en archivos de servidor, y `useIntlayer` de `next-intlayer` en componentes cliente.
+
+```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>
+  );
+}
+```
+
+Consejo: Para metadatos de página y SEO, también puedes obtener contenido con `getIntlayer` y generar URLs multilingües con `getMultilingualUrls`.
+
+## Por qué el enfoque de componentes de Intlayer es el mejor
+
+- Colocación: Las declaraciones de contenido viven cerca de los componentes, reduciendo la deriva y mejorando la reutilización en los sistemas de diseño.
+- Seguridad de tipos: Las claves y estructuras están fuertemente tipadas; las traducciones faltantes aparecen en tiempo de build en lugar de en tiempo de ejecución.
+- Server-first: Funciona de forma nativa en componentes de servidor para mejor seguridad y rendimiento; los hooks de cliente siguen siendo ergonómicos.
+- Tree-shaking: Solo se incluye el contenido usado por el componente, manteniendo cargas pequeñas en aplicaciones grandes.
+- DX y herramientas: Middleware incorporado, asistentes de SEO y traducciones opcionales mediante Editor Visual/IA agilizan el trabajo diario.
+
+## Guías y referencias relacionadas
+
+- Configuración 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
+- Configuración Next.js: https://intlayer.org/doc/environment/nextjs
+- Por qué Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

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.