@intlayer/docs 7.0.2 → 7.0.3-canary.1

package/blog/en/intlayer_with_next-intl.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
+updatedAt: 2025-10-29
 title: Intlayer and next-intl
 description: Integrate Intlayer with next-intl for the internationalization (i18n) of a React app
 keywords:
@@ -14,6 +14,10 @@ keywords:
 slugs:
   - blog
   - intlayer-with-next-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Change to syncJSON plugin
 ---
 
 # Next.js Internationalization (i18n) with next-intl and Intlayer
@@ -30,6 +34,10 @@ They share three principal notions:
 
 3. **Plugins and Middlewares**: Features for managing URL redirection, bundling optimization, and more e.g., `intlayerMiddleware` for Intlayer or [`createMiddleware`](https://github.com/amannn/next-intl) for next-intl.
 
+## Table of Contents
+
+<TOC>
+
 ## Intlayer vs. next-intl: Key Differences
 
 For a deeper analysis of how Intlayer compares to other i18n libraries for Next.js (such as next-intl), check out the [next-i18next vs. next-intl vs. Intlayer blog post](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/i18next_vs_next-intl_vs_intlayer.md).
@@ -87,15 +95,15 @@ Intlayer content declaration files generally offer a better developer experience
 To use Intlayer and next-intl together, install both libraries:
 
 ```bash packageManager="npm"
-npm install intlayer next-intl
+npm install intlayer next-intl @intlayer/sync-json-plugin
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer next-intl
+yarn add intlayer next-intl @intlayer/sync-json-plugin
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer next-intl
+pnpm add intlayer next-intl @intlayer/sync-json-plugin
 ```
 
 ### Configuring Intlayer to Export next-intl Messages
@@ -104,7 +112,7 @@ pnpm add intlayer next-intl
 
 Create or update an `intlayer.config.ts` file (or `.mjs` / `.cjs`) in the root of your project:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -112,51 +120,16 @@ const config: IntlayerConfig = {
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    dictionaryOutput: ["next-intl"], // Use the next-intl output
-    nextIntlMessagesDir: "./intl/messages", // Where to save next-intl messages
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["react-intl"],
-    nextIntlMessagesDir: "./intl/messages",
-  },
+  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 = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    dictionaryOutput: ["next-intl"],
-    nextIntlMessagesDir: "./intl/messages",
-  },
-};
-
-module.exports = config;
-```
-
 ### Dictionary
 
 Below are examples of content declaration files in multiple formats. Intlayer will compile these into message files that next-intl can consume.
@@ -233,7 +206,7 @@ module.exports = {
 To build the message files for next-intl, run:
 
 ```bash packageManager="npm"
-npx intlayer dictionaries build
+npx intlayer build
 ```
 
 ```bash packageManager="yarn"

package/blog/en/intlayer_with_react-i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
+updatedAt: 2025-10-29
 title: Intlayer and react-i18next
 description: Compare Intlayer with react-i18next for a React app
 keywords:
@@ -15,6 +15,10 @@ keywords:
 slugs:
   - blog
   - intlayer-with-react-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Change to syncJSON plugin
 ---
 
 # React Internationalization (i18n) with react-i18next and Intlayer
@@ -26,6 +30,10 @@ slugs:
 
 When combined, Intlayer can **export** dictionaries in **i18next-compatible JSON** so that react-i18next can **consume** them at runtime.
 
+## Table of Contents
+
+<TOC>
+
 ## Why Use Intlayer with react-i18next?
 
 **Intlayer** content declaration files offer a better developer experience because they are:
@@ -79,17 +87,17 @@ In a Create React App project, install these dependencies:
 
 ```bash
 # With npm
-npm install intlayer react-i18next i18next i18next-resources-to-backend
+npm install intlayer react-i18next i18next i18next-resources-to-backend @intlayer/sync-json-plugin
 ```
 
 ```bash
 # With yarn
-yarn add intlayer react-i18next i18next i18next-resources-to-backend
+yarn add intlayer react-i18next i18next i18next-resources-to-backend @intlayer/sync-json-plugin
 ```
 
 ```bash
 # With pnpm
-pnpm add intlayer react-i18next i18next i18next-resources-to-backend
+pnpm add intlayer react-i18next i18next i18next-resources-to-backend @intlayer/sync-json-plugin
 ```
 
 ### What Are These Packages?
@@ -99,6 +107,7 @@ pnpm add intlayer react-i18next i18next i18next-resources-to-backend
 - **react-i18next** – React-specific integration library for i18next, including the `useTranslation` hook.
 - **i18next** – The underlying framework for translation handling.
 - **i18next-resources-to-backend** – An i18next backend that dynamically imports JSON resources.
+- **@intlayer/sync-json-plugin** – A plugin for Intlayer that syncs JSON files to dictionaries.
 
 ## Configuring Intlayer to Export i18next Dictionaries
 
@@ -113,14 +122,11 @@ const config: IntlayerConfig = {
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Tell Intlayer to create i18next-compatible JSON
-    dictionaryOutput: ["i18next"],
-
-    // Choose an output directory for the generated resources
-    // This folder will be created if it doesn't exist yet.
-    i18nextResourcesDir: "./i18next/resources",
-  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./i18next/resources/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "7.0.2",
+  "version": "7.0.3-canary.1",
   "private": false,
   "description": "Intlayer documentation",
   "keywords": [
@@ -69,17 +69,17 @@
     "watch": "webpack --config ./webpack.config.ts --watch"
   },
   "dependencies": {
-    "@intlayer/config": "7.0.2",
-    "@intlayer/core": "7.0.2",
-    "@intlayer/types": "7.0.2"
+    "@intlayer/config": "7.0.3-canary.1",
+    "@intlayer/core": "7.0.3-canary.1",
+    "@intlayer/types": "7.0.3-canary.1"
   },
   "devDependencies": {
-    "@intlayer/api": "7.0.2",
-    "@intlayer/cli": "7.0.2",
+    "@intlayer/api": "7.0.3-canary.1",
+    "@intlayer/cli": "7.0.3-canary.1",
     "@types/node": "24.9.1",
-    "@utils/ts-config": "7.0.2",
-    "@utils/ts-config-types": "7.0.2",
-    "@utils/tsdown-config": "7.0.2",
+    "@utils/ts-config": "7.0.3-canary.1",
+    "@utils/ts-config-types": "7.0.3-canary.1",
+    "@utils/tsdown-config": "7.0.3-canary.1",
     "fast-glob": "3.3.3",
     "rimraf": "6.0.1",
     "tsdown": "0.15.9",
@@ -87,11 +87,11 @@
     "vitest": "4.0.3"
   },
   "peerDependencies": {
-    "@intlayer/api": "7.0.2",
-    "@intlayer/cli": "7.0.2",
-    "@intlayer/config": "7.0.2",
-    "@intlayer/core": "7.0.2",
-    "@intlayer/types": "7.0.2"
+    "@intlayer/api": "7.0.3-canary.1",
+    "@intlayer/cli": "7.0.3-canary.1",
+    "@intlayer/config": "7.0.3-canary.1",
+    "@intlayer/core": "7.0.3-canary.1",
+    "@intlayer/types": "7.0.3-canary.1"
   },
   "engines": {
     "node": ">=14.18"