@intlayer/docs 7.0.4-canary.0 → 7.0.5

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

@@ -1,325 +1,122 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer and react-intl
-description: Integrate Intlayer with react-intl for a React app
+updatedAt: 2025-10-29
+title: How to automate your react-intl JSON translations using Intlayer
+description: Automate your JSON translations with Intlayer and react-intl for enhanced internationalisation in React applications.
 keywords:
   - react-intl
   - Intlayer
   - Internationalisation
   - Blog
-  - Next.js
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Change to syncJSON plugin
 ---
 
-# React Internationalization (i18n) with **react-intl** and Intlayer
+# How to automate your react-intl JSON translations using Intlayer
 
-This guide shows how to integrate **Intlayer** with **react-intl** to manage translations in a React application. You’ll declare your translatable content with Intlayer and then consume those messages with **react-intl**, a popular library from the [FormatJS](https://formatjs.io/docs/react-intl) ecosystem.
+## What is Intlayer?
 
-## Overview
+**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 React applications.
 
-- **Intlayer** allows you to store translations in **component-level** content declaration files (JSON, JS, TS, etc.) within your project.
-- **react-intl** provides React components and hooks (like `<FormattedMessage>` and `useIntl()`) to display localized strings.
+See a concrete comparison with react-intl in our [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/react-i18next_vs_react-intl_vs_intlayer.md) blog post.
 
-By configuring Intlayer to **export** translations in a **react-intl–compatible** format, you can automatically **generate** and **update** the message files that `<IntlProvider>` (from react-intl) requires.
+## Why Combine Intlayer with react-intl?
 
----
+While Intlayer provides an excellent standalone i18n solution (see our [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)), you might want to combine it with react-intl for several reasons:
 
-## Why Use Intlayer with react-intl?
+1. **Existing codebase**: You have an established react-intl implementation and want to gradually migrate to Intlayer's improved developer experience.
+2. **Legacy requirements**: Your project requires compatibility with existing react-intl plugins or workflows.
+3. **Team familiarity**: Your team is comfortable with react-intl but wants better content management.
 
-1. **Per-Component Dictionarys**  
-   Intlayer content declaration files can live alongside your React components, preventing “orphaned” translations if components are moved or removed. For example:
+**For that, Intlayer can be implemented as an adapter for react-intl to help automate your JSON translations in CLI or CI/CD pipelines, test your translations, and more.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Intlayer content declaration
-               └── index.tsx          # React component
-   ```
+This guide shows you how to leverage Intlayer's superior content declaration system while maintaining compatibility with react-intl.
 
-2. **Centralized Translations**  
-   Each content declaration file collects all translations needed by a component. This is particularly helpful in TypeScript projects: missing translations can be caught at **compile time**.
+## Table of Contents
 
-3. **Automatic Build and Regeneration**  
-   Whenever you add or update translations, Intlayer regenerates message JSON files. You can then pass these into react-intl’s `<IntlProvider>`.
+<TOC/>
 
----
+## Step-by-Step Guide to Set Up Intlayer with react-intl
 
-## Installation
+### Step 1: Install Dependencies
 
-In a typical React project, install the following:
+Install the necessary packages:
 
-```bash
-# with npm
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# with yarn
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# with pnpm
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### Why These Packages?
+**Package descriptions:**
 
-- **intlayer**: Core CLI and library that scans for content declarations, merges them, and builds dictionary outputs.
-- **react-intl**: The main library from FormatJS that provides `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` and other internationalization primitives.
+- **intlayer**: Core library for internationalisation management, content declaration, and building
+- **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to react-intl compatible JSON format
 
-> If you don’t already have React itself installed, you’ll need it, too (`react` and `react-dom`).
+### Step 2: Implement the Intlayer plugin to wrap the JSON
 
-## Configuring Intlayer to Export react-intl Messages
+Create an Intlayer configuration file to define your supported locales:
 
-In your project’s root, create **`intlayer.config.ts`** (or `.js`, `.mjs`, `.cjs`) like so:
+**If you want to also export JSON dictionaries for react-intl**, add the `syncJSON` plugin:
 
-```typescript title="intlayer.config.ts"
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
 const config: IntlayerConfig = {
   internationalization: {
-    // Add as many locales as you wish
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Tells Intlayer to generate message files for react-intl
-    dictionaryOutput: ["react-intl"],
-
-    // The directory where Intlayer will write your message JSON files
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **Note**: For other file extensions (`.mjs`, `.cjs`, `.js`), see the [Intlayer docs](https://intlayer.org/en-GB/doc/concept/configuration) for usage details.
-
----
-
-## Creating Your Intlayer Dictionarys
-
-Intlayer scans your codebase (by default, under `./src`) for files matching `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
-Here’s a **TypeScript** example:
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "key" becomes the top-level message key in your react-intl JSON file
-  key: "my-component",
-
-  content: {
-    // Each call to t() declares a translatable field
-    helloWorld: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    description: t({
-      en: "This is a description",
-      fr: "Ceci est une description",
-      es: "Esta es una descripción",
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
     }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-If you prefer JSON or different JS flavors (`.cjs`, `.mjs`), the structure is largely the same, see [Intlayer docs on content declaration](https://intlayer.org/en-GB/doc/concept/content).
-
----
-
-## Building the react-intl Messages
-
-To generate the actual message JSON files for **react-intl**, run:
-
-```bash
-# with npm
-npx intlayer dictionaries build
-
-# with yarn
-yarn intlayer build
-
-# with pnpm
-pnpm intlayer build
-```
-
-This scans all `*.content.*` files, compiles them, and writes the results to the directory specified in your **`intlayer.config.ts`** , in this example, `./react-intl/messages`.  
-A typical output might look like:
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en-GB.json
-        ├── fr.json
-        └── es.json
-```
-
-Each file is a JSON object whose **top-level keys** correspond to each **`content.key`** from your declarations. The **sub-keys** (like `helloWorld`) reflect the translations declared within that content item.
-
-For example, the **en-GB.json** might look like:
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## Initializing react-intl in Your React App
-
-### 1. Load the Generated Messages
-
-Where you configure your app’s root component (e.g., `src/main.tsx` or `src/index.tsx`), you’ll need to:
-
-1. **Import** the generated message files (either statically or dynamically).
-2. **Provide** them to `<IntlProvider>` from `react-intl`.
-
-A simple approach is to import them **statically**:
-
-```typescript title="src/index.tsx"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { IntlProvider } from "react-intl";
-import App from "./App";
-
-// Import the JSON files from the build output.
-// Alternatively, you can import dynamically based on the user's chosen locale.
-import en from "../react-intl/messages/en-GB.json";
-import fr from "../react-intl/messages/fr.json";
-import es from "../react-intl/messages/es.json";
-
-// If you have a mechanism to detect the user's language, set it here.
-// For simplicity, let's pick English.
-const locale = "en-GB";
-
-// Collate messages in an object (or pick them dynamically)
-const messagesRecord: Record<string, Record<string, any>> = {
-  en: en,
-  fr: fr,
-  es: es,
+  ],
 };
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <IntlProvider locale={locale} messages={messagesRecord[locale]}>
-      <App />
-    </IntlProvider>
-  </React.StrictMode>
-);
-```
-
-> **Tip**: For real projects, you might:
->
-> - Dynamically load the JSON messages at runtime.
-> - Use environment-based, browser-based, or user account–based locale detection.
-
-### 2. Use `<FormattedMessage>` or `useIntl()`
-
-Once your messages are loaded into `<IntlProvider>`, any child component can use react-intl to access localized strings. There are two main approaches:
-
-- **`<FormattedMessage>`** component
-- **`useIntl()`** hook
-
----
-
-## Using Translations in React Components
-
-### Approach A: `<FormattedMessage>`
-
-For quick inline usage:
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-export default function MyComponent() {
-  return (
-    <div>
-      <h1>
-        {/* “my-component.helloWorld” references the key from en-GB.json, fr.json, etc. */}
-        <FormattedMessage id="my-component.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="my-component.description" />
-      </p>
-    </div>
-  );
-}
-```
-
-> The **`id`** prop in `<FormattedMessage>` must match the **top-level key** (`my-component`) plus any sub-keys (`helloWorld`).
-
-### Approach B: `useIntl()`
-
-For more dynamic usage:
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { useIntl } from "react-intl";
-
-export default function MyComponent() {
-  const intl = useIntl();
-
-  return (
-    <div>
-      <h1>{intl.formatMessage({ id: "my-component.helloWorld" })}</h1>
-      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
-    </div>
-  );
-}
+export default config;
 ```
 
-Either approach is valid , choose whichever style suits your app.
-
----
+The `syncJSON` plugin will automatically wrap the JSON. It will read and write the JSON files without changing the content architecture.
 
-## Updating or Adding New Translations
+If you want to make that JSON coexist with Intlayer content declaration files (`.content` files), Intlayer will proceed as follows:
 
-1. **Add or modify** content in any `*.content.*` file.
-2. Rerun `intlayer build` to regenerate the JSON files under `./react-intl/messages`.
-3. React (and react-intl) will pick up the updates next time you rebuild or reload your application.
+    1. load both JSON and content declaration files and transform them into an Intlayer dictionary.
+    2. if there are conflicts between the JSON and the content declaration files, Intlayer will proceed to merge all those dictionaries. This depends on the priority of the plugins, and that of the content declaration file (all are configurable).
 
----
+If changes are made using the CLI to translate the JSON, or using the CMS, Intlayer will update the JSON file with the new translations.
 
-## TypeScript Integration (Optional)
+For more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-plugins/sync-json.md).
 
-If you’re using TypeScript, Intlayer can **generate type definitions** for your translations.
+## Git Configuration
 
-- Make sure `tsconfig.json` includes your `types` folder (or whichever output folder Intlayer generates) in the `"include"` array.
+It is recommended to ignore auto-generated Intlayer files:
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Ignore files generated by Intlayer
+.intlayer
 ```
 
-The generated types can help detect missing translations or invalid keys in your React components at compile time.
-
----
-
-## Git Configuration
+These files can be regenerated during your build process and do not need to be committed to version control.
 
-It’s common to **exclude** Intlayer’s internal build artifacts from version control. In your `.gitignore`, add:
+### VS Code Extension
 
-```plaintext
-# Ignore intlayer build artifacts
-.intlayer
-react-intl
-```
+For an improved developer experience, install the official **Intlayer VS Code Extension**:
 
-Depending on your workflow, you may also want to ignore or commit the final dictionaries in `./react-intl/messages`. If your CI/CD pipeline regenerates them, you can safely ignore them; otherwise, commit them if you need them for production deployments.
+[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/es/intlayer_with_i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: Intlayer e i18next
-description: Integra Intlayer con i18next para una óptima internacionalización. Compara los dos frameworks y aprende cómo configurarlos juntos.
+updatedAt: 2025-10-29
+title: Cómo automatizar tus traducciones JSON de i18next usando Intlayer
+description: Automatiza tus traducciones JSON con Intlayer e i18next para una internacionalización mejorada en aplicaciones JavaScript.
 keywords:
   - Intlayer
   - i18next
@@ -14,149 +14,113 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+  - Migración
+  - Integración
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Cambio al plugin syncJSON
 ---
 
-# Internacionalización con Intlayer e i18next
+# Cómo automatizar tus traducciones JSON de i18next usando Intlayer
 
-i18next es un marco de internacionalización (i18n) de código abierto diseñado para aplicaciones JavaScript. Se utiliza ampliamente para gestionar traducciones, localización y cambio de idioma en proyectos de software. Sin embargo, tiene algunas limitaciones que pueden complicar la escalabilidad y el desarrollo.
+## ¿Qué es Intlayer?
 
-Intlayer es otro marco de internacionalización que aborda estas limitaciones, ofreciendo un enfoque más flexible para la declaración y gestión de contenidos. Exploremos algunas diferencias clave entre i18next e Intlayer, y cómo configurar ambos para una internacionalización óptima.
+**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 JavaScript.
 
-## Intlayer vs. i18next: Diferencias Clave
+Consulta una comparación concreta con i18next en nuestro artículo del blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/next-i18next_vs_next-intl_vs_intlayer.md).
 
-### 1. Declaración de Contenido
+## ¿Por qué combinar Intlayer con i18next?
 
-Con i18next, los diccionarios de traducción deben declararse en una carpeta específica, lo que puede complicar la escalabilidad de la aplicación. En contraste, Intlayer permite declarar el contenido dentro del mismo directorio que tu componente. Esto tiene varias ventajas:
+Aunque Intlayer proporciona una excelente solución i18n independiente (consulta nuestra [guía de integración con Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nextjs_16.md)), es posible que desees combinarlo con i18next por varias razones:
 
-- **Edición de Contenido Simplificada**: Los usuarios no tienen que buscar el diccionario correcto para editar, lo que reduce la posibilidad de errores.
-- **Adaptación Automática**: Si un componente cambia de ubicación o se elimina, Intlayer detecta y se adapta automáticamente.
+1. **Base de código existente**: Tienes una implementación establecida de i18next y deseas migrar gradualmente a la mejor experiencia de desarrollo que ofrece Intlayer.
+2. **Requisitos heredados**: Tu proyecto requiere compatibilidad con plugins o flujos de trabajo existentes de i18next.
+3. **Familiaridad del equipo**: Tu equipo está cómodo con i18next pero quiere una mejor gestión del contenido.
 
-### 2. Complejidad de Configuración
+**Para ello, Intlayer puede implementarse como un adaptador para i18next que ayuda a automatizar tus traducciones JSON en la CLI o en pipelines CI/CD, probar tus traducciones y más.**
 
-Configurar i18next puede ser complejo, especialmente al integrarse con componentes del lado del servidor o al configurar middleware para marcos como Next.js. Intlayer simplifica este proceso, ofreciendo una configuración más directa.
+Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer mientras mantienes la compatibilidad con i18next.
 
-### 3. Consistencia de los Diccionarios de Traducción
+## Tabla de Contenidos
 
-Asegurar que los diccionarios de traducción sean consistentes en diferentes idiomas puede ser un desafío con i18next. Esta inconsistencia puede llevar a que la aplicación se bloquee si no se maneja correctamente. Intlayer aborda esto imponiendo restricciones en el contenido traducido, asegurando que no se pierda ninguna traducción y que el contenido traducido sea preciso.
+<TOC/>
 
-### 4. Integración con TypeScript
+## Guía paso a paso para configurar Intlayer con i18next
 
-Intlayer ofrece una mejor integración con TypeScript, permitiendo las autocompletaciones de contenido en tu código, mejorando así la eficiencia del desarrollo.
+### Paso 1: Instalar dependencias
 
-### 5. Compartir Contenido Entre Aplicaciones
+Instala los paquetes necesarios:
 
-Intlayer facilita el intercambio de archivos de declaración de contenido entre múltiples aplicaciones y bibliotecas compartidas. Esta característica hace que sea más fácil mantener traducciones consistentes en una base de código más grande.
-
-## Cómo Generar Diccionarios de i18next con Intlayer
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-### Configurando Intlayer para Exportar Diccionarios de i18next
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-> Notas Importantes
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> La exportación de diccionarios de i18next está actualmente en beta y no garantiza una compatibilidad 1: 1 con otros marcos. Se recomienda ceñirse a una configuración basada en Intlayer para minimizar problemas.
+**Descripción de los paquetes:**
 
-Para exportar diccionarios de i18next, necesitas configurar Intlayer adecuadamente. A continuación se muestra un ejemplo de cómo configurar Intlayer para exportar tanto diccionarios de Intlayer como de i18next.
+- **intlayer**: Biblioteca principal para la gestión de internacionalización, declaración de contenido y construcción
+- **@intlayer/sync-json-plugin**: Plugin para exportar las declaraciones de contenido de Intlayer a un formato JSON compatible con i18next
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
 
-const config: IntlayerConfig = {
-  content: {
-    // Indica que Intlayer exportará tanto los diccionarios de Intlayer como de i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Ruta relativa desde la raíz del proyecto hasta el directorio donde se exportarán los diccionarios de i18n
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+Crea un archivo de configuración de Intlayer para definir tus locales soportados:
 
-export default config;
-```
+**Si también deseas exportar diccionarios JSON para i18next**, agrega el plugin `syncJSON`:
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Indica que Intlayer exportará tanto los diccionarios de Intlayer como de i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Ruta relativa desde la raíz del proyecto hasta el directorio donde se exportarán los diccionarios de i18n
-    i18nextResourcesDir: "./i18next/dictionaries",
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
   },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Indica que Intlayer exportará tanto los diccionarios de Intlayer como de i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Ruta relativa desde la raíz del proyecto hasta el directorio donde se exportarán los diccionarios de i18n
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
-
-module.exports = config;
-```
+El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
 
-Al incluir 'i18next' en la configuración, Intlayer genera diccionarios dedicados de i18next además de los diccionarios de Intlayer. Ten en cuenta que eliminar 'intlayer' de la configuración puede romper la compatibilidad con React-Intlayer o Next-Intlayer.
+Si quieres hacer coexistir ese JSON con los archivos de declaración de contenido de intlayer (`.content` files), Intlayer procederá de la siguiente manera:
 
-### Importando Diccionarios en tu Configuración de i18next
+    1. cargar tanto los archivos JSON como los archivos de declaración de contenido y transformarlos en un diccionario de intlayer.
+    2. si hay conflictos entre el JSON y los archivos de declaración de contenido, Intlayer procederá a fusionar todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
 
-Para importar los diccionarios generados en tu configuración de i18next, puedes usar 'i18next-resources-to-backend'. Aquí hay un ejemplo de cómo importar tus diccionarios de i18next:
+Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+## Configuración de Git
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Se recomienda ignorar los archivos generados automáticamente por Intlayer:
 
-i18next
-  // Tu configuración de i18next
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Ignorar archivos generados por Intlayer
+.intlayer
 ```
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
+Estos archivos pueden ser regenerados durante tu proceso de compilación y no necesitan ser comprometidos en el control de versiones.
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+### Extensión para VS Code
 
-i18next
-  // Tu configuración de i18next
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer VS Code Extension**:
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+[Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next
-  // Tu configuración de i18next
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)