@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/blog/en-GB/intlayer_with_next-i18next.md

@@ -34,17 +34,6 @@ author: aymericzip
 
 <TOC/>
 
-## What is next-i18next?
-
-**next-i18next** is one of the most popular internationalisation (i18n) frameworks for Next.js applications. Built on top of the powerful **i18next** ecosystem, it provides a comprehensive solution for managing translations, localisation, and language switching in Next.js projects.
-
-However, next-i18next comes with some challenges:
-
-- **Complex configuration**: Setting up next-i18next requires multiple configuration files and careful setup of server-side and client-side i18n instances.
-- **Scattered translations**: Translation files are typically stored in separate directories from components, making it harder to maintain consistency.
-- **Manual namespace management**: Developers need to manually manage namespaces and ensure proper loading of translation resources.
-- **Limited type safety**: TypeScript support requires additional configuration and does not provide automatic type generation for translations.
-
 ## What is Intlayer?
 
 **Intlayer** is an innovative, open-source internationalisation library designed to address the shortcomings of traditional i18n solutions. It offers a modern approach to content management in Next.js applications.

package/blog/en-GB/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="How to automate your next-intl JSON translations using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# Table of Contents
+
+<TOC/>
+
 ## What is Intlayer?
 
 **Intlayer** is an innovative, open-source internationalisation library designed to address the shortcomings of traditional i18n solutions. It offers a modern approach to content management in Next.js applications.

package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md

@@ -282,34 +282,6 @@ Here is an example of the impact of bundle size optimisation using `intlayer` in
 
 ---
 
-## DX, tooling & maintenance
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Commonly paired with external localisation platforms and editorial workflows.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Commonly paired with external localisation platforms and editorial workflows.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- Ships a **free Visual Editor** and **optional CMS** (Git-friendly or externalised), plus a **VSCode extension** and **AI-assisted translations** using your own provider keys.
-
-  </Column>
-</Columns>
-
-**Why it matters:** Lowers operational costs and shortens the feedback loop between developers and content authors.
-
 ## Integration with localisation platforms (TMS)
 
 Large organisations often rely on Translation Management Systems (TMS) like **Crowdin**, **Phrase**, **Lokalise**, **Localizely**, or **Localazy**.
@@ -1177,6 +1149,127 @@ export default robots;
 
 ---
 
+### Middleware for locale routing
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+Add a middleware to handle locale detection and routing:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // exclude files with extensions
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // Match all paths except the ones starting with these and files with an extension
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+Add a middleware to handle locale detection and routing:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // Skip API, Next internals and static assets
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayer provides built-in middleware handling through the `next-intlayer` package configuration.
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// applies this middleware only to files in the app directory
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+The setup of the middleware is centralised in the `intlayer.config.ts` file.
+
+  </Tab>
+</Tabs>
+
+### Setup checklist and good practices
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- Ensure `lang` and `dir` are set on the root `<html>` in `src/app/[locale]/layout.tsx`.
+- Split translations into namespaces (for example `common.json`, `about.json`) under `src/locales/<locale>/`.
+- Only load required namespaces in client components using `useTranslation('<ns>')` and by scoping `I18nProvider` with the same namespaces.
+- Keep pages static when possible: export `export const dynamic = 'force-static'` on pages; set `dynamicParams = false` and implement `generateStaticParams`.
+- Use sync server components nested under client boundaries by passing already-computed strings or the `t` function and the `locale`.
+- For SEO, set `alternates.languages` in metadata, list localised URLs in `sitemap.ts`, and disallow duplicate localised routes in `robots.ts`.
+- Prefer locale-aware formatters (e.g., `Intl.NumberFormat(locale)`) and memoise them on the client if using React < 19.
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **Set html `lang` and `dir`**: In `src/app/[locale]/layout.tsx`, compute `dir` via `getLocaleDirection(locale)` and set `<html lang={locale} dir={dir}>`.
+- **Split messages by namespace**: Organise JSON per locale and namespace (e.g., `common.json`, `about.json`).
+- **Minimise client payload**: On pages, send only required namespaces to `NextIntlClientProvider` (e.g., `pick(messages, ['common', 'about'])`).
+- **Prefer static pages**: Export `export const dynamic = 'force-static'` and generate static params for all `locales`.
+- **Synchronous server components**: Keep server components sync by passing precomputed strings (translated labels, formatted numbers) rather than async calls or non-serialisable functions.
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **Modular content**: Co-locate content dictionaries with components using `.content.{ts|js|json}` files.
+- **Type safety**: Leverage TypeScript integration for compile-time content validation.
+- **Build-time optimisation**: Use Intlayer's build tools for automatic tree-shaking and bundle optimisation.
+- **Integrated tooling**: Take advantage of built-in routing, SEO helpers, and visual editor support.
+
+  </Tab>
+</Tabs>
+
+---
+
 ## And the winner is…
 
 It’s not simple. Each option has trade-offs. Here’s how I see it:

package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md

@@ -139,6 +139,20 @@ We evaluate:
 
 ---
 
+## Interoperability with `react-intl` and `react-i18next`
+
+`intlayer` can also help to manage your `react-intl` and `react-i18next` namespaces.
+
+Using `intlayer`, you can declare your content in the format of your favourite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
+
+---
+
+## GitHub STARs
+
+GitHub stars are a strong indicator of a project's popularity, community trust, and long-term relevance. While not a direct measure of technical quality, they reflect how many developers find the project useful, follow its progress, and are likely to adopt it. For estimating the value of a project, stars help compare traction across alternatives and provide insights into ecosystem growth.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=formatjs/formatjs%2Ci18next/react-i18next%2Caymericzip/intlayer&type=date&legend=top-left)](https://www.star-history.com/#formatjs/formatjs&i18next/react-i18next&aymericzip/intlayer)
+
 ## Conclusion
 
 All three libraries localise React effectively. The differentiator is how much **infrastructure** you must build to reach a **safe, scalable** setup:

package/blog/en-GB/vue-i18n_vs_intlayer.md

@@ -251,6 +251,22 @@ This approach:
 
 ---
 
+## Interoperability with vue-i18n
+
+`intlayer` can also help to manage your `vue-i18n` namespaces.
+
+Using `intlayer`, you can declare your content in the format of your favourite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
+
+---
+
+## GitHub STARs
+
+GitHub stars are a strong indicator of a project's popularity, community trust, and long-term relevance. While not a direct measure of technical quality, they reflect how many developers find the project useful, follow its progress, and are likely to adopt it. For estimating the value of a project, stars help compare traction across alternatives and provide insights into ecosystem growth.
+
+[![Star History Chart](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+---
+
 ## Conclusion
 
 Both **vue-i18n** and **Intlayer** localise Vue apps well. The difference is **how much you must build yourself** to achieve a robust, scalable setup:

package/blog/es/intlayer_with_i18next.md

@@ -34,6 +34,10 @@ author: aymericzip
 
 <iframe title="Cómo automatizar tus traducciones JSON de i18next usando Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+## Tabla de contenidos
+
+<TOC/>
+
 ## ¿Qué es Intlayer?
 
 **Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización, diseñada para abordar las limitaciones de las soluciones i18n tradicionales. Ofrece un enfoque moderno para la gestión de contenido en aplicaciones JavaScript.

package/blog/es/intlayer_with_next-i18next.md

@@ -34,17 +34,6 @@ author: aymericzip
 
 <TOC/>
 
-## ¿Qué es next-i18next?
-
-**next-i18next** es uno de los frameworks de internacionalización (i18n) más populares para aplicaciones Next.js. Construido sobre el poderoso ecosistema de **i18next**, proporciona una solución integral para gestionar traducciones, localización y cambio de idioma en proyectos Next.js.
-
-Sin embargo, next-i18next presenta algunos desafíos:
-
-- **Configuración compleja**: Configurar next-i18next requiere múltiples archivos de configuración y una configuración cuidadosa de las instancias i18n tanto del lado del servidor como del cliente.
-- **Traducciones dispersas**: Los archivos de traducción suelen almacenarse en directorios separados de los componentes, lo que dificulta mantener la consistencia.
-- **Gestión manual de namespaces**: Los desarrolladores deben gestionar manualmente los namespaces y asegurar la correcta carga de los recursos de traducción.
-- **Seguridad de tipos limitada**: El soporte para TypeScript requiere configuración adicional y no proporciona generación automática de tipos para las traducciones.
-
 ## ¿Qué es Intlayer?
 
 **Intlayer** es una biblioteca innovadora y de código abierto para internacionalización, diseñada para abordar las deficiencias de las soluciones i18n tradicionales. Ofrece un enfoque moderno para la gestión de contenido en aplicaciones Next.js.

package/blog/es/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="Cómo automatizar tus traducciones JSON de next-intl usando Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# Tabla de contenidos
+
+<TOC/>
+
 ## ¿Qué es Intlayer?
 
 **Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización, diseñada para abordar las limitaciones de las soluciones tradicionales de i18n. Ofrece un enfoque moderno para la gestión de contenido en aplicaciones Next.js.

package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md

@@ -282,34 +282,6 @@ Aquí un ejemplo del impacto de la optimización del tamaño del paquete usando
 
 ---
 
-## DX, herramientas y mantenimiento
-
-<Columns>
-  <Column>
-
-**next-intl**
-
-- Comúnmente se usa junto con plataformas externas de localización y flujos editoriales.
-
-  </Column>
-  <Column>
-
-**next-i18next**
-
-- Comúnmente se usa junto con plataformas externas de localización y flujos editoriales.
-
-  </Column>
-  <Column>
-
-**intlayer**
-
-- Incluye un **Editor Visual gratuito** y un **CMS opcional** (compatible con Git o externalizado), además de una **extensión para VSCode** y **traducciones asistidas por IA** utilizando tus propias claves de proveedor.
-
-  </Column>
-</Columns>
-
-**Por qué es importante:** Reduce los costos operativos y acorta el ciclo entre desarrolladores y autores de contenido.
-
 ## Integración con plataformas de localización (TMS)
 
 Las grandes organizaciones suelen depender de Sistemas de Gestión de Traducción (TMS) como **Crowdin**, **Phrase**, **Lokalise**, **Localizely** o **Localazy**.
@@ -1281,6 +1253,127 @@ export default robots;
 
 ---
 
+### Middleware para enrutamiento de idiomas
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+Añade un middleware para manejar la detección de idiomas y el enrutamiento:
+
+```ts fileName="src/middleware.ts"
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
+
+const PUBLIC_FILE = /\.[^/]+$/; // excluir archivos con extensiones
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  if (
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
+    PUBLIC_FILE.test(pathname)
+  ) {
+    return;
+  }
+
+  const hasLocale = locales.some(
+    (l) => pathname === "/" + l || pathname.startsWith("/" + l + "/")
+  );
+  if (!hasLocale) {
+    const locale = defaultLocale;
+    const url = request.nextUrl.clone();
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
+    return NextResponse.redirect(url);
+  }
+}
+
+export const config = {
+  matcher: [
+    // Coincide con todas las rutas excepto las que comienzan con estas y archivos con extensión
+    "/((?!api|_next|static|.*\\..*).*)",
+  ],
+};
+```
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+Añade un middleware para manejar la detección de idiomas y el enrutamiento:
+
+```ts fileName="src/middleware.ts"
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
+
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+
+export const config = {
+  // Omitir API, elementos internos de Next y activos estáticos
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
+};
+```
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+Intlayer proporciona manejo de middleware incorporado a través de la configuración del paquete `next-intlayer`.
+
+```ts fileName="src/middleware.ts"
+import { intlayerProxy } from "next-intlayer/proxy";
+
+export const middleware = intlayerProxy();
+
+// aplica este middleware solo a archivos en el directorio app
+export const config = {
+  matcher: "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+La configuración del middleware está centralizada en el archivo `intlayer.config.ts`.
+
+  </Tab>
+</Tabs>
+
+### Lista de verificación de configuración y buenas prácticas
+
+<Tabs defaultTab="next-intl" group='techno'>
+  <Tab label="next-i18next" value="next-i18next">
+
+- Asegúrate de que `lang` y `dir` estén configurados en el `<html>` raíz en `src/app/[locale]/layout.tsx`.
+- Divide las traducciones en namespaces (por ejemplo `common.json`, `about.json`) bajo `src/locales/<locale>/`.
+- Carga solo los namespaces necesarios en componentes cliente usando `useTranslation('<ns>')` y delimitando `I18nProvider` con los mismos namespaces.
+- Mantén las páginas estáticas cuando sea posible: exporta `export const dynamic = 'force-static'` en páginas; establece `dynamicParams = false` e implementa `generateStaticParams`.
+- Utiliza componentes server síncronos anidados bajo límites cliente pasando strings ya computados o la función `t` y `locale`.
+- Para SEO, establece `alternates.languages` en metadata, lista URLs localizadas en `sitemap.ts` y deshabilita rutas localizadas duplicadas en `robots.ts`.
+- Prefiere formateadores conscientes de locale (por ejemplo, `Intl.NumberFormat(locale)`) y memorízalos en el cliente si usas React < 19.
+
+  </Tab>
+  <Tab label="next-intl" value="next-intl">
+
+- **Configura `lang` y `dir` en html**: En `src/app/[locale]/layout.tsx`, calcula `dir` vía `getLocaleDirection(locale)` y establece `<html lang={locale} dir={dir}>`.
+- **Divide mensajes por namespace**: Organiza JSON por locale y namespace (por ejemplo, `common.json`, `about.json`).
+- **Minimiza la carga del cliente**: En páginas, envía solo los namespaces necesarios a `NextIntlClientProvider` (por ejemplo, `pick(messages, ['common', 'about'])`).
+- **Prefiere páginas estáticas**: Exporta `export const dynamic = 'force-static'` y genera parámetros estáticos para todos los `locales`.
+- **Componentes server síncronos**: Mantén los componentes server síncronos pasando strings precomputados (etiquetas traducidas, números formateados) en lugar de llamadas asincrónicas o funciones no serializables.
+
+  </Tab>
+  <Tab label="intlayer" value="intlayer">
+
+- **Contenido modular**: Co-localiza diccionarios de contenido con componentes usando archivos `.content.{ts|js|json}`.
+- **Seguridad de tipos**: Aprovecha la integración de TypeScript para validación de contenido en tiempo de compilación.
+- **Optimización en tiempo de compilación**: Utiliza las herramientas de compilación de Intlayer para tree-shaking automático y optimización de bundling.
+- **Herramientas integradas**: Aprovecha el soporte incorporado para enrutamiento, helpers de SEO y editor visual.
+
+  </Tab>
+</Tabs>
+
+---
+
 ## Y el ganador es…
 
 No es sencillo. Cada opción tiene sus ventajas y desventajas. Así es como lo veo:

package/blog/es/rag_powered_documentation_assistant.md

@@ -341,3 +341,16 @@ Y si también estás experimentando con RAG, me encantaría saber cómo lo está
 </Step>
 
 </Steps>
+## Conclusión
+
+RAG es una de las formas más simples y poderosas de hacer que los LLMs sean prácticos. Al combinar **retrieval + generation**, puedes convertir documentos estáticos en un **asistente inteligente** y, al mismo tiempo, obtener un flujo continuo de información del producto.
+
+Para mí, este proyecto demostró que RAG no es solo un truco técnico. Es una forma de transformar la documentación en:
+
+- un sistema de soporte interactivo
+- un canal de retroalimentación
+- una herramienta de estrategia de producto
+
+👉 [Prueba la demo aquí](https://intlayer.org/doc/why) 👉 [Consulta la plantilla de código en GitHub](https://github.com/aymericzip/smart_doc_RAG)
+
+Y si también estás experimentando con RAG, me encantaría saber cómo lo estás utilizando.

package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md

@@ -137,6 +137,14 @@ Evaluamos:
 
 ---
 
+## Interoperabilidad con `react-intl` y `react-i18next`
+
+`intlayer` también puede ayudarte a gestionar tus namespaces de `react-intl` y `react-i18next`.
+
+Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i18n favorita, e intlayer generará tus namespaces en la ubicación que elijas (ejemplo: `/messages/{{locale}}/{{namespace}}.json`).
+
+---
+
 ## Notas prácticas para la migración (react-intl / react-i18next → Intlayer)
 
 - **Migra de forma incremental**: Comienza con una funcionalidad o ruta; mantén los catálogos heredados en paralelo durante la transición.

package/blog/es/vue-i18n_vs_intlayer.md

@@ -249,6 +249,14 @@ Este enfoque:
 
 ---
 
+## 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.

package/blog/fr/i18n_meaning.md

@@ -22,3 +22,98 @@ author: aymericzip
 ![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
 
 ## Comprendre la signification de "i18n"
+
+## La Signification Fondamentale de l'i18n en Pratique
+
+Comprendre la signification de l'i18n va au-delà de simplement connaître ce que l'acronyme signifie. Il s'agit de reconnaître les principes architecturaux qui le sous-tendent. Quand un projet est correctement « internationalisé », cela signifie que les développeurs ont découplé le contenu du code.
+
+Au lieu de coder en dur le texte dans l'application comme ceci :
+
+```javascript
+<button>Submit</button>
+```
+
+Une application prête pour l'i18n utilise des clés de traduction ou des variables :
+
+```javascript
+<button>{t("submit_button")}</button>
+```
+
+Cela garantit que l'application peut charger dynamiquement le dictionnaire de langue correct (par exemple, anglais, espagnol, japonais) en fonction des préférences de l'utilisateur, sans réécrire le composant.
+
+## Pourquoi la signification de l'i18n est cruciale pour votre entreprise
+
+Comprendre la **signification de l'i18n** n'est que la première étape. Comprendre _pourquoi_ c'est si critique pour les produits numériques modernes est ce qui distingue les applications mondiales réussies des applications locales.
+
+### Surmonter les barrières linguistiques
+
+L'application la plus évidente du sens de l'i18n est la traduction. En internationalisant votre application dès le départ, vous construisez une base qui vous permet de traduire votre interface dans des dizaines de langues sans effort. C'est essentiel pour déverrouiller de nouveaux marchés mondiaux.
+
+### Adaptation culturelle et régionale
+
+La signification de l'i18n va au-delà de la langue. La véritable internationalisation supporte :
+
+- **Formats de date et heure :** Affichage de `MM/DD/YYYY` pour les utilisateurs américains par rapport à `DD/MM/YYYY` pour les utilisateurs européens.
+- **Formatage des nombres :** Reconnaissance que `1,000.50` aux États-Unis est souvent écrit comme `1.000,50` dans certaines parties de l'Europe.
+- **Devises :** Adaptation de `$99.00` par rapport à `99,00 €`.
+- **Directionnalité du texte :** Support des langues de droite à gauche (RTL) comme l'arabe et l'hébreu.
+
+### Performances SEO améliorées
+
+Les moteurs de recherche donnent la priorité au contenu pertinent pour la langue et la région de l'utilisateur. L'application des principes derrière la signification i18n vous permet de structurer votre site web (par exemple, en utilisant des balises `hreflang`, des URLs localisées) pour vous classer plus haut dans plusieurs pays, générant du trafic organique mondial.
+
+## Internationalization (i18n) vs. Localization (l10n)
+
+Pour bien comprendre la **signification de i18n**, vous devez la différencier de **l10n** (localization).
+
+- **i18n (Internationalization) :** La _préparation technique_ et le cadre de conception structurelle qui rend l'adaptation possible. Exemples : supporter l'encodage UTF-8, abstraire les chaînes de texte et rendre les mises en page UI flexibles pour les mots plus longs.
+- **l10n (Localization) :** L'_adaptation réelle_ du produit pour une locale spécifique. Exemples : traduire le texte anglais en français, ajuster les images pour respecter les normes culturelles et définir la devise locale.
+
+Pensez à **i18n** comme construire une voiture où le volant peut être déplacé soit à gauche soit à droite. **l10n** est l'acte de déplacer effectivement le volant vers la droite pour vendre la voiture au Royaume-Uni.
+
+## Idées reçues courantes sur la signification de l'i18n
+
+1. **« L'i18n signifie simplement traduction. »**
+   Bien que la traduction soit une grande partie du résultat final, la véritable signification de l'i18n englobe le formatage, les règles de pluralisation, la direction du texte et la préparation architecturale.
+2. **« Nous pouvons ajouter l'i18n plus tard. »**
+   Adapter une application à l'internationalisation rétrospectivement est notorieusement difficile. Les chaînes codées en dur, les composants UI rigides et les formats de date incompatibles peuvent entraîner une dette technique massive. Planifier l'i18n dès le départ est une meilleure pratique fondamentale.
+
+## Comment implémenter i18n efficacement
+
+![i18n pain illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/pain_i18n.webp)
+
+Maintenant que nous avons établi la véritable **signification de i18n**, comment l'appliquer ?
+
+- **Utilisez un framework i18n établi :** Ne réinventez pas la roue. Que vous utilisiez React, Vue, Next.js ou du JavaScript pur, il existe des bibliothèques i18n spécifiques conçues pour gérer les tâches lourdes (comme la pluralisation et l'interpolation).
+- **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 :
+
+### Pour les systèmes de gestion de contenu (CMS)
+
+- WordPress : [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/CMS/wordpress.md)
+- Wix : [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/CMS/wix.md)
+- Drupal : [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/CMS/drupal.md)
+
+### Pour les applications JavaScript (Frontend)
+
+- React: [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/frameworks/react.md)
+- Angular: [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/frameworks/angular.md)
+- Vue: [Voir la liste des bibliothèques et outils i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/list_i18n_technologies/frameworks/vue.md)
+- 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.
+
+En comprenant la signification de l'i18n et en adoptant ses principes dès le début de votre cycle de développement, vous économisez un temps d'ingénierie considérable, évitez la dette technique future et assurez que votre application offre une expérience native et accueillante aux utilisateurs du monde entier.
+
+Que vous construisiez une application mobile, une plateforme SaaS ou un outil d'entreprise, en embrassant la véritable signification de l'i18n, vous assurez que votre produit puisse s'adapter et plaire aux utilisateurs du monde entier, sans besoin de refonte constante du code. En tirant parti des meilleures pratiques, des frameworks robustes et de la déclaration de contenu localisé avec des plateformes comme Intlayer, les équipes produit peuvent fournir des expériences logicielles véritablement mondiales.

package/blog/fr/intlayer_with_next-i18next.md

@@ -34,17 +34,6 @@ author: aymericzip
 
 <TOC/>
 
-## Qu'est-ce que next-i18next ?
-
-**next-i18next** est l'un des frameworks d'internationalisation (i18n) les plus populaires pour les applications Next.js. Construit sur l'écosystème puissant de **i18next**, il offre une solution complète pour gérer les traductions, la localisation et le changement de langue dans les projets Next.js.
-
-Cependant, next-i18next présente certains défis :
-
-- **Configuration complexe** : La mise en place de next-i18next nécessite plusieurs fichiers de configuration et une configuration minutieuse des instances i18n côté serveur et côté client.
-- **Traductions dispersées** : Les fichiers de traduction sont généralement stockés dans des répertoires séparés des composants, ce qui complique le maintien de la cohérence.
-- **Gestion manuelle des namespaces** : Les développeurs doivent gérer manuellement les namespaces et s'assurer du chargement correct des ressources de traduction.
-- **Sécurité de type limitée** : Le support de TypeScript nécessite une configuration supplémentaire et ne fournit pas de génération automatique de types pour les traductions.
-
 ## Qu'est-ce qu'Intlayer ?
 
 **Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les lacunes des solutions i18n traditionnelles. Elle propose une approche moderne de la gestion de contenu dans les applications Next.js.

package/blog/fr/intlayer_with_next-intl.md

@@ -29,6 +29,10 @@ author: aymericzip
 
 <iframe title="Comment automatiser vos traductions JSON next-intl avec Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+# Table of Contents
+
+<TOC/>
+
 ## Qu'est-ce qu'Intlayer ?
 
 **Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle propose une approche moderne de la gestion de contenu dans les applications Next.js.

package/blog/fr/intlayer_with_react-i18next.md

@@ -40,14 +40,6 @@ Découvrez une comparaison concrète avec react-i18next dans notre article de bl
 
 ## Pourquoi combiner Intlayer avec react-i18next ?
 
-Alors qu'Intlayer propose une excellente solution i18n autonome (voir notre [guide d'intégration React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)), vous pourriez vouloir la combiner avec react-i18next pour plusieurs raisons :
-
-**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les lacunes des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications React.
-
-Consultez une comparaison concrète avec react-i18next dans notre article de blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md).
-
-## Pourquoi combiner Intlayer avec react-i18next ?
-
 Bien qu'Intlayer fournisse une excellente solution i18n autonome (voir notre [guide d'intégration React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)), vous pourriez vouloir le combiner avec react-i18next pour plusieurs raisons :
 
 1. **Base de code existante** : Vous disposez d'une implémentation react-i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.

package/blog/fr/list_i18n_technologies/frameworks/angular.md

@@ -19,8 +19,6 @@ slugs:
 author: aymericzip
 ---
 
-# Explorer les solutions i18n pour traduire votre site Web Angular
-
 ## Dans le monde interconnecté d'aujourd'hui, offrir votre site Web en plusieurs langues peut considérablement élargir votre portée et améliorer l'expérience utilisateur. Pour les développeurs travaillant avec Angular, la mise en œuvre de l'internationalisation (i18n) est cruciale pour gérer efficacement les traductions tout en préservant la structure de l'application, le référencement et la performance. Dans cet article, nous explorerons diverses approches i18n - des solutions intégrées d'Angular aux bibliothèques tiers populaires - pour vous aider à déterminer la meilleure option pour votre projet.
 
 ![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)