@intlayer/docs 7.0.4-canary.0 → 7.0.4

package/blog/en/intlayer_with_react-i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-01-02
 updatedAt: 2025-10-29
-title: How to use Intlayer with react-i18next – Complete i18n Guide 2025
-description: Learn how to integrate Intlayer with react-i18next to build a fully internationalized React application. Comprehensive guide with step-by-step instructions, code examples, and best practices.
+title: How to automate your react-i18next JSON translations using Intlayer
+description: Automate your JSON translations with Intlayer and react-i18next for enhanced internationalization in React applications.
 keywords:
   - react-i18next
   - i18next
@@ -23,186 +23,71 @@ history:
     changes: Change to syncJSON plugin
 ---
 
-# React Internationalization (i18n) with react-i18next and Intlayer
-
-## Table of Contents
-
-<TOC/>
+# How to automate your react-i18next JSON translations using Intlayer
 
 ## What is Intlayer?
 
-**Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications. Intlayer seamlessly integrates with popular frameworks like **React**, **Next.js**, **Vue**, and many others.
-
-With Intlayer, you can:
-
-- **Easily manage translations** using declarative dictionaries at the component level.
-- **Dynamically localize content** with a flexible architecture.
-- **Access translations** with full TypeScript support and autogenerated types.
-- **Benefit from advanced features**, like dynamic locale detection, switching, and content externalization.
-- **Integrate with existing i18n solutions** like react-i18next, next-intl, and react-intl.
-
----
-
-## Why Use Intlayer with react-i18next?
-
-**react-i18next** is one of the most popular React integrations for **i18next**, providing hooks like `useTranslation` to fetch localized strings in your components. While powerful, react-i18next traditionally relies on JSON files organized in a centralized structure, which can lead to maintenance challenges as your application grows.
-
-**Intlayer** enhances this workflow by offering:
-
-### 1. **Flexible Component-Level Content Declaration**
-
-With Intlayer, you can place content declaration files right next to the components that need them. This co-location prevents orphaned translations when components are moved or deleted.
-
-**Example Structure:**
-
-```bash codeFormat="typescript"
-.
-└── src
-    └── components
-        └── MyComponent
-            ├── index.content.ts # Content declaration file
-            └── index.tsx
-```
-
-```bash codeFormat="esm"
-.
-└── src
-    └── components
-        └── MyComponent
-            ├── index.content.mjs # Content declaration file
-            └── index.mjx
-```
-
-```bash codeFormat="commonjs"
-.
-└── src
-    └── components
-        └── MyComponent
-            ├── index.content.cjs # Content declaration file
-            └── index.cjx
-```
-
-```bash codeFormat="json"
-.
-└── src
-    └── components
-        └── MyComponent
-            ├── index.content.json # Content declaration file
-            └── index.jsx
-```
-
-### 2. **Centralized Translations per Component**
-
-A single content declaration file collects all necessary translations for a component. This makes missing translations easier to catch, especially when combined with TypeScript, which provides compile-time validation.
-
-### 3. **Automated Dictionary Building**
-
-Intlayer automatically transpiles your content declarations into i18next-compatible JSON files, eliminating manual JSON management.
+**Intlayer** is an innovative, open-source internationalization library designed to address the shortcomings of traditional i18n solutions. It offers a modern approach to content management in React applications.
 
-### 4. **Enhanced Developer Experience**
+See a concrete comparison with react-i18next 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.
 
-- **Type Safety**: Autogenerated TypeScript types ensure autocompletion and error detection.
-- **Better Organization**: Keep translations close to their usage, improving code readability and maintainability.
-- **Scalability**: Easily scale your internationalization strategy as your application grows.
+## Why Combine Intlayer with react-i18next?
 
----
+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-i18next for several reasons:
 
-## Intlayer vs. react-i18next: Key Differences
+1. **Existing codebase**: You have an established react-i18next implementation and want to gradually migrate to Intlayer's improved developer experience.
+2. **Legacy requirements**: Your project requires compatibility with existing react-i18next plugins or workflows.
+3. **Team familiarity**: Your team is comfortable with react-i18next but wants better content management.
 
-For a comprehensive comparison of Intlayer with other i18n libraries for React (including react-i18next and react-intl), check out the [react-i18next vs. react-intl vs. Intlayer blog post](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/react-i18next_vs_react-intl_vs_intlayer.md).
+**For that, Intlayer can be implemented as an adapter for react-i18next to help automating your JSON translations in CLI or CI/CD pipelines, testing your translations, and more.**
 
-**Key Takeaways:**
+This guide shows you how to leverage Intlayer's superior content declaration system while maintaining compatibility with react-i18next.
 
-- **Intlayer** focuses on **component-level** content management, while react-i18next typically uses centralized JSON files.
-- **Intlayer** offers built-in **TypeScript support** with autogenerated types, whereas react-i18next requires additional configuration for type safety.
-- **Intlayer** can integrate with react-i18next to provide the best of both worlds: component-level content management with the robust runtime features of i18next.
+## Table of Contents
 
----
+<TOC/>
 
 ## Step-by-Step Guide to Set Up Intlayer with react-i18next
 
 ### Step 1: Install Dependencies
 
-Install the necessary packages using your preferred package manager:
+Install the necessary packages:
 
 ```bash packageManager="npm"
-npm install intlayer react-i18next i18next i18next-resources-to-backend @intlayer/sync-json-plugin
+npm install intlayer @intlayer/sync-json-plugin
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-i18next i18next i18next-resources-to-backend @intlayer/sync-json-plugin
+pnpm add intlayer @intlayer/sync-json-plugin
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-i18next i18next i18next-resources-to-backend @intlayer/sync-json-plugin
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-#### What Are These Packages?
+**Package descriptions:**
 
-- **intlayer**  
-  The core library that provides internationalization tools for configuration management, translation, content declaration, transpilation, and CLI commands.
+- **intlayer**: Core library for internationalization management, content declaration, and building
+- **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to react-i18next compatible JSON format
 
-- **react-i18next**  
-  React-specific integration library for i18next, including the `useTranslation` hook and other React bindings.
+### Step 2: Implement the Intlayer plugin to wrap the JSON
 
-- **i18next**  
-  The underlying framework for translation handling. It provides the core internationalization functionality.
+Create an Intlayer configuration file to define your supported locales:
 
-- **i18next-resources-to-backend**  
-  An i18next backend that dynamically imports JSON resources, enabling efficient lazy-loading of translations.
-
-- **@intlayer/sync-json-plugin**  
-  A plugin for Intlayer that automatically exports your content declarations as i18next-compatible JSON files.
-
----
+**If you want to also export JSON dictionaries for react-i18next**, add the `syncJSON` plugin:
 
-### Step 2: Configure Your Project
-
-Create a configuration file to define the languages and settings for your application:
-
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```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,
-      // Add your other locales
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-  plugins: [
-    syncJSON({
-      // Adjust the source path to match your desired output structure
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
-    }),
-  ],
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-import { syncJSON } from "@intlayer/sync-json-plugin";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Add your other locales
-    ],
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
     }),
   ],
 };
@@ -210,641 +95,30 @@ const config = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-const { syncJSON } = require("@intlayer/sync-json-plugin");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Add your other locales
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-  plugins: [
-    syncJSON({
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
-    }),
-  ],
-};
-
-module.exports = config;
-```
-
-> **Note**: Through this configuration file, you can customize content directory location, file extensions, output paths, and more. For a complete list of available parameters, refer to the [Intlayer configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
-
----
-
-### Step 3: Build the i18next Resources
-
-Once your content declarations are in place (covered in Step 5), run the **Intlayer build command** to generate i18next-compatible JSON files:
-
-```bash packageManager="npm"
-npx intlayer build
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer build
-```
-
-```bash packageManager="yarn"
-yarn intlayer build
-```
-
-> This command will scan your project for `*.content.{ts,tsx,js,jsx,mjs,cjs,json}` files, compile them, and write the output to the directory specified in your `intlayer.config.*` (by default, `./intl/messages`).
-
-**Expected Output:**
-
-```bash
-.
-└── intl
-    └── messages
-        ├── en
-        │   ├── my-component.json
-        │   └── another-component.json
-        ├── fr
-        │   ├── my-component.json
-        │   └── another-component.json
-        └── es
-            ├── my-component.json
-            └── another-component.json
-```
-
-Each file corresponds to an **i18next namespace**, derived from the `key` in your Intlayer content declarations.
-
----
-
-### Step 4: Integrate i18next in Your React Application
-
-Configure i18next to load the generated JSON resources dynamically. Use the [`i18next-resources-to-backend`](https://www.npmjs.com/package/i18next-resources-to-backend) package for this purpose.
-
-Create an `i18n` initialization file (e.g., `src/i18n.ts` or `src/i18n.js`):
-
-```typescript fileName="src/i18n.ts" codeFormat="typescript"
-import i18next from "i18next";
-import { initReactI18next } from "react-i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next
-  // react-i18next plugin
-  .use(initReactI18next)
-  // Dynamically load resources
-  .use(
-    resourcesToBackend((language: string, namespace: string) => {
-      // Adjust the import path to match your output directory
-      return import(`../intl/messages/${language}/${namespace}.json`);
-    })
-  )
-  // Initialize i18next
-  .init({
-    // Fallback locale
-    fallbackLng: "en",
-
-    // Enable debug mode during development
-    debug: process.env.NODE_ENV === "development",
-
-    // Namespaces to load by default (optional)
-    // defaultNS: "common",
-
-    // Other i18next configuration options
-    // See: https://www.i18next.com/overview/configuration-options
-    interpolation: {
-      escapeValue: false, // React already escapes values
-    },
-  });
-
-export default i18next;
-```
-
-```javascript fileName="src/i18n.js" codeFormat="esm"
-import i18next from "i18next";
-import { initReactI18next } from "react-i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next
-  .use(initReactI18next)
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../intl/messages/${language}/${namespace}.json`)
-    )
-  )
-  .init({
-    fallbackLng: "en",
-    debug: process.env.NODE_ENV === "development",
-    interpolation: {
-      escapeValue: false,
-    },
-  });
-
-export default i18next;
-```
-
-```javascript fileName="src/i18n.cjs" codeFormat="commonjs"
-const i18next = require("i18next");
-const { initReactI18next } = require("react-i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next
-  .use(initReactI18next)
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../intl/messages/${language}/${namespace}.json`)
-    )
-  )
-  .init({
-    fallbackLng: "en",
-    debug: process.env.NODE_ENV === "development",
-    interpolation: {
-      escapeValue: false,
-    },
-  });
-
-module.exports = i18next;
-```
-
-Then, import this i18n setup **before** rendering your application. In your root/index file (e.g., `src/index.tsx`):
-
-```typescript fileName="src/index.tsx" codeFormat="typescript"
-import React from "react";
-import ReactDOM from "react-dom/client";
-// Initialize i18n before anything else
-import "./i18n";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-```
-
-```javascript fileName="src/index.jsx" codeFormat="esm"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./i18n";
-import App from "./App";
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-```
-
-```javascript fileName="src/index.cjs" codeFormat="commonjs"
-const React = require("react");
-const ReactDOM = require("react-dom/client");
-require("./i18n");
-const App = require("./App");
+The `syncJSON` plugin will automatically wrap the JSON. It will read and write the JSON files without changing the content architecture.
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  React.createElement(React.StrictMode, null, React.createElement(App))
-);
-```
+If you want to make coexist that JSON with intlayer content declaration files (`.content` files), Intlayer will proceed this way:
 
----
+    1. load both JSON and content declaration files and transform them into a intlayer dictionary.
+    2. if there is conflicts between the JSON and the content declaration files, Intlayer will process to the merge of that all dictionaries. Depending of the priority of the plugins, and the one of the content declaration file (all are configurable).
 
-### Step 5: Declare Your Content
+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.
 
-Create and manage your content declarations to store translations. Intlayer content declaration files can be placed anywhere in your project, as long as they match the configured file pattern.
+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/plugins/sync-json.md).
 
-**Example Content Declaration:**
+## Git Configuration
 
-```typescript fileName="src/components/MyComponent/MyComponent.content.ts" contentDeclarationFormat="typescript"
-import { t, type Dictionary } from "intlayer";
-
-const myComponentContent = {
-  // The "key" becomes the i18next namespace
-  key: "my-component",
-  content: {
-    // Each call to "t" defines a translation node
-    heading: t({
-      en: "Welcome to My Component",
-      fr: "Bienvenue dans mon composant",
-      es: "Bienvenido a mi componente",
-    }),
-    description: t({
-      en: "This is a description of my component.",
-      fr: "Ceci est une description de mon composant.",
-      es: "Esta es una descripción de mi componente.",
-    }),
-    buttonText: t({
-      en: "Click Me",
-      fr: "Cliquez-moi",
-      es: "Haz clic en mí",
-    }),
-  },
-} satisfies Dictionary;
-
-export default myComponentContent;
-```
-
-```javascript fileName="src/components/MyComponent/MyComponent.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myComponentContent = {
-  key: "my-component",
-  content: {
-    heading: t({
-      en: "Welcome to My Component",
-      fr: "Bienvenue dans mon composant",
-      es: "Bienvenido a mi componente",
-    }),
-    description: t({
-      en: "This is a description of my component.",
-      fr: "Ceci est une description de mon composant.",
-      es: "Esta es una descripción de mi componente.",
-    }),
-    buttonText: t({
-      en: "Click Me",
-      fr: "Cliquez-moi",
-      es: "Haz clic en mí",
-    }),
-  },
-};
-
-export default myComponentContent;
-```
-
-```javascript fileName="src/components/MyComponent/MyComponent.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const myComponentContent = {
-  key: "my-component",
-  content: {
-    heading: t({
-      en: "Welcome to My Component",
-      fr: "Bienvenue dans mon composant",
-      es: "Bienvenido a mi componente",
-    }),
-    description: t({
-      en: "This is a description of my component.",
-      fr: "Ceci est une description de mon composant.",
-      es: "Esta es una descripción de mi componente.",
-    }),
-    buttonText: t({
-      en: "Click Me",
-      fr: "Cliquez-moi",
-      es: "Haz clic en mí",
-    }),
-  },
-};
-
-module.exports = myComponentContent;
-```
-
-```json fileName="src/components/MyComponent/MyComponent.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my-component",
-  "content": {
-    "heading": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Welcome to My Component",
-        "fr": "Bienvenue dans mon composant",
-        "es": "Bienvenido a mi componente"
-      }
-    },
-    "description": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "This is a description of my component.",
-        "fr": "Ceci est une description de mon composant.",
-        "es": "Esta es una descripción de mi componente."
-      }
-    },
-    "buttonText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Click Me",
-        "fr": "Cliquez-moi",
-        "es": "Haz clic en mí"
-      }
-    }
-  }
-}
-```
-
-> **Note**: Your content declarations can be defined anywhere in your application, as long as they are included in the `contentDir` directory (by default, `./src`) and match the content declaration file extension (by default, `.content.{ts,tsx,js,jsx,mjs,cjs,json}`).
-
-> For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
-
----
-
-### Step 6: Utilize Content in Your Code
-
-Access your content dictionaries throughout your application using the `useTranslation` hook from react-i18next:
-
-```tsx fileName="src/components/MyComponent/MyComponent.tsx" codeFormat="typescript"
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-/**
- * The i18next "namespace" is the Intlayer `key` from "MyComponent.content.ts"
- * so we'll pass "my-component" to useTranslation().
- */
-const MyComponent: FC = () => {
-  const { t } = useTranslation("my-component");
-
-  return (
-    <div>
-      <h1>{t("heading")}</h1>
-      <p>{t("description")}</p>
-      <button>{t("buttonText")}</button>
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```jsx fileName="src/components/MyComponent/MyComponent.jsx" codeFormat="esm"
-import { useTranslation } from "react-i18next";
-
-const MyComponent = () => {
-  const { t } = useTranslation("my-component");
-
-  return (
-    <div>
-      <h1>{t("heading")}</h1>
-      <p>{t("description")}</p>
-      <button>{t("buttonText")}</button>
-    </div>
-  );
-};
-
-export default MyComponent;
-```
-
-```jsx fileName="src/components/MyComponent/MyComponent.csx" codeFormat="commonjs"
-const { useTranslation } = require("react-i18next");
-
-const MyComponent = () => {
-  const { t } = useTranslation("my-component");
-
-  return (
-    <div>
-      <h1>{t("heading")}</h1>
-      <p>{t("description")}</p>
-      <button>{t("buttonText")}</button>
-    </div>
-  );
-};
-
-module.exports = MyComponent;
-```
-
-> **Key Point**: The `t` function references keys inside your generated JSON. For an Intlayer content entry named `heading`, you'll use `t("heading")`.
-
----
-
-### (Optional) Step 7: Change the Language of Your Content
-
-To allow users to switch languages dynamically, use the `changeLanguage` function provided by i18next. Here's an example of a simple locale switcher:
-
-```tsx fileName="src/components/LocaleSwitcher/LocaleSwitcher.tsx" codeFormat="typescript"
-import type { FC } from "react";
-import { useTranslation } from "react-i18next";
-
-const LocaleSwitcher: FC = () => {
-  const { i18n } = useTranslation();
-
-  const changeLanguage = (locale: string) => {
-    i18n.changeLanguage(locale);
-  };
-
-  return (
-    <div>
-      <button
-        onClick={() => changeLanguage("en")}
-        disabled={i18n.language === "en"}
-      >
-        English
-      </button>
-      <button
-        onClick={() => changeLanguage("fr")}
-        disabled={i18n.language === "fr"}
-      >
-        Français
-      </button>
-      <button
-        onClick={() => changeLanguage("es")}
-        disabled={i18n.language === "es"}
-      >
-        Español
-      </button>
-    </div>
-  );
-};
-
-export default LocaleSwitcher;
-```
-
-```jsx fileName="src/components/LocaleSwitcher/LocaleSwitcher.jsx" codeFormat="esm"
-import { useTranslation } from "react-i18next";
-
-const LocaleSwitcher = () => {
-  const { i18n } = useTranslation();
-
-  const changeLanguage = (locale) => {
-    i18n.changeLanguage(locale);
-  };
-
-  return (
-    <div>
-      <button
-        onClick={() => changeLanguage("en")}
-        disabled={i18n.language === "en"}
-      >
-        English
-      </button>
-      <button
-        onClick={() => changeLanguage("fr")}
-        disabled={i18n.language === "fr"}
-      >
-        Français
-      </button>
-      <button
-        onClick={() => changeLanguage("es")}
-        disabled={i18n.language === "es"}
-      >
-        Español
-      </button>
-    </div>
-  );
-};
-
-export default LocaleSwitcher;
-```
-
-```jsx fileName="src/components/LocaleSwitcher/LocaleSwitcher.csx" codeFormat="commonjs"
-const { useTranslation } = require("react-i18next");
-
-const LocaleSwitcher = () => {
-  const { i18n } = useTranslation();
-
-  const changeLanguage = (locale) => {
-    i18n.changeLanguage(locale);
-  };
-
-  return (
-    <div>
-      <button
-        onClick={() => changeLanguage("en")}
-        disabled={i18n.language === "en"}
-      >
-        English
-      </button>
-      <button
-        onClick={() => changeLanguage("fr")}
-        disabled={i18n.language === "fr"}
-      >
-        Français
-      </button>
-      <button
-        onClick={() => changeLanguage("es")}
-        disabled={i18n.language === "es"}
-      >
-        Español
-      </button>
-    </div>
-  );
-};
-
-module.exports = LocaleSwitcher;
-```
-
----
-
-### (Optional) Step 8: Integrate with Create React App Scripts (CRACO)
-
-**react-intlayer** provides a CRACO-based approach for custom builds and dev server configuration. If you want Intlayer's build step integrated seamlessly into your Create React App workflow, follow these steps:
-
-1. **Install react-intlayer** (if you haven't):
-
-   ```bash packageManager="npm"
-   npm install react-intlayer --save-dev
-   ```
-
-   ```bash packageManager="pnpm"
-   pnpm add react-intlayer --save-dev
-   ```
-
-   ```bash packageManager="yarn"
-   yarn add react-intlayer --save-dev
-   ```
-
-2. **Adjust your `package.json` scripts** to use `react-intlayer` scripts:
-
-   ```json fileName="package.json"
-   {
-     "scripts": {
-       "start": "react-intlayer start",
-       "build": "react-intlayer build",
-       "transpile": "intlayer build"
-     }
-   }
-   ```
-
-   > The `react-intlayer` scripts are based on [CRACO](https://craco.js.org/). You can also implement your own setup based on the intlayer craco plugin. [See example here](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
-
-Now, running `npm run build`, `yarn build`, or `pnpm build` triggers both Intlayer and CRA builds.
-
----
-
-### (Optional) Step 9: Optimize Your Bundle Size
-
-As your application scales, you may want to optimize the bundle size by ensuring only the required translations are loaded. While i18next with `i18next-resources-to-backend` already provides lazy-loading capabilities, you can further optimize by:
-
-- **Code-Splitting**: Use dynamic imports to load components and their translations on demand.
-- **Tree-Shaking**: Ensure your build tool (e.g., Webpack, Vite) is configured to remove unused code.
-- **Namespace Splitting**: Split translations into multiple namespaces and load them as needed.
-
-For more optimization techniques, refer to the [i18next documentation](https://www.i18next.com/principles/performance) and your build tool's documentation.
-
----
-
-### Configure TypeScript
-
-**Intlayer** provides **autogenerated type definitions** for your content, enabling TypeScript autocompletion and error detection.
-
-To ensure TypeScript picks them up, add the autogenerated types directory to your `tsconfig.json` **include** array:
-
-```json5 fileName="tsconfig.json"
-{
-  "compilerOptions": {
-    // Your existing TypeScript configurations
-  },
-  "include": [
-    "src",
-    "types", // Include the auto-generated types
-  ],
-}
-```
-
-> This enables TypeScript to infer the shape of your translations, providing better autocompletion and compile-time error detection.
-
----
-
-### Git Configuration
-
-It is recommended to **ignore** auto-generated files and folders from Intlayer. This avoids committing them to your Git repository.
-
-Add the following lines to your `.gitignore` file:
+It's recommended to ignore auto-generated Intlayer files:
 
 ```plaintext fileName=".gitignore"
-# Ignore the files generated by Intlayer
+# Ignore files generated by Intlayer
 .intlayer
-intl
 ```
 
-You typically do **not** commit these resources or `.intlayer` internal build artifacts, as they can be regenerated on each build.
-
----
+These files can be regenerated during your build process and don't need to be committed to version control.
 
 ### VS Code Extension
 
-To improve your development experience with Intlayer, consider installing the official **Intlayer 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)
-
-This extension provides:
-
-- **Autocompletion** for translation keys.
-- **Real-time error detection** for missing translations.
-- **Inline previews** of translated content.
-- **Quick actions** to easily create and update translations.
-
-For more details, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### Go Further
-
-To explore more advanced use cases and integrations:
-
-- **[Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**: Use the visual editor to manage translations directly from your application UI.
-- **[Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**: Externalize your content management using the Intlayer CMS for seamless collaboration with non-technical team members.
-- **[Intlayer with Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_16.md)**: Learn how to integrate Intlayer with Next.js for server-side rendering and static site generation.
-
----
-
-## Conclusion
-
-By integrating **Intlayer** with **react-i18next**, you combine the best of both worlds:
-
-- **Component-level content management** with Intlayer's flexible, developer-friendly approach.
-- **Robust runtime translation** with the proven capabilities of react-i18next.
-- **TypeScript support** for type-safe translations and autocompletion.
-- **Scalable architecture** that grows with your application.
-
-This integration streamlines your internationalization workflow, reduces maintenance overhead, and provides a superior developer experience. Start building your multilingual React application today with Intlayer and react-i18next!