@intlayer/docs 5.8.1 → 6.0.0-canary.0

package/docs/en/readme.md

@@ -0,0 +1,261 @@
+<p align="center">
+  <a href="https://intlayer.org">
+    <img src="https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/cover.png" width="60%" alt="Intlayer Logo" />
+  </a>
+</p>
+
+<h1 align="center">
+  <strong> Intlayer : an Open-source, flexible i18n toolkit with AI-powered translation & CMS.</strong>
+</h1>
+
+<br />
+
+<p align="center">
+  <a href="https://intlayer.org/doc/concept/content">Docs</a> •
+  <a href="https://intlayer.org/doc/environment/nextjs">Next.js</a> •
+  <a href="https://intlayer.org/doc/environment/vite-and-react">React + Vite</a> •
+  <a href="https://intlayer.org/doc/concept/cms">CMS</a> •
+  <a href="https://discord.gg/7uxamYVeCk">Discord</a>
+</p>
+<p align="center" style="margin-top:15px;">
+  <a href="https://www.npmjs.com/package/intlayer" target="_blank"><img src="https://img.shields.io/npm/v/intlayer?style=for-the-badge&labelColor=FFFFFF&color=000000&logoColor=FFFFFF" alt="npm version" height="24"/>
+  </a>
+    <a href="https://github.com/aymericzip/intlayer/stargazers" target="_blank"><img src="https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logo=github&logoColor=FFD700" alt="GitHub Stars" height="24"/>
+  </a>
+  <a href="https://www.npmjs.org/package/intlayer" target="_blank"><img src="https://img.shields.io/npm/dm/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000" alt="monthly downloads" height="24"/>
+  </a>
+  <a href="https://github.com/aymericzip/intlayer/blob/main/LICENSE"><img src="https://img.shields.io/github/license/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000" alt="license"/>
+  </a>
+  <a href="https://github.com/aymericzip/intlayer/commits/main"><img src="https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000" alt="last commit"/>
+  </a>
+</p>
+
+![Watch the video](https://github.com/aymericzip/intlayer/blob/main/docs/assets/demo_video.gif)
+
+<a href="https://intlayer.org/doc/concept/content">
+  <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />
+</a>
+
+## What is Intlayer?
+
+Most i18n libraries are either too complex, too rigid, or not built for modern frameworks.
+
+Intlayer is a **modern i18n solution** for web and mobile apps.  
+It’s framework-agnostic, **AI-powered**, and includes a free **CMS & visual editor**.
+
+With **per-locale content files**, **TypeScript autocompletion**, **tree-shakable dictionaries**, and **CI/CD integration**, Intlayer makes internationalization **faster, cleaner, and smarter**.
+
+## Keys benefits of Intlayer:
+
+| Feature                                                                                                                                             | Description                                                                                                                                                                                                                                                                                                                                                                                    |
+| --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true" alt="Feature" width="700">                          | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.                                                                                                                                                                                                                   |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true" alt="Feature" width="700">       | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content)                                                                                                                                                                               |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true" alt="Feature" width="700"> | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                             |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true" alt="Feature" width="700">                      | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                 |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true" alt="Feature" width="700">                         | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                         |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true" alt="Feature" width="700">                   | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                              |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true" alt="Feature" width="700">                    | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                       |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true" alt="Feature" width="700">                           | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components, enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                   |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true" alt="Feature" width="700">                         | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                    |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700">                            | **Markdown Support**<br><br>Import and interpret, locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file)                                                                                                  |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700">                       | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)             |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700">                              | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                            |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true" alt="Feature" width="700">                    | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                      |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700">                      | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider / API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill) |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700">                                 | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)                                                                               |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700">                    | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, builting your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                   |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700">                    | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, and react-intl. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)           |
+
+---
+
+## 📦 Installation
+
+Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.
+
+<a href="https://intlayer.org/doc/concept/content">
+  <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />
+</a>
+
+```bash
+npm install intlayer react-intlayer
+```
+
+⚡ Quick Start (Next.js)
+
+```ts
+// intlayer.config.ts
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```tsx
+// app/page.tsx
+import { useIntlayer } from "react-intlayer";
+
+const Component = () => {
+  const { title } = useIntlayer("home");
+
+  return <h1>{title}</h1>;
+};
+```
+
+<a href="https://intlayer.org/doc/environment/nextjs"> Get the full guide → </a>
+
+## 🎥 Live tutorial on YouTube
+
+[![How to Internationalize your application using Intlayer](https://i.ytimg.com/vi/e_PPG7PTqGU/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDtyJ4uYotEjl12nZ_gZKZ_kjEgOQ)](https://youtu.be/e_PPG7PTqGU?si=GyU_KpVhr61razRw)
+
+<a href="https://intlayer.org/doc/concept/content">
+  <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />
+</a>
+
+## Table of Contents
+
+Explore our comprehensive documentation to get started with Intlayer and learn how to integrate it into your projects.
+
+<details open>
+<summary style="font-size:16px; font-weight:bold;">📘 Get Started</summary>
+<ul>
+  <li><a href="https://intlayer.org/doc/why">Why Intlayer?</a></li>
+  <li><a href="https://intlayer.org/doc">Introduction</a></li>
+</ul>
+</details>
+
+<details>
+<summary style="font-size:16px; font-weight:bold;">⚙️ Concept</summary>
+<ul>
+  <li><a href="https://intlayer.org/doc/concept/how-works-intlayer">How Intlayer Works</a></li>
+  <li><a href="https://intlayer.org/doc/concept/configuration">Configuration</a></li>
+  <li><a href="https://intlayer.org/doc/concept/ai">AI provider</a></li>
+  <li><a href="https://intlayer.org/doc/concept/cli">Intlayer CLI</a></li>
+  <li><a href="https://intlayer.org/doc/concept/editor">Intlayer Editor</a></li>
+  <li><a href="https://intlayer.org/doc/concept/cms">Intlayer CMS</a></li>
+  <li><a href="https://intlayer.org/doc/concept/content">Dictionary</a>
+    <ul>
+      <li><a href="https://intlayer.org/doc/concept/content/per-locale-file">Per-Locale Content Declaration File</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/translation">Translation</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/enumeration">Enumeration</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/condition">Condition</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/nesting">Nesting</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/markdown">Markdown</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/function-fetching">Function Fetching</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/insertion">Insertion</a></li>
+      <li><a href="https://intlayer.org/doc/concept/content/file">File</a></li>
+    </ul>
+  </li>
+</ul>
+</details>
+
+<details open>
+<summary style="font-size:16px; font-weight:bold;">🌐 Environment</summary>
+<ul>
+  <li><a href="https://intlayer.org/doc/environment/nextjs">Intlayer with Next.js 15</a>
+    <ul>
+      <li><a href="https://intlayer.org/doc/environment/nextjs/14">Next.js 14 (App Router)</a></li>
+      <li><a href="https://intlayer.org/doc/environment/nextjs/next-with-Page-Router">Next.js Page Router</a></li>
+    </ul>
+  </li>
+  <li><a href="https://intlayer.org/doc/environment/create-react-app">React CRA</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-react">Vite + React</a>
+     <ul>
+      <li><a href="https://intlayer.org/doc/environment/vite-and-react/react-router-v7">React-router-v7</a></li>
+      <li><a href="https://intlayer.org/doc/environment/vite-and-react/tanstack-start">Tanstack start</a></li>
+    </ul>
+  </li>
+  <li><a href="https://intlayer.org/doc/environment/react-native-and-expo">React Native</a></li>
+  <li><a href="https://intlayer.org/doc/environment/lynx-and-react">Lynx + React</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-svelte">Vite + Svelte</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-preact">Vite + Preact</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-vue">Vite + Vue</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-nuxt">Vite + Nuxt</a></li>
+  <li><a href="https://intlayer.org/doc/environment/vite-and-solid">Vite + Solid</a></li>
+  <li><a href="https://intlayer.org/doc/environment/angular">Angular</a></li>
+  <li><a href="https://intlayer.org/doc/environment/express">Express</a></li>
+  <li><a href="https://intlayer.org/doc/environment/nest">NestJS</a></li>
+</ul>
+</details>
+
+<details>
+<summary style="font-size:16px; font-weight:bold;">📰 Blog</summary>
+<ul>
+  <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/what_is_internationalization.md">What is i18n</a></li>
+  <li><a href="https://intlayer.org/blog/SEO-and-i18n">i18n and SEO</a></li>
+  <li><a href="https://intlayer.org/blog/intlayer-with-next-i18next">Intlayer and i18next</a></li>
+  <li><a href="https://intlayer.org/blog/intlayer-with-react-i18next">Intlayer and react-intl</a></li>
+  <li><a href="https://intlayer.org/blog/intlayer-with-next-intl">Intlayer and next-intl</a></li>
+</ul>
+</details>
+
+## 🌐 Readme in other languages
+
+[English](https://github.com/aymericzip/intlayer/blob/main/readme.md) •
+[简体中文](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/readme.md) •
+[Русский](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/readme.md) •
+[日本語](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/readme.md) •
+[Français](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/readme.md) •
+[한국어](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/readme.md) •
+[Español](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/readme.md) •
+[Deutsch](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/readme.md) •
+[العربية](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/readme.md) •
+[Italiano](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/readme.md) •
+[English (UK)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/readme.md) •
+[Português](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/readme.md) •
+[हिन्दी](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/readme.md)
+[Türkçe](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/readme.md)
+
+## 🤝 Community
+
+Intlayer is built with and for the community and we’d love your input!
+
+- Have a suggestion? [Open an issue](https://github.com/aymericzip/intlayer/issues)
+- Found a bug or improvement? [Submit a PR](https://github.com/aymericzip/intlayer/pulls)
+- Need help or want to connect? [Join our Discord](https://discord.gg/7uxamYVeCk)
+
+You can also follow us on :
+
+  <div>
+    <br/>
+    <p align="center">
+      <a href="https://discord.gg/528mBV4N" target="blank"><img align="center"
+         src="https://img.shields.io/badge/discord-5865F2.svg?style=for-the-badge&logo=discord&logoColor=white"
+         alt="Intlayer Discord" height="30"/></a>
+      <a href="https://www.linkedin.com/company/intlayerorg" target="blank"><img align="center"
+         src="https://img.shields.io/badge/linkedin-%231DA1F2.svg?style=for-the-badge&logo=linkedin&logoColor=white"
+         alt="Intlayer LinkedIn" height="30"/></a>
+      <a href="https://www.facebook.com/intlayer" target="blank"><img align="center"
+         src="https://img.shields.io/badge/facebook-4267B2.svg?style=for-the-badge&logo=facebook&logoColor=white"
+         alt="Intlayer Facebook" height="30"/></a>
+      <a href="https://www.instagram.com/intlayer/" target="blank"><img align="center"
+         src="https://img.shields.io/badge/instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"
+         alt="Intlayer Instagram" height="30"/></a>
+      <a href="https://x.com/Intlayer183096" target="blank"><img align="center"
+         src="https://img.shields.io/badge/x-1DA1F2.svg?style=for-the-badge&logo=x&logoColor=white"
+         alt="Intlayer X" height="30"/></a>
+      <a href="https://www.youtube.com/@intlayer" target="blank"><img align="center"
+         src="https://img.shields.io/badge/youtube-FF0000.svg?style=for-the-badge&logo=youtube&logoColor=white"
+         alt="Intlayer YouTube" height="30"/></a>
+      <a href="https://www.tiktok.com/@intlayer" target="blank"><img align="center"
+         src="https://img.shields.io/badge/tiktok-000000.svg?style=for-the-badge&logo=tiktok&logoColor=white"
+         alt="Intlayer TikTok" height="30"/></a>
+      <br>
+    </p>
+</div>
+
+### Contribution
+
+For more detailed guidelines on contributing to this project, please refer to the [`CONTRIBUTING.md`](https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md) file. It contains essential information on our development process, commit message conventions, and release procedures. Your contributions are valuable to us, and we appreciate your efforts in making this project better!
+
+### Thank You for the Support
+
+If you like Intlayer, give us a ⭐ on GitHub. It helps others discover the project!
+
+[![Star History Chart](https://api.star-history.com/svg?repos=aymericzip/intlayer&type=Date)](https://star-history.com/#aymericzip/intlayer&Date)

package/docs/en/testing.md

@@ -0,0 +1,200 @@
+---
+createdAt: 2025-03-01
+updatedAt: 2025-09-20
+title: Testing your content
+description: Discover how to test your content with Intlayer.
+keywords:
+  - Testing
+  - Intlayer
+  - Internationalization
+  - CMS
+  - Content Management System
+  - Visual Editor
+slugs:
+  - doc
+  - testing
+---
+
+# Testing your content
+
+This guide shows how to automatically verify your dictionaries are complete, catch missing translations before shipping, and test localized UI in your app.
+
+---
+
+## What you can test
+
+- **Missing translations**: fail CI if any required locales are missing for any dictionary.
+- **Localized UI rendering**: render components with a specific locale provider and assert on visible text/attributes.
+- **Build-time audits**: run a quick audit locally via CLI.
+
+---
+
+## Quick start: audit via CLI
+
+Run the audit from your project root:
+
+```bash
+npx intlayer content test
+```
+
+Useful flags:
+
+- `--env-file [path]`: load environment variables from a file.
+- `-e, --env [name]`: select an environment profile.
+- `--base-dir [path]`: set the app base directory for resolution.
+- `--verbose`: show verbose logs.
+- `--prefix [label]`: prefix log lines.
+
+Note: the CLI prints a detailed report but does not exit non‑zero on failures. For CI gating, add a unit test (below) that asserts zero missing required locales.
+
+---
+
+## Programmatic test (Vitest/Jest)
+
+Use the Intlayer CLI API to assert there are no missing translations for your required locales.
+
+```ts file=i18n.test.ts
+/* @vitest-environment node */
+import { listMissingTranslations } from "intlayer/cli";
+import { describe, expect, it } from "vitest";
+
+describe("translations", () => {
+  it("has no missing required locales", () => {
+    const result = listMissingTranslations();
+
+    if (result.missingRequiredLocales.length > 0) {
+      // Helpful when the test fails locally or in CI
+      console.log(result.missingTranslations);
+    }
+
+    expect(result.missingRequiredLocales).toHaveLength(0);
+  });
+});
+```
+
+Jest equivalent:
+
+```ts file=i18n.test.ts
+import { listMissingTranslations } from "intlayer/cli";
+
+test("has no missing required locales", () => {
+  const result = listMissingTranslations();
+
+  if (result.missingRequiredLocales.length > 0) {
+    // Helpful when the test fails locally or in CI
+    console.log(result.missingTranslations);
+  }
+
+  expect(result.missingRequiredLocales).toHaveLength(0);
+});
+```
+
+How it works:
+
+- Intlayer reads your configuration (locales, requiredLocales) and declared dictionaries, then reports:
+  - `missingTranslations`: per‑key, which locales are missing and from which file.
+  - `missingLocales`: union of all missing locales.
+  - `missingRequiredLocales`: subset limited to `requiredLocales` (or all locales if `requiredLocales` is not set).
+
+---
+
+## Testing localized UI (React / Next.js)
+
+Render components under an Intlayer provider and assert on visible content.
+
+React example (Testing Library):
+
+```tsx
+import { IntlayerProvider } from "react-intlayer/client";
+import { render, screen } from "@testing-library/react";
+import { MyComponent } from "./MyComponent";
+
+test("renders localized title in English", () => {
+  render(
+    <IntlayerProvider locale="en-US">
+      <MyComponent />
+    </IntlayerProvider>
+  );
+
+  expect(screen.getByText("Expected English title")).toBeInTheDocument();
+});
+```
+
+Next.js (App Router) example: use the framework wrapper:
+
+```tsx
+import { IntlayerClientProvider } from "next-intlayer/client";
+import { render, screen } from "@testing-library/react";
+import { MyPage } from "./MyPage";
+
+test("renders localized heading in French", () => {
+  render(
+    <IntlayerClientProvider locale="fr-FR">
+      <MyPage />
+    </IntlayerClientProvider>
+  );
+  expect(
+    screen.getByRole("heading", { name: "Titre attendu" })
+  ).toBeInTheDocument();
+});
+```
+
+Tips:
+
+- When you need raw string values for attributes (e.g., `aria-label`), access the `.value` field returned by `useIntlayer` in React.
+- Keep dictionaries colocated with components for easier unit testing and cleanup.
+
+---
+
+## Continuous Integration
+
+Add a test that fails the build when required translations are missing.
+
+`package.json`:
+
+```json
+{
+  "scripts": {
+    "test:i18n": "vitest run -c"
+  }
+}
+```
+
+GitHub Actions example:
+
+```yaml
+name: CI
+on: [push, pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run test:i18n
+```
+
+Optional: run the CLI audit for a human-readable summary alongside tests:
+
+```bash
+npx intlayer content test --verbose
+```
+
+---
+
+## Troubleshooting
+
+- Ensure your Intlayer configuration defines `locales` and (optionally) `requiredLocales`.
+- If your app uses dynamic or remote dictionaries, run tests in an environment where the dictionaries are available.
+- For mixed monorepos, use `--base-dir` to point the CLI at the correct application root.
+
+---
+
+## Doc History
+
+| Version | Date       | Changes                 |
+| ------- | ---------- | ----------------------- |
+| 6.0.0   | 2025-09-20 | Introduction of testing |

package/docs/en-GB/autoFill.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-13
-updatedAt: 2025-06-29
+updatedAt: 2025-09-20
 title: Auto Fill
 description: Learn how to use auto fill functionality in Intlayer to automatically populate content based on predefined patterns. Follow this documentation to implement auto fill features efficiently in your project.
 keywords:
@@ -20,6 +20,7 @@ slugs:
 # Autofill Content Declaration File Translations
 
 **Autofill content declaration files** are a way to speed up your development workflow.
+
 The autofill mechanism works through a _master-slave_ relationship between content declaration files. When the main (master) file is updated, Intlayer will automatically apply those changes to the derived (autofilled) declaration files.
 
 ```ts fileName="src/components/example/example.content.ts"
@@ -55,7 +56,7 @@ Intlayer will automatically generate the derived declaration file at `src/compon
       "nodeType": "translation",
       "translation": {
         "fr": "Ceci est un exemple de contenu",
-        "es": "Este es un ejemplo de contenido",
+        "es": "Este es un exemple de contenu",
       },
     },
   },
@@ -66,7 +67,7 @@ Afterwards, both declaration files will be merged into a single dictionary, acce
 
 ## Autofilled File Format
 
-The recommended format for autofilled declaration files is **JSON**, which helps avoid formatting constraints. However, Intlayer also supports `.ts`, `.js`, `.mjs`, `.cjs`, and other formats.
+The recommended format for autofilled declaration files is **JSON**, which helps to avoid formatting constraints. However, Intlayer also supports `.ts`, `.js`, `.mjs`, `.cjs`, and other formats.
 
 ```ts fileName="src/components/example/example.content.ts"
 const exampleContent = {
@@ -111,7 +112,7 @@ This will generate the file at:
 
 ## Autogenerate Per-Locale Content Declaration Files
 
-The `autoFill` field also supports generation of **per-locale** content declaration files.
+The `autoFill` field also supports the generation of **per-locale** content declaration files.
 
 ```ts fileName="src/components/example/example.content.ts"
 const exampleContent = {
@@ -131,6 +132,8 @@ This will generate two separate files:
 - `src/components/example/example.fr.content.json`
 - `src/components/example/example.es.content.json`
 
+> In this case, if the object does not contain all locales, Intlayer skips the generation of the remaining locales.
+
 ## Filter Specific Locale Autofill
 
 Using an object for the `autoFill` field allows you to apply filters and generate only specific locale files.
@@ -156,9 +159,10 @@ You can use variables inside the `autoFill` path to dynamically resolve the targ
 **Available variables:**
 
 - `{{locale}}` – Locale code (e.g. `fr`, `es`)
+- `{{fileName}}` – File name (e.g. `index`)
 - `{{key}}` – Dictionary key (e.g. `example`)
 
-```ts fileName="src/components/example/example.content.ts"
+```ts fileName="src/components/example/index.content.ts"
 const exampleContent = {
   key: "example",
   autoFill: "/messages/{{locale}}/{{key}}.content.json",
@@ -173,6 +177,25 @@ This will generate:
 - `/messages/fr/example.content.json`
 - `/messages/es/example.content.json`
 
+```ts fileName="src/components/example/index.content.ts"
+const exampleContent = {
+  key: "example",
+  autoFill: "./{{fileName}}.content.json",
+  content: {
+    // Your content
+  },
+};
+```
+
+This will generate:
+
+- `./index.content.json`
+- `./index.content.json`
+
 ## Doc History
 
-- 5.5.10 - 2025-06-29: Init history
+| Version | Date       | Changes                     |
+| ------- | ---------- | --------------------------- |
+| 6.0.0   | 2025-09-20 | Add global configuration    |
+| 6.0.0   | 2025-09-17 | Add `{{fileName}}` variable |
+| 5.5.10  | 2025-06-29 | Initialise history          |