@intlayer/docs 7.0.5 → 7.0.7

package/blog/en-GB/intlayer_with_vue-i18n.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-10-29
+title: Intlayer and vue-i18n
+description: Integrate Intlayer with vue-i18n for a comprehensive Vue.js internationalisation solution
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internationalisation
+  - Blog
+  - Vue.js
+  - Nuxt
+  - JavaScript
+  - Vue
+slugs:
+  - blog
+  - intlayer-with-vue-i18n
+history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Add loadJSON plugin
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Change to syncJSON plugin and comprehensive rewrite
+---
+
+# Vue.js Internationalisation (i18n) with vue-i18n and Intlayer
+
+## 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 Vue.js and Nuxt applications.
+
+See a concrete comparison with vue-i18n in our [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/vue-i18n_vs_intlayer.md) blog post.
+
+## Why Combine Intlayer with vue-i18n?
+
+While Intlayer provides an excellent standalone i18n solution (see our [Vue.js integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+vue.md)), you might want to combine it with vue-i18n for several reasons:
+
+1. **Existing codebase**: You have an established vue-i18n implementation and want to gradually migrate to Intlayer's improved developer experience.
+2. **Legacy requirements**: Your project requires compatibility with existing vue-i18n plugins or workflows.
+3. **Team familiarity**: Your team is comfortable with vue-i18n but wants better content management.
+4. **Using Intlayer features**: You want to use Intlayer features like content declaration, translation automation, testing translations, and more.
+
+**For that, Intlayer can be implemented as an adapter for vue-i18n to help automate your JSON translations in CLI or CI/CD pipelines, test your translations, and more.**
+
+This guide shows you how to leverage Intlayer's superior content declaration system whilst maintaining compatibility with vue-i18n.
+
+---
+
+## Step-by-Step Guide to Set Up Intlayer with vue-i18n
+
+### Step 1: Install Dependencies
+
+Install the necessary packages using your preferred package manager:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**Package explanations:**
+
+- **intlayer**: Core library for content declaration and management
+- **@intlayer/sync-json-plugin**: Plugin to synchronise Intlayer content declarations to vue-i18n JSON format
+
+### Step 2: Implement the Intlayer plugin to wrap the JSON
+
+Create an Intlayer configuration file to define your supported locales:
+
+**If you also want to export JSON dictionaries for vue-i18n**, add the `syncJSON` plugin:
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+The `syncJSON` plugin will automatically wrap the JSON. It will read and write the JSON files without changing the content architecture.
+
+If you want to make that JSON coexist with Intlayer content declaration files (`.content` files), Intlayer will proceed as follows:
+
+    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 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.
+
+To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/plugins/sync-json.md).
+
+---
+
+### (Optional) Step 3: Implement per-component JSON translations
+
+By default, Intlayer will load, merge and synchronise both JSON and content declaration files. See [the content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md) for more details. But if you prefer, using an Intlayer plugin, you can also implement per-component management of JSON localised anywhere in your codebase.
+
+For that, you can use the `loadJSON` plugin.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalisation: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Keep your current JSON files in sync with Intlayer dictionaries
+  plugins: [
+    /**
+     * Will load all the JSON files in the src that match the pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Ensures these JSON files take precedence over files at `./locales/en/${key}.json`
+    }),
+    /**
+     * Will load, and write the output and translations back to the JSON files in the locales directory
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will load all the JSON files in the `src` directory that match the pattern `{key}.i18n.json` and load them as Intlayer dictionaries.
+
+---
+
+## Git Configuration
+
+Exclude generated files from version control:
+
+```plaintext fileName=".gitignore"
+# Ignore files generated by Intlayer
+.intlayer
+intl
+```
+
+These files are automatically regenerated during the build process and do not need to be committed to your repository.
+
+### VS Code Extension
+
+For improved developer experience, install the official **Intlayer VS Code Extension**:
+
+[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+[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,6 +1,6 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-10-29
+updatedAt: 2025-11-01
 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:
@@ -20,26 +20,30 @@ slugs:
   - blog
   - intlayer-with-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Añadir plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
-    changes: Cambio al plugin syncJSON
+    changes: Cambiar a plugin syncJSON
 ---
 
 # Cómo automatizar tus traducciones JSON de i18next usando Intlayer
 
 ## ¿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 JavaScript.
+**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.
 
 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).
 
 ## ¿Por qué combinar Intlayer con i18next?
 
-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:
+Aunque Intlayer ofrece 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:
 
 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. **Requisitos heredados**: Tu proyecto requiere compatibilidad con los plugins o flujos de trabajo existentes de i18next.
+3. **Familiaridad del equipo**: Tu equipo está familiarizado con i18next pero quiere una mejor gestión de contenido.
+4. **Uso de las funcionalidades de Intlayer**: Quieres utilizar funciones de Intlayer como la declaración de contenido, gestión de claves de traducción, estado de traducción y más.
 
 **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.**
 
@@ -49,9 +53,9 @@ Esta guía te muestra cómo aprovechar el sistema superior de declaración de co
 
 <TOC/>
 
-## Guía paso a paso para configurar Intlayer con i18next
+## Guía Paso a Paso para Configurar Intlayer con i18next
 
-### Paso 1: Instalar dependencias
+### Paso 1: Instalar Dependencias
 
 Instala los paquetes necesarios:
 
@@ -67,6 +71,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Descripción de los paquetes:**
 
 - **intlayer**: Biblioteca principal para la gestión de internacionalización, declaración de contenido y construcción
@@ -74,9 +82,9 @@ yarn add intlayer @intlayer/sync-json-plugin
 
 ### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
 
-Crea un archivo de configuración de Intlayer para definir tus locales soportados:
+Crea un archivo de configuración de Intlayer para definir los locales soportados:
 
-**Si también deseas exportar diccionarios JSON para i18next**, agrega el plugin `syncJSON`:
+**Si también quieres exportar diccionarios JSON para i18next**, añade el plugin `syncJSON`:
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -99,13 +107,58 @@ export default config;
 
 El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
 
-Si quieres hacer coexistir ese JSON con los archivos de declaración de contenido de intlayer (`.content` files), Intlayer procederá de la siguiente manera:
+Si quieres hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (archivos `.content`), Intlayer procederá de la siguiente manera:
 
-    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).
+    1. cargará tanto los archivos JSON como los archivos de declaración de contenido y los transformará 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 de la del archivo de declaración de contenido (todos son configurables).
 
 Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
 
+Para ver más detalles sobre el plugin `syncJSON`, por favor consulta la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
+
+### (Opcional) Paso 3: Implementar traducciones JSON por componente
+
+Por defecto, Intlayer cargará, combinará y sincronizará tanto los archivos JSON como los archivos de declaración de contenido. Consulta [la documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) para más detalles. Pero si prefieres, usando un plugin de Intlayer, también puedes implementar la gestión por componente de JSON localizado en cualquier parte de tu base de código.
+
+Para ello, puedes usar el plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Mantén tus archivos JSON actuales sincronizados con los diccionarios de Intlayer
+  plugins: [
+    /**
+     * Cargará todos los archivos JSON en src que coincidan con el patrón {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Asegura que estos archivos JSON tengan prioridad sobre los archivos en `./locales/en/${key}.json`
+    }),
+    /**
+     * Cargará y escribirá la salida y las traducciones de vuelta en los archivos JSON en el directorio locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Esto cargará todos los archivos JSON en el directorio `src` que coincidan con el patrón `{key}.i18n.json` y los cargará como diccionarios de Intlayer.
+
+---
+
 ## Configuración de Git
 
 Se recomienda ignorar los archivos generados automáticamente por Intlayer:
@@ -115,12 +168,10 @@ Se recomienda ignorar los archivos generados automáticamente por Intlayer:
 .intlayer
 ```
 
-Estos archivos pueden ser regenerados durante tu proceso de compilación y no necesitan ser comprometidos en el control de versiones.
+Estos archivos pueden regenerarse durante tu proceso de compilación y no necesitan ser comprometidos en el control de versiones.
 
-### Extensión para VS Code
+### Extensión de VS Code
 
 Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer VS Code Extension**:
 
 [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-[Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/es/intlayer_with_next-i18next.md

@@ -16,9 +16,12 @@ slugs:
   - blog
   - intlayer-with-next-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Añadir plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
-    changes: Cambio al plugin syncJSON y reescritura integral
+    changes: Cambio a plugin syncJSON y reescritura completa
 ---
 
 # Internacionalización (i18n) en Next.js con next-i18next e Intlayer
@@ -29,11 +32,11 @@ history:
 
 ## ¿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**, ofrece una solución integral para gestionar traducciones, localización y cambio de idioma en proyectos Next.js.
+**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 del lado del servidor y del cliente.
+- **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.
@@ -46,15 +49,15 @@ Consulta una comparación concreta con next-intl en nuestro artículo del blog [
 
 ## ¿Por qué combinar Intlayer con next-i18next?
 
-Mientras que Intlayer ofrece 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 next-i18next por varias razones:
+Aunque Intlayer ofrece 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 next-i18next por varias razones:
 
-1. **Código existente**: Tienes una implementación establecida de next-i18next y quieres migrar gradualmente a la mejorada experiencia de desarrollo de Intlayer.
+1. **Base de código existente**: Tienes una implementación establecida de next-i18next y quieres 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 next-i18next pero desea una mejor gestión de contenido.
 
-**Para ello, Intlayer puede implementarse como un adaptador para next-i18next que ayude a automatizar tus traducciones JSON en la CLI o en pipelines de CI/CD, probar tus traducciones y más.**
+**Para ello, Intlayer puede implementarse como un adaptador para next-i18next para ayudar a automatizar tus traducciones JSON en la CLI o en pipelines de CI/CD, probar tus traducciones y más.**
 
-Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer mientras mantienes la compatibilidad con next-i18next.
+Esta guía te muestra cómo aprovechar el superior sistema de declaración de contenido de Intlayer mientras mantienes la compatibilidad con next-i18next.
 
 ---
 
@@ -76,18 +79,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-**Explicación de los paquetes:**
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**Explicaciones de los paquetes:**
 
 - **intlayer**: Biblioteca principal para la declaración y gestión de contenido
-- **next-intlayer**: Capa de integración para Next.js con plugins de compilación
-- **i18next**: Framework principal de i18n
-- **next-i18next**: Wrapper de Next.js para i18next
-- **i18next-resources-to-backend**: Carga dinámica de recursos para i18next
 - **@intlayer/sync-json-plugin**: Plugin para sincronizar las declaraciones de contenido de Intlayer al formato JSON de i18next
 
 ### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
 
-Crea un archivo de configuración de Intlayer para definir los locales soportados:
+Crea un archivo de configuración de Intlayer para definir los locales que soportas:
 
 **Si también quieres exportar diccionarios JSON para i18next**, añade el plugin `syncJSON`:
 
@@ -102,7 +105,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -112,18 +115,63 @@ export default config;
 
 El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
 
-Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de intlayer (archivos `.content`), Intlayer procederá de la siguiente manera:
+Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (`.content` files), Intlayer procederá de la siguiente manera:
 
-    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 la fusión de todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
+    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 los archivos 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).
 
-Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
+Si se realizan cambios utilizando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
+
+Para ver más detalles sobre el plugin `syncJSON`, por favor consulta la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
+
+---
+
+### (Opcional) Paso 3: Implementar traducciones JSON por componente
+
+Por defecto, Intlayer cargará, combinará y sincronizará tanto los archivos JSON como los archivos de declaración de contenido. Consulta [la documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) para más detalles. Pero si prefieres, usando un plugin de Intlayer, también puedes implementar la gestión por componente de JSON localizado en cualquier parte de tu base de código.
+
+Para eso, puedes usar el plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Mantén tus archivos JSON actuales sincronizados con los diccionarios de Intlayer
+  plugins: [
+    /**
+     * Cargará todos los archivos JSON en src que coincidan con el patrón {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Asegura que estos archivos JSON tengan prioridad sobre los archivos en `./public/locales/en/${key}.json`
+    }),
+    /**
+     * Cargará y escribirá la salida y las traducciones de vuelta en los archivos JSON en el directorio de locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Esto cargará todos los archivos JSON en el directorio `src` que coincidan con el patrón `{key}.i18n.json` y los cargará como diccionarios de Intlayer.
 
 ---
 
 ## Configuración de Git
 
-Excluir archivos generados del control de versiones:
+Excluye los archivos generados del control de versiones:
 
 ```plaintext fileName=".gitignore"
 # Ignorar archivos generados por Intlayer
@@ -131,12 +179,10 @@ Excluir archivos generados del control de versiones:
 intl
 ```
 
-Estos archivos se regeneran automáticamente durante el proceso de compilación y no necesitan ser comprometidos en tu repositorio.
-
-### Extensión de VS Code
+Estos archivos se regeneran automáticamente durante el proceso de compilación y no necesitan ser confirmados en tu repositorio.
 
-Para mejorar la experiencia del desarrollador, instala la **Extensión oficial de Intlayer para VS Code**:
+### Extensión para VS Code
 
-[Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer para VS Code**:
 
 [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/es/intlayer_with_next-intl.md

@@ -7,30 +7,33 @@ slugs:
   - blog
   - intlayer-with-next-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: Añadir el plugin loadJSON
   - version: 7.0.0
     date: 2025-10-29
-    changes: Cambio al plugin syncJSON
+    changes: Cambiar al plugin syncJSON
 ---
 
 # Cómo automatizar tus traducciones JSON de next-intl usando Intlayer
 
 ## ¿Qué es Intlayer?
 
-**Intlayer** es una biblioteca innovadora de internacionalización de código abierto 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.
+**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.
 
-Consulta una comparación concreta con next-intl 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).
+Consulta una comparación concreta con next-intl en nuestra publicación 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).
 
 ## ¿Por qué combinar Intlayer con next-intl?
 
-Aunque Intlayer ofrece una excelente solución de 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 next-intl por varias razones:
+Aunque Intlayer ofrece 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 next-intl por varias razones:
 
 1. **Código existente**: Tienes una implementación establecida de next-intl y quieres 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 next-intl.
 3. **Familiaridad del equipo**: Tu equipo está cómodo con next-intl pero desea una mejor gestión de contenido.
 
-**Para ello, Intlayer puede implementarse como un adaptador para next-intl que ayude a automatizar tus traducciones JSON en la CLI o en pipelines de CI/CD, probar tus traducciones y más.**
+**Para ello, Intlayer puede implementarse como un adaptador para next-intl que ayude a automatizar tus traducciones JSON en la CLI o en pipelines CI/CD, probar tus traducciones y más.**
 
-Esta guía te muestra cómo aprovechar el superior sistema de declaración de contenido de Intlayer manteniendo la compatibilidad con next-intl.
+Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer manteniendo la compatibilidad con next-intl.
 
 ## Tabla de Contenidos
 
@@ -54,16 +57,20 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **Descripción de los paquetes:**
 
 - **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 next-intl
+- **@intlayer/sync-json-plugin**: Plugin para exportar declaraciones de contenido de Intlayer a un formato JSON compatible con next-intl
 
 ### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
 
-Crea un archivo de configuración de Intlayer para definir los locales que soportas:
+Crea un archivo de configuración de Intlayer para definir tus locales soportados:
 
-**Si también quieres exportar diccionarios JSON para next-intl**, añade el plugin `syncJSON`:
+**Si también deseas exportar diccionarios JSON para next-intl**, añade el plugin `syncJSON`:
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -88,11 +95,55 @@ El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá lo
 
 Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de intlayer (archivos `.content`), Intlayer procederá de la siguiente manera:
 
-    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).
+    1. cargará tanto los archivos JSON como los archivos de declaración de contenido y los transformará en un diccionario de intlayer.
+
+    2. si hay conflictos entre el JSON y los archivos de declaración de contenido, Intlayer procederá a la fusión de todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
 
 Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
 
+Para ver más detalles sobre el plugin `syncJSON`, por favor consulte la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
+
+### (Opcional) Paso 3: Implementar traducciones JSON por componente
+
+Por defecto, Intlayer cargará, fusionará y sincronizará tanto los archivos JSON como los archivos de declaración de contenido. Consulte [la documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) para más detalles. Pero si lo prefiere, utilizando un plugin de Intlayer, también puede implementar la gestión por componente de JSON localizado en cualquier parte de su base de código.
+
+Para ello, puede usar el plugin `loadJSON`.
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Mantenga sus archivos JSON actuales sincronizados con los diccionarios de Intlayer
+  plugins: [
+    /**
+     * Cargará todos los archivos JSON en src que coincidan con el patrón {key}.i18n.json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Asegura que estos archivos JSON tengan prioridad sobre los archivos en `./locales/en/${key}.json`
+    }),
+    /**
+     * Cargará y escribirá la salida y las traducciones de vuelta en los archivos JSON en el directorio locales
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+Esto cargará todos los archivos JSON en el directorio `src` que coincidan con el patrón `{key}.i18n.json` y los cargará como diccionarios de Intlayer.
+
 ## Configuración de Git
 
 Se recomienda ignorar los archivos generados automáticamente por Intlayer:
@@ -102,10 +153,10 @@ Se recomienda ignorar los archivos generados automáticamente por Intlayer:
 .intlayer
 ```
 
-Estos archivos pueden ser regenerados durante tu proceso de compilación y no necesitan ser comprometidos en el control de versiones.
+Estos archivos pueden regenerarse durante su proceso de compilación y no necesitan ser comprometidos en el control de versiones.
 
 ### Extensión de VS Code
 
-Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer VS Code Extension**:
+Para mejorar la experiencia del desarrollador, instale la **Extensión oficial de Intlayer para VS Code**:
 
 [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)