@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/en-GB/intlayer_with_astro_react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: Astro + React i18n - How to translate an Astro + React application in 2026
-description: Learn how to add internationalisation (i18n) to your Astro + React site with Intlayer. Follow this guide to make your site multilingual.
+updatedAt: 2026-05-31
+title: "Astro + React i18n - Complete guide to translate your app"
+description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + React app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
   - internationalisation
   - documentation
@@ -61,16 +61,54 @@ history:
 
 <TOC/>
 
-## What is Intlayer?
+## Why Intlayer over alternatives?
 
-**Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications.
+Compared to main solutions like `astro-i18n` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:
 
-With Intlayer, you can:
+<AccordionGroup>
 
-- **Manage translations easily**: Using declarative dictionaries at the component level.
-- **Localise metadata, routes and content dynamically**.
-- **Ensure TypeScript support**: With autogenerated types for better autocompletion and error detection.
-- **Benefit from advanced features**: Such as dynamic language detection and switching.
+<Accordion header="Full Astro coverage">
+
+Intlayer is optimized to work perfectly with Astro by offering **multilingual routing**, **sitemap**, and all the features needed for scaling internationalization (i18n).
+
+</Accordion>
+
+<Accordion header="Bundle size">
+
+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/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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/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 optimizes 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/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -78,7 +116,9 @@ With Intlayer, you can:
 
 Check out the [application template](https://github.com/aymericzip/intlayer-astro-template) on GitHub.
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using your preferred package manager:
 
@@ -121,7 +161,9 @@ bun x intlayer init
 - **@astrojs/react**
   Official Astro integration that allows the use of React component islands.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file to define your application's languages:
 
@@ -146,7 +188,9 @@ export default config;
 
 > Through this configuration file, you can configure localised URLs, middleware redirects, cookie names, location and extensions of content declarations, disable Intlayer logs in the console, and more. For a full list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
 
-### Step 3: Integrate Intlayer into Your Astro Configuration
+</Step>
+
+<Step number={3} title="Integrate Intlayer into Your Astro Configuration">
 
 Add the `intlayer` plugin and React integration to your Astro configuration.
 
@@ -167,7 +211,9 @@ export default defineConfig({
 
 > The `react()` integration allows for using React component islands via `client:only="react"`.
 
-### Step 4: Declare Your Content
+</Step>
+
+<Step number={4} title="Declare Your Content">
 
 Create and manage your content declarations to store translations:
 
@@ -194,7 +240,9 @@ export default appContent;
 
 > For more information, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md).
 
-### Step 5: Using Content in Astro
+</Step>
+
+<Step number={5} title="Using Content in Astro">
 
 You can consume the dictionaries directly in your `.astro` files using the core helpers exported from `intlayer`. You should also add SEO metadata (such as hreflang and canonical links) to every page and introduce a React island for interactive client-side content.
 
@@ -282,7 +330,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** all URLs get a language prefix. You can use standard `[locale]` if you don't need to handle the root separately.
 > - **`search-param` or `no-prefix`:** no language directories are needed. The language is handled via query parameters or cookies.
 
-### Step 6: Create a React Island Component
+</Step>
+
+<Step number={6} title="Create a React Island Component">
 
 Create an island component that wraps your React application and receives the server-detected locale:
 
@@ -314,7 +364,9 @@ export function ReactIsland({ locale }: { locale: LocalesValues }) {
 
 > The `locale` prop is passed from the Astro page (server detection) to `IntlayerProvider`, making it the initial language for all React hooks within the tree.
 
-### Step 7: Add a Language Switcher
+</Step>
+
+<Step number={7} title="Add a Language Switcher">
 
 Create a React `LocaleSwitcher` component that reads available languages and navigates to the localised URL when a user selects a new language:
 
@@ -363,7 +415,9 @@ export function LocaleSwitcher() {
 
 > The `LocaleSwitcher` must be rendered within `IntlayerProvider` - use it in your island component (as shown in step 6).
 
-### Step 8: Sitemap and Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap and Robots.txt">
 
 Intlayer offers utilities to dynamically create your localised sitemap and robots.txt files.
 
@@ -423,55 +477,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScript Configuration
-
-Intlayer uses module augmentation to leverage TypeScript, making your codebase more robust.
+</Step>
 
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Ensure your TypeScript configuration includes the autogenerated types.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... your existing TypeScript configuration
-  "include": [
-    // ... your existing TypeScript configuration
-    ".intlayer/**/*.ts", // Include autogenerated types
-  ],
-}
-```
-
-### Git Configuration
-
-It is recommended to ignore the files generated by Intlayer. This avoids committing them to your Git repository.
-
-To do this, add the following instructions to your `.gitignore` file:
-
-```bash
-# Ignore the files generated by Intlayer
-.intlayer
-```
-
-### VS Code Extension
-
-To improve your development experience with Intlayer, you can install the **official Intlayer VS Code extension**.
-
-[Installation 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 preview** of translated content.
-- **Quick actions** for easily creating and updating translations.
-
-For more information on using the extension, refer to the [VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### (Optional) Step 15: Extract the content of your components
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -573,6 +581,58 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### TypeScript Configuration
+
+Intlayer uses module augmentation to leverage TypeScript, making your codebase more robust.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Ensure your TypeScript configuration includes the autogenerated types.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... your existing TypeScript configuration
+  "include": [
+    // ... your existing TypeScript configuration
+    ".intlayer/**/*.ts", // Include autogenerated types
+  ],
+}
+```
+
+### Git Configuration
+
+It is recommended to ignore the files generated by Intlayer. This avoids committing them to your Git repository.
+
+To do this, add the following instructions to your `.gitignore` file:
+
+```bash
+# Ignore the files generated by Intlayer
+.intlayer
+```
+
+### VS Code Extension
+
+To improve your development experience with Intlayer, you can install the **official Intlayer VS Code extension**.
+
+[Installation 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 preview** of translated content.
+- **Quick actions** for easily creating and updating translations.
+
+For more information on using the extension, refer to the [VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
+
+---
+
 ### Deepen Your Knowledge
 
 If you want to learn more, you can also implement the [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/intlayer_visual_editor.md) or use the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/intlayer_CMS.md) to externalise your content.

package/docs/en-GB/intlayer_with_astro_solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Solid i18n - How to translate an Astro + Solid application in 2026
-description: Learn how to add internationalisation (i18n) to your Astro + Solid site with Intlayer. Follow this guide to make your site multilingual.
+updatedAt: 2026-05-31
+title: "Astro + Solid i18n - Complete guide to translate your app"
+description: "No more i18next. The 2026 guide to building a multilingual (i18n) Astro + Solid app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
   - internationalisation
   - documentation
@@ -58,16 +58,54 @@ history:
 
 <TOC/>
 
-## What is Intlayer?
+## Why Intlayer over alternatives?
 
-**Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications.
+Compared to main solutions like `astro-i18n` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:
 
-With Intlayer, you can:
+<AccordionGroup>
 
-- **Manage translations easily**: Using declarative dictionaries at the component level.
-- **Localise metadata, routes and content dynamically**.
-- **Ensure TypeScript support**: With autogenerated types for better autocompletion and error detection.
-- **Benefit from advanced features**: Such as dynamic language detection and switching.
+<Accordion header="Full Astro coverage">
+
+Intlayer is optimized to work perfectly with Astro by offering **multilingual routing**, **sitemap**, and all the features needed for scaling internationalization (i18n).
+
+</Accordion>
+
+<Accordion header="Bundle size">
+
+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/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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/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 optimizes 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/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -75,7 +113,9 @@ With Intlayer, you can:
 
 Check out the [application template](https://github.com/aymericzip/intlayer-astro-template) on GitHub.
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using your preferred package manager:
 
@@ -118,7 +158,9 @@ bun x intlayer init
 - **@astrojs/solid-js**
   Official Astro integration that allows the use of Solid component islands.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file to define your application's languages:
 
@@ -143,7 +185,9 @@ export default config;
 
 > Through this configuration file, you can configure localised URLs, middleware redirects, cookie names, location and extensions of content declarations, disable Intlayer logs in the console, and more. For a full list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
 
-### Step 3: Integrate Intlayer into Your Astro Configuration
+</Step>
+
+<Step number={3} title="Integrate Intlayer into Your Astro Configuration">
 
 Add the `intlayer` plugin and Solid integration to your Astro configuration.
 
@@ -164,7 +208,9 @@ export default defineConfig({
 
 > The `solid()` integration allows for using Solid component islands via `client:only="solid-js"`.
 
-### Step 4: Declare Your Content
+</Step>
+
+<Step number={4} title="Declare Your Content">
 
 Create and manage your content declarations to store translations:
 
@@ -190,7 +236,9 @@ export default appContent;
 
 > For more information, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md).
 
-### Step 5: Using Content in Astro
+</Step>
+
+<Step number={5} title="Using Content in Astro">
 
 You can consume the dictionaries directly in your `.astro` files using the core helpers exported from `intlayer`. You should also add SEO metadata (such as hreflang and canonical links) to every page and introduce a Solid island for interactive client-side content.
 
@@ -278,7 +326,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** all URLs get a language prefix. You can use standard `[locale]` if you don't need to handle the root separately.
 > - **`search-param` or `no-prefix`:** no language directories are needed. The language is handled via query parameters or cookies.
 
-### Step 6: Create a Solid Island Component
+</Step>
+
+<Step number={6} title="Create a Solid Island Component">
 
 Create an island component that wraps your Solid application and receives the server-detected locale:
 
@@ -312,7 +362,9 @@ export function SolidIsland({ locale }: { locale: LocalesValues }) {
 
 > In Solid, `useIntlayer` returns an **accessor** function (e.g. `content.). You must invoke it to access the reactive content.
 
-### Step 7: Add a Language Switcher
+</Step>
+
+<Step number={7} title="Add a Language Switcher">
 
 Create a Solid `LocaleSwitcher` component that reads available languages and navigates to the localised URL when a user selects a new language:
 
@@ -363,7 +415,9 @@ export function LocaleSwitcher() {
 
 > The `LocaleSwitcher` must be rendered within `IntlayerProvider` - use it in your island component (as shown in step 6).
 
-### Step 8: Sitemap and Robots.txt
+</Step>
+
+<Step number={8} title="Sitemap and Robots.txt">
 
 Intlayer offers utilities to dynamically create your localised sitemap and robots.txt files.
 
@@ -423,55 +477,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### TypeScript Configuration
-
-Intlayer uses module augmentation to leverage TypeScript, making your codebase more robust.
+</Step>
 
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Ensure your TypeScript configuration includes the autogenerated types.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... your existing TypeScript configuration
-  "include": [
-    // ... your existing TypeScript configuration
-    ".intlayer/**/*.ts", // Include autogenerated types
-  ],
-}
-```
-
-### Git Configuration
-
-It is recommended to ignore the files generated by Intlayer. This avoids committing them to your Git repository.
-
-To do this, add the following instructions to your `.gitignore` file:
-
-```bash
-# Ignore the files generated by Intlayer
-.intlayer
-```
-
-### VS Code Extension
-
-To improve your development experience with Intlayer, you can install the **official Intlayer VS Code extension**.
-
-[Installation 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 preview** of translated content.
-- **Quick actions** for easily creating and updating translations.
-
-For more information on using the extension, refer to the [VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### (Optional) Step 15: Extract the content of your components
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -573,6 +581,58 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### TypeScript Configuration
+
+Intlayer uses module augmentation to leverage TypeScript, making your codebase more robust.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+Ensure your TypeScript configuration includes the autogenerated types.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... your existing TypeScript configuration
+  "include": [
+    // ... your existing TypeScript configuration
+    ".intlayer/**/*.ts", // Include autogenerated types
+  ],
+}
+```
+
+### Git Configuration
+
+It is recommended to ignore the files generated by Intlayer. This avoids committing them to your Git repository.
+
+To do this, add the following instructions to your `.gitignore` file:
+
+```bash
+# Ignore the files generated by Intlayer
+.intlayer
+```
+
+### VS Code Extension
+
+To improve your development experience with Intlayer, you can install the **official Intlayer VS Code extension**.
+
+[Installation 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 preview** of translated content.
+- **Quick actions** for easily creating and updating translations.
+
+For more information on using the extension, refer to the [VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
+
+---
+
 ### Deepen Your Knowledge
 
 If you want to learn more, you can also implement the [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) or use the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md) to externalise your content.