@intlayer/docs 9.4.3 → 9.5.0

package/blog/es/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,353 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Cómo hacer multilingüe (i18n) una aplicación Vite y React existente después (Guía i18n 2026)"
+description: "La guía de 2026 para hacer multilingüe (i18n) una aplicación Vite y React existente sin refactorizaciones tediosas. Descubre la extracción automática, traducción con IA y bundle optimizado con Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Internacionalización
+  - Traducir aplicación Vite existente
+  - Traducir aplicación React existente
+  - Intlayer
+  - Multilingüe
+  - Compilador
+  - Traducción IA
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Cómo hacer multilingüe (i18n) una aplicación Vite y React existente después (Guía i18n 2026)
+
+Añadir internacionalización (i18n) a un proyecto Vite y React desde el primer día es relativamente sencillo. Pero, ¿qué ocurre cuando ya tienes una aplicación madura en producción construida en un solo idioma y necesitas hacerla multilingüe **después**?
+
+Si alguna vez has intentado esto con bibliotecas tradicionales como `react-i18next` o `react-intl`, conoces la pesadilla:
+
+- Buscar manualmente cadenas de texto hardcodeadas en cientos de archivos JSX y TSX.
+- Crear manualmente archivos JSON anidados e inventar claves de traducción arbitrarias (`components.header.title`, etc.).
+- Reemplazar el texto JSX con llamadas a hooks de traducción (`t('...')`).
+- Reestructurar el enrutamiento del lado del cliente, el estado y la lógica de cambio de idioma.
+
+En 2026, no necesitas reescribir tu base de código para hacer multilingüe tu aplicación Vite y React. Con **Intlayer**, puedes adaptar la internacionalización a una aplicación existente en minutos, mediante extracción automatizada, traducción asistida por IA e integración fluida.
+
+> ¿Buscas la guía técnica completa paso a paso para Vite y React? Consulta nuestra documentación dedicada: [Traducir Vite y React con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md).
+
+## Tabla de Contenidos
+
+<TOC/>
+
+## El dilema de la adaptación: Por qué internacionalizar una aplicación existente es difícil
+
+Al internacionalizar una aplicación Vite y React existente, los desarrolladores se enfrentan a tres grandes obstáculos:
+
+1. **Disrupción del código**: Extraer manualmente cadenas a diccionarios JSON requiere modificar casi cada archivo de componente. Esto genera enormes diffs en git, conflictos de fusión y posibles regresiones en la interfaz.
+2. **Sobrecarga en la gestión de claves**: Inventar claves como `dashboard.hero.ctaButton` para cada fragmento de texto ralentiza el desarrollo y agrega carga mental en cada cambio de texto.
+3. **Trabajo tedioso de traducción**: Una vez extraídas las cadenas, traducir los diccionarios a 5, 10 o 20 idiomas implica copiar y pegar sin fin o contratar costosos servicios de traducción externa.
+
+Intlayer resuelve estos desafíos a nivel de arquitectura mediante **extracción asistida por compilador**, **diccionarios declarativos por componente** e **integración perfecta con Vite**.
+
+## Extracción automatizada de contenido (sin búsqueda manual de textos)
+
+En lugar de extraer manualmente cada cadena de tu JSX, Intlayer ofrece dos caminos sin fricción:
+
+### Opción A: La herramienta CLI de extracción (`npx intlayer extract`)
+
+Puedes ejecutar la herramienta de extracción de Intlayer directamente en tu base de código:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Este comando analiza tus componentes React, extrae las cadenas visibles para el usuario y genera automáticamente archivos de declaración de contenido (`.content.ts`) junto a cada componente. Tu lógica permanece declarativa, legible y con tipado estricto, sin necesidad de escribir claves manualmente.
+
+### Opción B: El compilador Intlayer (Extracción en tiempo de compilación)
+
+Con el compilador Intlayer habilitado en tu configuración, puedes seguir escribiendo tus componentes con texto plano en tu idioma predeterminado. Al compilar, el compilador extrae el texto e inyecta el contenido localizado automáticamente:
+
+```tsx fileName="src/App.tsx"
+// Escribe código React normal. El compilador extrae el texto automáticamente
+export default function App() {
+  return (
+    <section>
+      <h1>Bienvenido a nuestra plataforma</h1>
+      <p>Comience a explorar nuestras funciones modernas hoy.</p>
+    </section>
+  );
+}
+```
+
+En segundo plano, Intlayer genera el diccionario y vincula el componente a su contenido localizado, eliminando por completo la refactorización manual.
+
+En este caso, generará un archivo de declaración `src/App.content.ts` con la siguiente estructura:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    bienvenidoANuestraPlataforma: t({
+      es: "Bienvenido a nuestra plataforma",
+    }),
+    comienceAExplorarNuestrasFunciones: t({
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Traducción asistida por IA con tu LLM preferido
+
+Una vez extraído el contenido, traducirlo a docenas de idiomas no debería tomar días. Intlayer incluye una CLI de traducción con IA que se conecta directamente con OpenAI, Anthropic, DeepSeek o Mistral utilizando tus propias claves de API:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Configura tus idiomas y proveedor de IA en `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.SPANISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Aplicación SaaS moderna y panel de control desarrollados con Vite y React",
+  },
+};
+
+export default config;
+```
+
+Al ejecutar `npx intlayer fill`, se completan tus declaraciones de contenido con traducciones de alta calidad para todos los idiomas configurados:
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    bienvenidoANuestraPlataforma: t({
+      es: "Bienvenido a nuestra plataforma",
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      de: "Willkommen auf unserer Plattform",
+    }),
+    comienceAExplorarNuestrasFunciones: t({
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Dado que Intlayer proporciona `applicationContext` al modelo de lenguaje, las traducciones generadas respetan el contexto técnico, la voz de marca y los matices gramaticales mucho mejor que las herramientas genéricas.
+
+Para verificar que ninguna cadena se haya omitido antes de desplegar en producción:
+
+```bash
+npx intlayer test
+```
+
+## Integración con Vite y configuración del Provider
+
+Integrar Intlayer en Vite solo requiere agregar el plugin a `vite.config.ts` y envolver tu componente raíz con `IntlayerProvider`:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> Desde Intlayer v9, el compilador está incluido directamente en el plugin `intlayer()` y se activa automáticamente al configurar `compiler.enabled` en `intlayer.config.ts`.
+
+Envuelve tu aplicación con `IntlayerProvider` en el componente raíz:
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Cambiar de idioma dinámicamente
+
+Cambia de idioma fácilmente en cualquier lugar de tu aplicación utilizando el hook `useLocale`:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## SEO Multilingüe (Sitemap y Robots.txt)
+
+Intlayer incluye generadores como `generateSitemap` y `getMultilingualUrls` para crear archivos `sitemap.xml` y `robots.txt` multilingües listos para buscadores en despliegues estáticos con Vite:
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("Archivos SEO generados con éxito.");
+```
+
+Añade un hook `prebuild` en tu `package.json` para ejecutar este script antes de `vite build`:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## Profundización: ¿Listo para la implementación paso a paso?
+
+Esta guía proporciona una visión conceptual de cómo adaptar la internacionalización a una aplicación Vite y React existente en 2026 sin complicaciones arquitectónicas.
+
+Si estás listo para configurar cada parte de tu aplicación en detalle, incluyendo tipado estricto con TypeScript, diccionarios dinámicos y edición visual, consulta nuestra guía completa:
+
+👉 **[Guía completa para traducir Vite y React con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)**
+
+## Preguntas Frecuentes (FAQ)
+
+<FAQ>
+
+<Question title="¿Puedo hacer multilingüe mi aplicación Vite y React sin refactorizar manualmente todas las cadenas?">
+
+Sí. Puedes usar `npx intlayer extract` para detectar y extraer automáticamente cadenas hardcodeadas en declaraciones de contenido localizadas, o utilizar el compilador Intlayer para transformar componentes en tiempo de compilación manteniendo tu JSX habitual.
+
+</Question>
+<Question title="¿Cómo reduce Intlayer el tamaño del bundle en Vite en comparación con react-i18next o react-intl?">
+
+Intlayer utiliza definiciones de diccionario por componente y optimización por macros en tiempo de compilación. Tus bundles solo reciben los campos exactos requeridos por los componentes mostrados en pantalla, en lugar de importar archivos JSON completos. Además, los diccionarios dinámicos permiten cargar idiomas bajo demanda.
+
+</Question>
+<Question title="¿Puedo usar IA para traducir mis componentes existentes a múltiples idiomas?">
+
+Sí. La CLI de Intlayer incluye el comando `npx intlayer fill`, que se conecta a tu proveedor de IA preferido (OpenAI, Anthropic, Mistral, DeepSeek) para generar traducciones contextuales para todos los idiomas configurados.
+
+</Question>
+<Question title="¿Puedo migrar desde react-i18next o react-intl sin reescribir mis componentes?">
+
+Sí. Intlayer ofrece adaptadores de compatibilidad para `react-i18next` y `react-intl`, así como plugins para sincronizar archivos JSON existentes (`sync-json`).
+
+</Question>
+
+</FAQ>

package/blog/es/vue-i18n_vs_intlayer.md

@@ -33,15 +33,11 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 > **resumen**: Ambos pueden localizar aplicaciones Vue. Si deseas **contenido con alcance por componente**, **tipos estrictos en TypeScript**, **verificaciones de claves faltantes en tiempo de compilación**, **diccionarios optimizados por tree-shaking**, y **helpers integrados para router/SEO** además de **Editor Visual y traducciones asistidas por IA**, **Intlayer** es la opción más completa y moderna.
 
----
-
 ## Posicionamiento a alto nivel
 
 - **vue-i18n** - La biblioteca de i18n por excelencia para Vue. Formateo flexible de mensajes (estilo ICU), bloques SFC `<i18n>` para mensajes locales y un gran ecosistema. La seguridad y el mantenimiento a gran escala dependen principalmente de ti.
 - **Intlayer** - Modelo de contenido centrado en componentes para Vue/Vite/Nuxt con **tipado estricto en TS**, **verificaciones en tiempo de compilación**, **tree-shaking**, **helpers para router y SEO**, **Editor Visual/CMS** opcional y **traducciones asistidas por IA**.
 
----
-
 ## Comparación de características lado a lado (enfocado en Vue)
 
 | Característica                                   | **Intlayer**                                                                      | **vue-i18n**                                                                                    |
@@ -65,8 +61,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 | **Mantenibilidad en proyectos grandes**          | ✅ Fomenta una estructura modular y amigable con sistemas de diseño               | ✅ Posible, pero requiere una fuerte disciplina en archivos/espacios de nombres                 |
 | **Ecosistema / comunidad**                       | ⚠️ Más pequeño pero en rápido crecimiento                                         | ✅ Grande y maduro en el ecosistema Vue                                                         |
 
----
-
 ## Comparación en profundidad
 
 ### 1) Arquitectura y escalabilidad
@@ -76,8 +70,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué es importante:** En aplicaciones Vue grandes o sistemas de diseño, el **contenido modular** escala mejor que los catálogos monolíticos.
 
----
-
 ### 2) TypeScript y seguridad
 
 - **vue-i18n**: Buen soporte para TS; la **tipificación estricta de claves** generalmente requiere esquemas/generics personalizados y convenciones cuidadosas.
@@ -85,8 +77,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué es importante:** La tipificación fuerte detecta problemas **antes** de la ejecución.
 
----
-
 ### 3) Manejo de traducciones faltantes
 
 - **vue-i18n**: Advertencias y soluciones alternativas en **tiempo de ejecución** (por ejemplo, usar idioma o clave de reserva).
@@ -94,8 +84,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué es importante:** La aplicación de reglas en tiempo de compilación mantiene la interfaz de producción limpia y consistente.
 
----
-
 ### 4) Estrategia de rutas y URLs (Vue Router/Nuxt)
 
 - **Ambos** pueden trabajar con rutas localizadas.
@@ -103,8 +91,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué es importante:** Menos capas personalizadas y un **SEO más limpio** entre locales.
 
----
-
 ### 5) Rendimiento y comportamiento de carga
 
 - **vue-i18n**: Soporta mensajes de locales asíncronos; evitar la sobrecarga de paquetes depende de ti (divide los catálogos con cuidado).
@@ -112,8 +98,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué es importante:** Paquetes más pequeños y un inicio más rápido para aplicaciones Vue multilingües.
 
----
-
 ### 6) Experiencia del desarrollador y herramientas
 
 - **vue-i18n**: Documentación y comunidad maduras; normalmente dependerás de **plataformas de localización externas** para los flujos editoriales.
@@ -121,8 +105,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué importa:** Menores costos operativos y un ciclo de desarrollo–contenido más corto.
 
----
-
 ### 7) SEO, SSR y SSG
 
 - **Ambos** funcionan con Vue SSR y Nuxt.
@@ -130,8 +112,6 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 **Por qué importa:** SEO internacional sin configuraciones personalizadas.
 
----
-
 ## ¿Por qué Intlayer? (Problema y enfoque)
 
 La mayoría de los stacks i18n (incluyendo **vue-i18n**) comienzan desde **catálogos centralizados**:
@@ -221,8 +201,6 @@ Este enfoque:
 - **Evita claves muertas** (los componentes no usados no importan contenido).
 - **Optimiza la carga** (los componentes cargados perezosamente traen su contenido consigo).
 
----
-
 ## Características adicionales de Intlayer (relevantes para Vue)
 
 - **Soporte multiplataforma**: Funciona con Vue, Nuxt, Vite, React, Express y más.
@@ -240,23 +218,17 @@ Este enfoque:
 - **Servidor MCP y extensión para VSCode**: Automatiza los flujos de trabajo de i18n y la creación de contenido dentro de tu IDE.
 - **Interoperabilidad**: Puentes con **vue-i18n**, **react-i18next** y **react-intl** cuando sea necesario.
 
----
-
 ## ¿Cuándo elegir cuál?
 
 - **Elige vue-i18n** si quieres el **enfoque estándar de Vue**, te sientes cómodo gestionando catálogos/espacios de nombres tú mismo, y tu aplicación es de **tamaño pequeño a mediano** (o ya dependes de Nuxt i18n).
 - **Elige Intlayer** si valoras el **contenido con alcance por componente**, **TypeScript estricto**, **garantías en tiempo de compilación**, **tree-shaking**, y herramientas integradas para enrutamiento/SEO/editor-especialmente para **códigos grandes y modulares en Vue/Nuxt**.
 
----
-
 ## Interoperabilidad con vue-i18n
 
 `intlayer` también puede ayudarte a gestionar tus namespaces de `vue-i18n`.
 
 Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i18n favorita, e intlayer generará tus namespaces en la ubicación de tu elección (ejemplo: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## Notas prácticas para la migración (vue-i18n → Intlayer)
 
 - **Comience por función**: Mueva una ruta/vista/componente a la vez a los diccionarios locales de Intlayer.
@@ -265,8 +237,6 @@ Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i1
 - **Adopte los ayudantes de router/SEO**: Estandarice la detección de idioma y las etiquetas `hreflang`.
 - **Mida los paquetes**: Espere **reducciones en el tamaño del paquete** a medida que se excluye contenido no utilizado.
 
----
-
 ## Conclusión
 
 Tanto **vue-i18n** como **Intlayer** localizan bien las aplicaciones Vue. La diferencia es **cuánto debe construir usted mismo** para lograr una configuración robusta y escalable:

package/blog/es/what_is_internationalization.md

@@ -101,8 +101,6 @@ Este resumen conciso cubre los elementos principales que deberían ser internaci
 - **Sensibilidades culturales**  
   Iconos, colores y símbolos pueden tener diferentes significados en diferentes culturas. Es importante adaptar el contenido visual y textual para respetar matices culturales locales.
 
----
-
 ## Mejores Prácticas para Implementar la i18n
 
 - **Planificar Temprano**  
@@ -117,8 +115,6 @@ Este resumen conciso cubre los elementos principales que deberían ser internaci
 - **Reutilización de Traducciones**  
   Organiza tus archivos de traducción para que sean reutilizables a través de múltiples sitios web o aplicaciones. Por ejemplo, si tienes un pie de página o un encabezado multilingüe, configura archivos de traducción dedicados para que elementos comunes puedan ser aplicados fácilmente a todos los proyectos.
 
----
-
 ## Declaración de Contenido de Locales vs. Externalización de Contenido en CMS
 
 Al crear un sitio web, un **Sistema de Gestión de Contenidos (CMS) como WordPress, Wix o Drupal generalmente ofrece una mantenibilidad mejorada**. Especialmente para blogs o páginas de aterrizaje, debido a sus características integradas de i18n.
@@ -136,8 +132,6 @@ Dada estas dificultades, es común optar por un CMS sin cabeza para externalizar
 
 Es importante elegir la herramienta adecuada para tus necesidades y planear tu estrategia de internacionalización desde el principio. **Intlayer ofrece una solución atractiva al combinar la declaración de contenido de locales con un CMS sin cabeza que está perfectamente integrado, proporcionando lo mejor de ambos mundos.**
 
----
-
 ### Ver lista de Bibliotecas y herramientas de i18n por tecnología
 
 Si buscas una lista de bibliotecas y herramientas de i18n por tecnología, consulta los siguientes recursos:
@@ -155,8 +149,6 @@ Si buscas una lista de bibliotecas y herramientas de i18n por tecnología, consu
 - Svelte: [Ver lista de bibliotecas y herramientas de i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [Ver lista de bibliotecas y herramientas de i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Conclusión
 
 La internacionalización (i18n) es más que una tarea técnica; es una **inversión estratégica** que permite que tu software hable el idioma de tus usuarios, literalmente. Al abstraer elementos específicos de la localidad, acomodar variaciones lingüísticas y culturales, y planear para la expansión futura, empoderas tu producto para prosperar en un mercado global.

package/blog/fr/hreflang_guide_multilingual_seo.md

@@ -25,8 +25,6 @@ Vous avez traduit votre app. Vous avez déployé `/en`, `/fr`, `/es`. Et les uti
 
 La traduction est la moitié facile. La moitié difficile est de dire aux moteurs de recherche que ces pages sont la **même page dans une autre langue**, et non trois documents en concurrence les uns avec les autres. C'est ce que `hreflang` fait, et c'est là que la plupart des sites multilingues perdent silencieusement leur trafic.
 
----
-
 ## Ce qu'hreflang est réellement
 
 Une annotation sur une page disant : _cette URL a des versions équivalentes là-bas, pour ces langues._
@@ -42,8 +40,6 @@ Cela vous procure deux choses : la bonne version affichée au bon utilisateur, e
 
 Il est important d'être clair sur ce que ce n'est pas. Ce n'est **pas une redirection** — c'est un indice, et Google peut le contourner. Ce n'est **pas un boost de classement** — cela change _quelle_ version se classe, pas _si_ vous vous classez. Et Bing l'ignore complètement, s'appuyant plutôt sur `content-language` et le ciblage géographique.
 
----
-
 ## Où le déclarer
 
 Trois emplacements, tous valides. Choisissez-en un et restez-y — le même cluster déclaré à deux endroits est la façon dont les ensembles s'écartent.
@@ -54,8 +50,6 @@ Trois emplacements, tous valides. Choisissez-en un et restez-y — le même clus
 
 **HTTP `Link` header** est la seule option pour les fichiers non-HTML comme les PDF.
 
----
-
 ## Les règles
 
 ### Auto-référence et réciprocité
@@ -107,8 +101,6 @@ Ce que les gens comprennent mal, c'est ce que cela signifie. `x-default` n'est *
 
 Deux choses à bien comprendre : `x-default` est une entrée supplémentaire dans l'ensemble, pas un remplacement de celle qui se référence elle-même, et comme toute autre entrée, elle doit apparaître de manière identique sur chaque page du cluster.
 
----
-
 ## Le piège du canonical
 
 Chaque page localisée doit être **son propre canonical** :
@@ -131,8 +123,6 @@ indique que la page française est un doublon qui ne doit pas être indexé, tan
 
 **Le canonical est auto-référenciel par locale. `hreflang` décrit le cluster.**
 
----
-
 ## Choisir une structure d'URL
 
 `hreflang` annote les URLs, donc la structure vient en premier.
@@ -149,14 +139,11 @@ La seule structure à éviter : servir différentes langues à la **même URL**
 
 > Intlayer couvre les trois via `routing.mode` et `routing.domains`. Voir [domaines personnalisés](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/custom_domains.md) et la [référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
----
-
 ## Implémentation
 
 Écrire ces balises à la main ne survivra pas au contact avec une deuxième locale. Dérivez-les plutôt de votre liste de locales.
 
 <Steps>
-
 <Step number={1} title="Émettre le cluster sur chaque page">
 
 Même ensemble partout, canonical par locale, URLs absolues, `x-default` inclus.
@@ -246,7 +233,6 @@ export const Route = createFileRoute("/{-$locale}/about")({
 </Tabs>
 
 </Step>
-
 <Step number={2} title="Ou déplacez-le tout dans le sitemap">
 
 À grande échelle, gardez les annotations hors de vos pages entièrement. `generateSitemap` émet des alternates `xhtml:link` par entrée, en lisant les locales et le mode de routage depuis votre config :
@@ -269,7 +255,6 @@ Deux options à connaître :
 - `entryPerLocale` (défaut `false`) — par défaut une entrée `<url>` unique porte tous les alternates. Les deux formes sont valides, mais seule une URL listée en tant que `<loc>` compte comme _soumise_ dans Search Console ; les locales en alternates uniquement restent découvrables mais non attribuées à aucun sitemap. L'activation de cette option donne à chaque URL localisée sa propre entrée avec l'ensemble complet des alternates répétés. Cela multiplie les entrées par le nombre de locales, donc surveillez la limite de 50 000 URLs / 50 MB et divisez en un index de sitemap au-delà.
 
 </Step>
-
 <Step number={3} title="Vérifiez ce que reçoit le crawler">
 
 `hreflang` échoue silencieusement, donc vérifiez-le plutôt que de supposer.
@@ -282,8 +267,6 @@ Pour un crawl spécifique multilingue, le [Intlayer SEO Scanner](https://intlaye
 
 </Steps>
 
----
-
 ## Liste de contrôle
 
 - [ ] Chaque locale a une URL distincte et crawlable
@@ -297,8 +280,6 @@ Pour un crawl spécifique multilingue, le [Intlayer SEO Scanner](https://intlaye
 - [ ] Déclarés exactement à un seul endroit
 - [ ] Pas de redirects alternates
 
----
-
 ## Conclusion
 
 `hreflang` est simple et inflexible. Une balise de retour manquante, une URL relative, un canonical inter-locales, et le cluster est rejeté sans erreur nulle part. Chacun de ces problèmes provient de la rédaction manuelle des tags.

package/blog/fr/i18n_meaning.md

@@ -92,8 +92,6 @@ Maintenant que nous avons établi la véritable **signification de i18n**, comme
 - **Abstraire tout texte destiné à l'utilisateur :** Assurez-vous qu'aucun texte codé en dur n'existe dans vos composants UI.
 - **Employez un système robuste de gestion des traductions :** Des outils comme **Intlayer** comblent le fossé entre les développeurs et les traducteurs. Intlayer agit comme un CMS headless étroitement intégré à votre codebase, permettant aux gestionnaires de contenu de mettre à jour les traductions visuellement sans qu'un développeur ait besoin de déclencher une nouvelle compilation.
 
----
-
 ### Voir la liste des bibliothèques et outils i18n par technologie
 
 Si vous recherchez une liste des bibliothèques et outils i18n par technologie, consultez les ressources suivantes :
@@ -112,8 +110,6 @@ Si vous recherchez une liste des bibliothèques et outils i18n par technologie,
 - Svelte: [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/frameworks/svelte.md)
 - React Native : [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Conclusion
 
 La **signification de l'i18n** est un concept fondamental pour toute entreprise numérique moderne visant un impact mondial. Bien au-delà d'être simplement une abréviation technologique amusante pour « internationalization », l'i18n représente l'architecture technique requise pour adapter en toute transparence votre logiciel à diverses langues, cultures et normes régionales.