@intlayer/docs 9.4.4 → 9.5.0

package/docs/en-GB/introduction.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-08-30
+updatedAt: 2026-09-06
 title: Introduction
 description: Discover how Intlayer works. See the steps used by Intlayer in your application. See what the different packages do.
 keywords:
@@ -98,31 +98,26 @@ Compared to main solutions like `next-intl` or `i18next`, Intlayer is a solution
 Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
 
 </Accordion>
-
 <Accordion header="Maintainability">
 
 Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
 
 </Accordion>
-
 <Accordion header="AI Agent">
 
 Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
 
 </Accordion>
-
 <Accordion header="Automation">
 
 Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md) to help **translate in the background**.
 
 </Accordion>
-
 <Accordion header="Performance">
 
 Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimises your content loading at build time.
 
 </Accordion>
-
 <Accordion header="Scaling with none-dev">
 
 More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
@@ -180,21 +175,45 @@ We’ve built Intlayer with flexibility in mind, offering seamless integration a
 - **[Intlayer with Next.js 15](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nextjs_15.md)**
 - **[Intlayer with Next.js 14 (App Router)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nextjs_14.md)**
 - **[Intlayer with Next.js Page Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nextjs_page_router.md)**
-- **[Intlayer with React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_create_react_app.md)**
+- **[Intlayer with Tanstack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_tanstack.md)**
+- **[Intlayer with Tanstack Start + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_tanstack+solid.md)**
 - **[Intlayer with Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+react.md)**
 - **[Intlayer with React Router v7](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_react_router_v7.md)**
-- **[Intlayer with Tanstack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_tanstack.md)**
+- **[Intlayer with React Router v7 (fs-routes)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md)**
+- **[Intlayer with React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_create_react_app.md)**
 - **[Intlayer with React Native and Expo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_react_native+expo.md)**
 - **[Intlayer with Lynx and React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_lynx+react.md)**
-- **[Intlayer with Vite + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+preact.md)**
+- **[Intlayer with Astro](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro.md)**
+- **[Intlayer with Astro + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_react.md)**
+- **[Intlayer with Astro + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_vue.md)**
+- **[Intlayer with Astro + Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_svelte.md)**
+- **[Intlayer with Astro + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_solid.md)**
+- **[Intlayer with Astro + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_preact.md)**
+- **[Intlayer with Astro + Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_lit.md)**
+- **[Intlayer with Astro + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_vanilla.md)**
 - **[Intlayer with Vite + Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+vue.md)**
 - **[Intlayer with Nuxt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nuxt.md)**
 - **[Intlayer with Vite + Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+svelte.md)**
 - **[Intlayer with SvelteKit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_svelte_kit.md)**
+- **[Intlayer with Vite + Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+solid.md)**
+- **[Intlayer with SolidStart](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_solid_start.md)**
+- **[Intlayer with Vite + Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+preact.md)**
+- **[Intlayer with Angular 22](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_angular_21.md)**
+- **[Intlayer with Angular 19](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_angular_19.md)**
+- **[Intlayer with Analog](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_analog.md)**
+- **[Intlayer with Vite + Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+lit.md)**
+- **[Intlayer with Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+vanilla.md)**
+- **[Intlayer with Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vanilla.md)**
+- **[Intlayer with htmx](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_htmx.md)**
 - **[Intlayer with Express](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_express.md)**
 - **[Intlayer with NestJS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_nestjs.md)**
+- **[Intlayer with Fastify](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_fastify.md)**
 - **[Intlayer with Hono](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_hono.md)**
-- **[Intlayer with Angular](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_angular_21.md)**
+- **[Intlayer with AdonisJS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_adonisjs.md)**
+- **[Intlayer with Elysia](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_elysia.md)**
+- **[Intlayer with Storybook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_storybook.md)**
+- **[Intlayer with next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_next-intl.md)**
+- **[Intlayer with next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_next-i18next.md)**
 
 Each integration guide includes best practices for using Intlayer’s features, like **server-side rendering**, **dynamic routing**, or **client-side rendering**, so you can maintain a fast, SEO-friendly, and highly scalable application.
 
@@ -213,25 +232,21 @@ We value the power of open-source and community-driven development. If you’d l
 Intlayer is an internationalization (i18n) library for JavaScript and TypeScript applications. You declare the content of a component next to that component in a `.content.ts` file, Intlayer compiles those declarations into typed dictionaries at build time, and your components read them through a hook such as `useIntlayer`. It covers translation, plural rules, gender, Markdown, locale aware routing, SEO metadata, AI assisted translation and a visual editor for non developers.
 
 </Question>
-
 <Question title="How much does i18n add to my bundle size?">
 
 Much less than a namespace based setup, because a page never downloads a catalogue it does not render. Server rendered markup resolves its content on the server, and the build time compiler replaces `useIntlayer` calls with the exact dictionary entries a component uses, so unused keys and unused languages are dropped. [Dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dynamic_dictionaries/index.md) split the rest per locale. Measured against the usual alternatives, Intlayer reduces bundle and page size by up to 50%. See [bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/bundle_optimization.md) and the [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/benchmark/index.md).
 
 </Question>
-
 <Question title="Can I migrate from `i18next`, `next-intl` or `react-i18next` without rewriting my components?">
 
 Yes, and there are two paths. You can migrate the content progressively with the [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_i18next_to_intlayer.md) or the [next-intl migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_next-intl_to_intlayer.md). Or you can keep your current API entirely: the [compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compat/index.md) expose the exact same API as `i18next`, `react-i18next`, `next-intl`, `next-i18next`, `react-intl`, `use-intl`, `vue-i18n` and `Lingui`, but served by Intlayer dictionaries, so imports change and component code does not.
 
 </Question>
-
 <Question title="Can I keep my existing JSON translation files?">
 
 Yes. The [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/plugins/sync-json.md) keeps your `/messages/{locale}/{namespace}.json` files as the source of truth and generates Intlayer dictionaries from them, in both directions. A [sync PO plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/plugins/sync-po.md) does the same for gettext catalogues, and [per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/per_locale_file.md) let you split content by language instead of grouping locales in one file.
 
 </Question>
-
 <Question title="Do I have to move my content key by key?">
 
 No. Run `npx intlayer extract` and Intlayer reads your source files, pulls the user facing strings out and writes a `.content` file next to each one, so you review a diff instead of copying strings into a catalogue one at a time. See the [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/extract.md).
@@ -239,7 +254,6 @@ No. Run `npx intlayer extract` and Intlayer reads your source files, pulls the u
 For a fully automated pipeline, the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compiler.md) does the same at build time on JSX, TSX, Vue and Svelte source, generating the dictionaries on every change so there are no keys to maintain by hand. It works by static analysis, so strings that only exist at runtime stay out of reach, and it needs a few annotations to tell user facing text apart from application logic.
 
 </Question>
-
 <Question title="What editor and AI agent tooling is available?">
 
 Five pieces, all optional:
@@ -251,7 +265,6 @@ Five pieces, all optional:
 - **[ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/eslint.md)**: `no-raw-text` flags hardcoded strings, with further rules for static dictionary keys and unused content.
 
 </Question>
-
 <Question title="What are the different solutions available to internationalize a JavaScript app?">
 
 The field falls into three generations:
@@ -263,43 +276,36 @@ The field falls into three generations:
 See [why Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/interest_of_intlayer.md) for the detailed comparison, and the [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/benchmark/index.md) for measured bundle and performance numbers.
 
 </Question>
-
 <Question title="Which frameworks does Intlayer support?">
 
 React, Next.js, Vite, TanStack Start, React Router, Vue, Nuxt, Svelte, SvelteKit, Angular, Solid, Preact, Lit, Astro with every island framework, React Native with Expo, Lynx, and on the server Express, Fastify, NestJS, Hono, Elysia and AdonisJS. Each has its own guide under [environments](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/introduction.md).
 
 </Question>
-
 <Question title="Why declare content next to the component instead of in a central JSON file?">
 
 Three reasons. A page ships only the entries its components render, instead of a whole namespace, which is what cuts bundle size. A feature folder can be copied or deleted in one piece, without hunting through a shared catalogue for orphaned keys. And an LLM or an agent editing a component sees its content in the same folder, which is why co-location makes AI assisted work reliable. See [how Intlayer works](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/how_works_intlayer.md).
 
 </Question>
-
 <Question title="How do I translate my app automatically with AI?">
 
 Run `npx intlayer fill`. The CLI detects missing translations and fills them with the LLM of your choice, using your own provider and API key, so you pay the AI provider directly. `--git-diff` restricts the run to the content changed on the branch, which keeps it cheap in CI. See the [fill command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/fill.md) and [CI/CD integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/CI_CD.md).
 
 </Question>
-
 <Question title="How do I find missing translations?">
 
 Run `npx intlayer test`. It fails when a declared locale is missing content, so an untranslated string never reaches production. The [VS Code extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/vs_code_extension.md) shows the same errors inline, and the [ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/eslint.md) flags hardcoded strings with its `no-raw-text` rule. See [testing your content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/testing.md).
 
 </Question>
-
 <Question title="Do I need to put the locale in the URL?">
 
 No. `routing.mode` accepts `"prefix-no-default"` (the default, `/about` and `/fr/about`), `"prefix-all"`, `"no-prefix"` and `"search-params"`, and `routing.domains` maps each locale to its own domain. Whatever the scheme, `getMultilingualUrls` builds the `hreflang` alternates for your metadata and sitemap. See the [configuration reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
 
 </Question>
-
 <Question title="How can translators and content editors work without touching the code?">
 
 The [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) runs on your own infrastructure and lets anyone click on the text of your running app to edit it, writing the change back to the code base. The [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md) externalizes content so it can change without a deployment, with [live sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/live.md) applying updates at runtime.
 
 </Question>
-
 <Question title="Is Intlayer free and open source?">
 
 Yes. Intlayer is open source under the Apache 2.0 licence, and the library, CLI, compiler and visual editor are free to use, commercial projects included. The hosted CMS is an optional paid service, and it can also be [self hosted](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/self_hosting.md).

package/docs/en-GB/live-sync.md

@@ -37,8 +37,6 @@ Live Sync allows your app to reflect CMS content changes at runtime. No rebuild
 
 <TOC/>
 
----
-
 ## Enabling Live Sync
 
 Enable Live Sync by updating your Intlayer configuration:

package/docs/en-GB/lsp.md

@@ -31,8 +31,6 @@ author: aymericzip
 
 The **Intlayer Language Server** is a [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/) implementation that makes your IDE — and your AI agent — Intlayer-aware. It connects a call like `useIntlayer("home")` to the `.content.ts` file that declares it, in both directions.
 
----
-
 ## Features
 
 | Feature                 | Shortcut            | What it does                                                                                       |
@@ -65,8 +63,6 @@ This works for every `*-intlayer` package (`next-intlayer`, `react-intlayer`, `v
 
 > Dictionaries are read from the build output, so run `npx intlayer build` — or keep your dev server running — to give the server something to resolve.
 
----
-
 ## Installation
 
 The server ships as the `intlayer-lsp` binary in `@intlayer/lsp`:
@@ -89,8 +85,6 @@ bun add --dev @intlayer/lsp
 
 Install it globally instead (`npm install -g @intlayer/lsp`) if your editor needs `intlayer-lsp` on the `PATH` — this is the case for the Claude Code plugin and for any configuration below that calls the binary directly.
 
----
-
 ## Setup
 
 <Tabs defaultTab="vscode">
@@ -255,16 +249,12 @@ Consult your editor's LSP documentation for the exact configuration format.
   </Tab>
 </Tabs>
 
----
-
 ## Note on terminal AI agents
 
 **Claude Code** acts as a real LSP client — see the tab above.
 
 **OpenAI Codex** and most other terminal tools are not LSP clients: they read and write files directly. Running the server on its own does not help them; the value comes from having it active in a companion editor whose index the agent can query (Cursor Composer, Windsurf Cascade, Copilot Chat).
 
----
-
 ## How It Works
 
 For each file, the server locates the closest `intlayer.config.*` and loads that project's configuration to find the compiled dictionaries. Configuration, dictionaries and the source-file list are cached with short TTLs, and invalidated whenever a watched content file changes.
@@ -275,8 +265,6 @@ On a request, the server parses the document (via [oxc](https://oxc.rs/)) and in
 2. **On a field usage** (`content.title`, a destructured property, `t('path.to.field')`, `<Trans>`, …) → resolves the variable back to its dictionary and returns the matching field inside the content files.
 3. **From a content file** → runs the reverse lookup, scanning project sources for call sites of that key or field.
 
----
-
 ## Troubleshooting
 
 | Symptom                                 | Likely cause                 | Fix                                                                      |

package/docs/en-GB/mcp_server.md

@@ -76,8 +76,6 @@ Note that the remote server does not integrate CLI tools, AI autocompletion, etc
 
 > Due to server hosting costs, the availability of the remote server cannot be guaranteed. We limit the number of simultaneous connections. We recommend using the local server (stdio) transport method for the most reliable experience.
 
----
-
 ## Setup via Intlayer CLI (recommended)
 
 Intlayer provides a CLI command to automatically configure the MCP server in your project.
@@ -104,8 +102,6 @@ This command will:
 2. Ask you which transport method you want to use (Local server (stdio) or Remote server (Streamable HTTP)).
 3. Automatically update your configuration file (e.g., `.cursor/mcp.json`, `.vscode/mcp.json`, or the global Claude Desktop config).
 
----
-
 ## Setup via Intlayer VS Code extension
 
 1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
@@ -114,8 +110,6 @@ This command will:
 4. Pick the MCP to install (stdio, Streamable HTTP)
 5. Press Enter.
 
----
-
 ## Manual setup
 
 <Tabs defaultTab="cursor">
@@ -283,8 +277,6 @@ claude mcp add intlayer https://mcp.intlayer.org -t http
   </Tab>
 </Tabs>
 
----
-
 ## Using the MCP Server via CLI
 
 You can also run the Intlayer MCP server directly from the command line for testing, debugging, or integration with other tools.

package/docs/en-GB/migration_from_i18next_to_intlayer.md

@@ -32,7 +32,6 @@ author: aymericzip
 Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
 
 </Accordion>
-
 <Accordion header="Maintainability">
 
 Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
@@ -40,25 +39,21 @@ Scoping your application's content **facilitates maintenance** for large-scale a
 Intlayer is also the solution with the **most active development** in the i18n ecosystem — issues are fixed fast, new framework adapters land regularly, and the core API is continuously refined based on real-world production feedback.
 
 </Accordion>
-
 <Accordion header="AI Agent">
 
 Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
 
 </Accordion>
-
 <Accordion header="Automation">
 
 Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md) to help **translate in the background**.
 
 </Accordion>
-
 <Accordion header="Performance">
 
 Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimises your content loading at build time.
 
 </Accordion>
-
 <Accordion header="Scaling with non-dev">
 
 More than just an i18n solution, Intlayer provides a **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
@@ -66,8 +61,6 @@ More than just an i18n solution, Intlayer provides a **self-hosted [visual edito
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Migration strategies
 
 There are two complementary strategies for migrating from `i18next` to Intlayer:
@@ -78,20 +71,15 @@ There are two complementary strategies for migrating from `i18next` to Intlayer:
 
 This guide covers **Strategy 1** first (drop-in compat adapter), then walks through the optional full migration.
 
----
-
 ## Table of Contents
 
 <TOC/>
 
----
-
 ## Quick migration
 
 The following steps are the minimum required to get your existing `i18next` app running on Intlayer with zero code changes.
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the Intlayer core packages and the compat adapter:
@@ -135,7 +123,6 @@ bun add intlayer @intlayer/i18next @intlayer/sync-json-plugin
 > You can keep `i18next` installed — the compat adapter uses it as a `devDependency` / `peerDependency` for TypeScript types.
 
 </Step>
-
 <Step number={2} title="Configure Intlayer">
 
 The `intlayer init` command creates a starter `intlayer.config.ts`. Update it to match your existing locales and point the `syncJSON` plugin at your message files:
@@ -170,7 +157,6 @@ export default config;
 > **`source`** maps a locale to its JSON file path. **`location`** tells the Intlayer watcher which folder to monitor for changes. The `format: 'i18next'` option ensures that placeholders like `{{name}}` are parsed correctly.
 
 </Step>
-
 <Step number={3} title="Update Bundler Aliases (Optional)">
 
 If you are using a bundler (Vite, Webpack, esbuild), you can inject a module alias so that `import ... from 'i18next'` automatically resolves to `@intlayer/i18next`. This removes the need to manually change any imports in your codebase.
@@ -197,14 +183,11 @@ export default defineConfig({
 
 That's it for the quick migration. Your app now runs on Intlayer while keeping every `i18next` import and API intact.
 
----
-
 ## Complete migration
 
 The steps below are optional and can be done incrementally. They unlock the full Intlayer feature set: visual editor, CMS, typed content files, AI-powered translation, and more.
 
 <Steps>
-
 <Step number={4} title="Explicit import renaming (optional)" isOptional={true}>
 
 If you prefer to make the dependency explicit in your source files, or if you aren't using a bundler plugin to alias imports, you can rename imports manually:
@@ -218,7 +201,6 @@ If you prefer to make the dependency explicit in your source files, or if you ar
 These are **drop-in replacements** — no changes to call signatures, arguments, or return types are required.
 
 </Step>
-
 <Step number={5} title="Enable AI-Powered Translation Automation" isOptional={true}>
 
 Once Intlayer is wired up, use its CLI to fill missing translations automatically:
@@ -280,8 +262,6 @@ export default config;
 
 </Steps>
 
----
-
 ## What you can delete after migration
 
 Once the compat adapter is in place, the following `i18next` boilerplate can be removed:
@@ -294,8 +274,6 @@ Once the compat adapter is in place, the following `i18next` boilerplate can be
 
 When you are ready to go further, Intlayer **automatically discovers all `.content.ts` and `.content.json` files anywhere in your codebase** (by default, anywhere inside `./src`). You can place a `my-component.content.ts` file right next to your logic and Intlayer will pick it up at build time with no additional configuration — no imports, no registration, no centralised index file needed. This makes co-locating translations completely frictionless.
 
----
-
 ## Configure TypeScript
 
 Intlayer uses module augmentation to provide full TypeScript intellisense for your translation keys. Make sure your `tsconfig.json` includes the auto-generated types:
@@ -310,8 +288,6 @@ Intlayer uses module augmentation to provide full TypeScript intellisense for yo
 }
 ```
 
----
-
 ## Git Configuration
 
 Add Intlayer's generated directory to your `.gitignore`:
@@ -321,8 +297,6 @@ Add Intlayer's generated directory to your `.gitignore`:
 .intlayer
 ```
 
----
-
 ## Go Further
 
 - **Visual Editor** — Manage translations visually in your browser: [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)

package/docs/en-GB/migration_from_next-i18next_to_intlayer.md

@@ -35,7 +35,6 @@ author: aymericzip
 Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
 
 </Accordion>
-
 <Accordion header="Maintainability">
 
 Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
@@ -43,25 +42,21 @@ Scoping your application's content **facilitates maintenance** for large-scale a
 Intlayer is also the solution with the **most active development** in the i18n ecosystem — issues are fixed fast, new framework adapters land regularly, and the core API is continuously refined based on real-world production feedback.
 
 </Accordion>
-
 <Accordion header="AI Agent">
 
 Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
 
 </Accordion>
-
 <Accordion header="Automation">
 
 Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md) to help **translate in the background**.
 
 </Accordion>
-
 <Accordion header="Performance">
 
 Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimises your content loading at build time.
 
 </Accordion>
-
 <Accordion header="Scaling with non-dev">
 
 More than just an i18n solution, Intlayer provides a **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
@@ -69,8 +64,6 @@ More than just an i18n solution, Intlayer provides a **self-hosted [visual edito
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Migration strategies
 
 Since `next-i18next` wraps `react-i18next` and `i18next` under the hood, there are two complementary strategies for migrating to Intlayer:
@@ -81,20 +74,15 @@ Since `next-i18next` wraps `react-i18next` and `i18next` under the hood, there a
 
 This guide covers **Strategy 1** first (drop-in compat adapter), then walks through the optional full migration.
 
----
-
 ## Table of Contents
 
 <TOC/>
 
----
-
 ## Quick migration
 
 The following steps are the minimum required to get your existing Next.js Pages Router app running on Intlayer with zero code changes in your pages and components.
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the Intlayer core packages and the compat adapters:
@@ -138,7 +126,6 @@ bun add intlayer next-intlayer react-intlayer @intlayer/next-i18next @intlayer/r
 > You can safely keep `next-i18next`, `react-i18next`, and `i18next` installed during migration, though you will remove them once aliased.
 
 </Step>
-
 <Step number={2} title="Configure Intlayer">
 
 The `intlayer init` command creates a starter `intlayer.config.ts`. Update it to match your existing locales and point the `syncJSON` plugin at your `next-i18next` message files (usually inside `public/locales`):
@@ -173,7 +160,6 @@ export default config;
 > **`source`** maps a locale and a namespace (`key`) to its JSON file path. **`location`** tells the Intlayer watcher which folder to monitor for changes. The `format: 'i18next'` option ensures that placeholders are parsed correctly for `next-i18next`.
 
 </Step>
-
 <Step number={3} title="Update Next.js Configuration">
 
 Wrap your existing `next.config.ts` (or `.js`) with `createNextI18nPlugin` from `@intlayer/next-i18next/plugin`. This wrapper composes `withIntlayer` **and** injects the `next-i18next` / `react-i18next` / `i18next` → `@intlayer/*` aliases, so your existing `import { useTranslation } from 'next-i18next'` calls are transparently redirected at build time. No source file changes are needed.
@@ -217,14 +203,11 @@ That's it for the quick migration. Your Next.js app now runs on Intlayer whilst
 > tAbout("counter.label"); // ✓ typed
 > ```
 
----
-
 ## Complete migration
 
 The steps below are optional and can be done incrementally. They unlock the full Intlayer feature set: visual editor, CMS, typed content files, AI-powered translation, and more.
 
 <Steps>
-
 <Step number={4} title="Explicit import renaming (optional)" isOptional={true}>
 
 The Intlayer plugin already handles aliasing at the bundler level. If you prefer to make the dependency explicit in your source files, you can rename imports manually:
@@ -239,7 +222,6 @@ The Intlayer plugin already handles aliasing at the bundler level. If you prefer
 These are **drop-in replacements** — no changes to call signatures, arguments, or return types are required.
 
 </Step>
-
 <Step number={5} title="Enable AI-Powered Translation Automation" isOptional={true}>
 
 Once Intlayer is wired up, use its CLI to fill missing translations automatically:
@@ -301,8 +283,6 @@ export default config;
 
 </Steps>
 
----
-
 ## What you can delete after migration
 
 Once the compat adapter is in place, the following `next-i18next` boilerplate can be removed:
@@ -315,8 +295,6 @@ Once the compat adapter is in place, the following `next-i18next` boilerplate ca
 
 When you are ready to go further, Intlayer **automatically discovers all `.content.ts` and `.content.json` files anywhere in your codebase** (by default, anywhere inside `./src`). You can place a `my-component.content.ts` file right next to your `MyComponent.tsx` and Intlayer will pick it up at build time with no additional configuration — no imports, no registration, no centralised index file needed. This makes co-locating translations with pages and components completely frictionless.
 
----
-
 ## Configure TypeScript
 
 Intlayer uses module augmentation to provide full TypeScript intellisense for your translation keys. Make sure your `tsconfig.json` includes the auto-generated types:
@@ -331,8 +309,6 @@ Intlayer uses module augmentation to provide full TypeScript intellisense for yo
 }
 ```
 
----
-
 ## Git Configuration
 
 Add Intlayer's generated directory to your `.gitignore`:
@@ -342,8 +318,6 @@ Add Intlayer's generated directory to your `.gitignore`:
 .intlayer
 ```
 
----
-
 ## Go Further
 
 - **Visual Editor** — Manage translations visually in your browser: [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)