@intlayer/docs 5.5.9 → 5.5.11

package/docs/en-GB/how_works_intlayer.md

@@ -0,0 +1,267 @@
+---
+createdAt: 2024-08-12
+updatedAt: 2025-06-29
+title: How Intlayer Works
+description: Learn how Intlayer operates internally. Understand the architecture and components that make Intlayer powerful.
+keywords:
+  - Intlayer
+  - How it works
+  - Architecture
+  - Components
+  - Internal workings
+slugs:
+  - doc
+  - concept
+  - how-works-intlayer
+---
+
+# How Intlayer Works
+
+## Overview
+
+The main idea behind Intlayer is to adopt a per-component content management. So the idea behind Intlayer is to allow you to declare your content anywhere in your codebase, as in the same directory as your component.
+
+```bash
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+To do that, the role of Intlayer is to find all your `content declaration files`, in all different formats present in your project, and then it will generate the `dictionaries` from them.
+
+So there are two main steps:
+
+- Build step
+- Interpretation step
+
+### Build of dictionaries step
+
+The build step can be done in three ways:
+
+- using the CLI with `npx intlayer build`
+- using [vscode extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/vs_code_extension.md)
+- using the app plugins such as [`vite-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/vite-intlayer/index.md), or their equivalents for [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/next-intlayer/index.md). When you use one of those plugins, Intlayer will automatically build your dictionaries when you start (dev) or build (prod) your application.
+
+1. Declaration of content files
+
+   - Content files can be defined in various formats, such as TypeScript, ECMAScript, CommonJS, or JSON.
+   - Content files can be defined everywhere in the project, which allows for better maintenance and scalability. It is important to respect the file extension conventions for content files. This extension is by default `*.content.{js|cjs|mjs|ts|tsx|json}`, but it can be modified in the [configuration file](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
+
+2. Generation of `dictionaries`
+
+   - Dictionaries are generated from content files. By default, Intlayer dictionaries are generated in the `.intlayer/dictionaries` directory of the project.
+   - Those dictionaries are generated in different formats to match all needs and optimise the performance of the application.
+
+3. Generation of dictionary types
+   Based on your `dictionaries`, Intlayer will generate types to make them usable in your application.
+
+- Dictionary types are generated from Intlayer `content declaration files`. By default, Intlayer dictionary types are generated in the `.intlayer/types` directory of the project.
+
+- Intlayer [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) is a TypeScript feature that allows you to define additional types for Intlayer. This makes the development experience easier by suggesting available arguments or required arguments.
+  Among the types generated, Intlayer dictionary types or even language configuration types are added to the `types/intlayer.d.ts` file, and used by other packages. To do this, it is necessary that the `tsconfig.json` file is configured to include the `types` directory of the project.
+
+### Interpretation of dictionaries step
+
+Using Intlayer, you will access your content in your application using the `useIntlayer` hook.
+
+```tsx
+const MyComponent = () => {
+  const content = useIntlayer("my-component");
+  return <div>{content.title}</div>;
+};
+```
+
+This hook will manage the locale detection for you and will return the content for the current locale. Using this hook, you will also be able to interpret markdown, manage pluralisation, and more.
+
+> To see all the features of Intlayer, you can read the [dictionary documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/get_started.md).
+
+## Distant content
+
+Intlayer allows you to declare content locally, and then export them to the CMS to make it editable by your non-technical team.
+
+So you will be able to push and pull content from the CMS to your application, in a similar way to what you do with Git for your code.
+
+For externalised dictionaries using the CMS, Intlayer performs a basic fetch operation to retrieve distant dictionaries and merges them with your local ones. If configured on your project, Intlayer will automatically manage the fetching of the content from the CMS when the application starts (dev) / builds (prod).
+
+## Visual editor
+
+Intlayer also provides a visual editor to allow you to edit your content in a visual way. This [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) is available in the external `intlayer-editor` package.
+
+![visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
+
+- The server is a simple Express application that listens to requests from the client and retrieves the content of your application, such as the `dictionaries` and the configuration to make it accessible on the client side.
+- On the other hand, the client is a React application that is used to interact with your content using a visual interface.
+  When you call your content using `useIntlayer` and the editor is enabled, it automatically wraps your strings with a Proxy object named `IntlayerNode`. This node uses `window.sendMessage` to communicate with a wrapped iframe containing the visual editor interface.  
+  On the editor side, the editor listens to these messages and simulates real interaction with your content, allowing you to edit text directly in your application's context.
+
+## App build optimisation
+
+To optimise the bundle size of your application, Intlayer provides two plugins to optimise the build of your application: `@intlayer/babel` and `@intlayer/swc` plugins.  
+The Babel and SWC plugins work by analysing your application's Abstract Syntax Tree (AST) to replace calls of Intlayer functions with optimised code. This process makes your final bundle lighter in production by ensuring that only the dictionaries that are actually used are imported, optimising chunking and reducing bundle size.
+
+In development mode, Intlayer uses a centralised static import for dictionaries to simplify the development experience.
+
+By activating the option `activateDynamicImport` in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md), Intlayer will use the dynamic import to load the dictionaries. This option is disabled by default to avoid async processing when rendering the application.
+
+> `@intlayer/babel` is available by default on the `vite-intlayer` package,
+
+> `@intlayer/swc` is not installed by default on the `next-intlayer` package as SWC plugins are still experimental on Next.js.
+
+To see how to configure the build of your application, you can read the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
+
+## Packages
+
+Intlayer is composed of several packages, each with a specific role in the translation process. Here is a graphical representation of the structure of this package:
+
+![packages of intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)
+
+### intlayer
+
+The `intlayer` package is used in applications to declare content in content files.
+
+### react-intlayer
+
+The `react-intlayer` package is used to interpret Intlayer dictionaries and make them usable in React applications.
+
+### next-intlayer
+
+The `next-intlayer` package is used as a layer on top of `react-intlayer` to make Intlayer dictionaries usable in Next.js applications. It integrates essential features to make Intlayer work in a Next.js environment, such as translation middleware, routing, or the `next.config.js` file configuration.
+
+### vue-intlayer
+
+The `vue-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Vue applications.
+
+### nuxt-intlayer
+
+The `nuxt-intlayer` package is a Nuxt module to make Intlayer dictionaries usable in Nuxt applications. It integrates essential features to make Intlayer work in a Nuxt environment, such as translation middleware, routing, or the `nuxt.config.js` file configuration.
+
+### svelte-intlayer (WIP)
+
+The `svelte-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Svelte applications.
+
+### solid-intlayer (WIP)
+
+The `solid-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Solid.js applications.
+
+### preact-intlayer
+
+The `preact-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Preact applications.
+
+### angular-intlayer (WIP)
+
+The `angular-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Angular applications.
+
+### express-intlayer
+
+The `express-intlayer` package is used to use Intlayer on an Express.js backend.
+
+### react-native-intlayer
+
+The `react-native-intlayer` package provides tools that integrate plugins for Intlayer to work with the Metro bundler.
+
+### lynx-intlayer
+
+The `lynx-intlayer` package provides tools that integrate plugins for Intlayer to work with the Lynx bundler.
+
+### vite-intlayer
+
+Includes the Vite plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
+
+### react-scripts-intlayer
+
+Includes the `react-scripts-intlayer` commands and plugins for integrating Intlayer with the Create React App based application. These plugins are based on [craco](https://craco.js.org/) and include additional configuration for the [Webpack](https://webpack.js.org/) bundler.
+
+### intlayer-editor
+
+The `intlayer-editor` package is used to allow the use of the visual editor. This package, optional, can be installed in applications and will be used by the `react-intlayer` package.
+It consists of two parts: the server and the client.
+
+The client contains UI elements that will be used by `react-intlayer`.
+
+The server, based on Express, is used to receive the visual editor requests and manage or modify content files.
+
+### intlayer-cli
+
+The `intlayer-cli` package can be used to generate dictionaries using the `npx intlayer dictionaries build` command. If `intlayer` is already installed, the CLI is automatically installed and this package is not necessary.
+
+### @intlayer/core
+
+The `@intlayer/core` package is the master Intlayer package. It contains translation and dictionary management functions. `@intlayer/core` is multiplatform and is used by other packages to perform interpretation of dictionaries.
+
+### @intlayer/config
+
+The `@intlayer/config` package is used to configure Intlayer settings, such as available languages, Next.js middleware parameters, or the integrated editor settings.
+
+### @intlayer/webpack
+
+The `@intlayer/webpack` package is used to provide a Webpack configuration to make a Webpack-based application work with Intlayer. The package also provides a plugin to add to an existing Webpack application.
+
+### @intlayer/cli
+
+The `@intlayer/cli` package is an NPM package that is used to declare the scripts related to the Intlayer command line interfaces. It ensures the uniformity of all Intlayer CLI commands. This package is notably consumed by the [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/en-GB/packages/intlayer-cli/index.md), and the [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/en-GB/packages/intlayer/index.md) packages.
+
+### @intlayer/mcp
+
+The `@intlayer/mcp` package provides an MCP (Model Context Protocol) server that delivers AI-powered IDE assistance tailored for the Intlayer ecosystem. It automatically loads documentation and integrates with the Intlayer CLI.
+
+### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
+
+The `@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` and `@intlayer/dynamic-dictionaries-entry` packages return the entry path of the Intlayer dictionaries. Since searching the filesystem from the browser is impossible, using bundlers like Webpack or Rollup to retrieve the entry path of the dictionaries is not possible. These packages are designed to be aliased, allowing for bundling optimisation across various bundlers such as Vite, Webpack, and Turbopack.
+
+### @intlayer/chokidar
+
+The `@intlayer/chokidar` package is used to monitor content files and regenerate the modified dictionary at each modification.
+
+### @intlayer/editor
+
+The `@intlayer/editor` package provides the utilities related to the dictionary editor. It notably includes the API to interface an application with the Intlayer editor, and utilities to manipulate dictionaries. This package is cross-platform.
+
+### @intlayer/editor-react
+
+The `@intlayer/editor-react` package provides states, contexts, hooks and components to interface a React application with the Intlayer editor.
+
+### @intlayer/babel
+
+The `@intlayer/babel` package provides tools that optimise bundling of dictionaries for Vite and Webpack based applications.
+
+### @intlayer/swc
+
+The `@intlayer/swc` package provides tools that optimise bundling of dictionaries for Next.js applications.
+
+### @intlayer/api
+
+The `@intlayer/api` package is an API SDK to interact with the backend.
+
+### @intlayer/editor-react
+
+The `@intlayer/editor-react` package provides states, contexts, hooks and components to interface a React application with the Intlayer editor.
+
+### @intlayer/babel
+
+The `@intlayer/babel` package provides tools that optimize bundling of dictionaries for Vite and Webpack based applications.
+
+### @intlayer/swc
+
+The `@intlayer/swc` package provides tools that optimize bundling of dictionaries for Next.js applications.
+
+### @intlayer/api
+
+The `@intlayer/api` package is an API SDK to interact with the backend.
+
+### @intlayer/design-system
+
+The `@intlayer/design-system` package is used to share design elements between the CMS and Visual editor.
+
+### @intlayer/backend
+
+The `@intlayer/backend` package exports backend types and will eventually offer the backend as a standalone package in the future.
+
+## Chat with our smart documentation
+
+- [Ask your questions to our smart documentation](https://intlayer.org/doc/chat)
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/index.md

@@ -0,0 +1,163 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Intlayer Documentation - Complete i18n Guide for JavaScript
+description: Complete documentation for Intlayer, the modern internationalisation library for JavaScript, React, Next.js, Express, and more frameworks.
+keywords:
+  - intlayer
+  - internationalisation
+  - i18n
+  - JavaScript
+  - React
+  - Next.js
+  - documentation
+  - translation
+  - multilingual
+slugs:
+  - doc
+  - index
+---
+
+# Intlayer Documentation
+
+Welcome to the official **Intlayer** documentation! Here, you'll find everything you need to integrate, configure, and master Intlayer for all your internationalisation (i18n) needs, whether you’re working with **Next.js**, **React**, **Vite**, **Express**, or another JavaScript environment.
+
+Intlayer offers a flexible, modern approach to translating your application. Our docs will guide you from installation and setup through advanced features like **AI-powered translation**, **TypeScript** definitions, and **server component** support, empowering you to create a seamless, multilingual experience.
+
+---
+
+## Getting Started
+
+- **[Introduction](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/introduction.md)**  
+  Get an overview of how Intlayer works, its core features, and why it’s a game-changer for i18n.
+
+- **[How Intlayer Works](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/how_works_intlayer.md)**  
+  Dive into the architectural design and learn how Intlayer handles everything from content declaration to translation delivery.
+
+- **[Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md)**  
+  Customise Intlayer to suit your project’s needs. Explore middleware options, directory structures, and advanced settings.
+
+- **[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md)**  
+  Manage content and translations using our command-line tool. Discover how to push and pull content, automate translations, and more.
+
+- **[Intlayer Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)**  
+  Simplify collaboration with non-developers and power your translations with AI, directly in our free, intuitive CMS.
+
+---
+
+## Core Concepts
+
+### Dictionary
+
+Organise your multilingual content close to your code to keep everything consistent and maintainable.
+
+- **[Get Started](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/get_started.md)**  
+  Learn the basics of declaring your content in Intlayer.
+
+- **[Translation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/translation.md)**  
+  Understand how translations are generated, stored, and utilised in your application.
+
+- **[Enumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/enumeration.md)**  
+  Easily manage repeated or fixed sets of data across various languages.
+
+- **[Condition](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/conditional.md)**  
+  Learn how to use conditional logic in Intlayer to create dynamic content.
+
+- **[Insertion](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/insertion.md)**
+  Discover how to insert values in a string using insertion placeholders.
+
+- **[Function Fetching](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/function_fetching.md)**  
+  See how to dynamically fetch content with custom logic to match your project’s workflow.
+
+- **[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/markdown.md)**  
+  Learn how to use Markdown in Intlayer to create rich content.
+
+- **[File embeddings](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/file_embeddings.md)**  
+  Discover how to embed external files in Intlayer to use them in the content editor.
+
+- **[Nesting](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/nesting.md)**  
+  Understand how to nest content in Intlayer to create complex structures.
+
+---
+
+## Environments & Integrations
+
+We’ve built Intlayer with flexibility in mind, offering seamless integration across popular frameworks and build tools:
+
+- **[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 Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_vite+react.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 Express](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_express.md)**
+
+Each integration guide includes best practices for using Intlayer’s features, such as **server-side rendering**, **dynamic routing**, or **client-side rendering**, enabling you to maintain a fast, SEO-friendly, and highly scalable application.
+
+---
+
+## Packages
+
+Intlayer’s modular design offers dedicated packages for specific environments and requirements:
+
+### `intlayer`
+
+Core utility functions to configure and manage your i18n setup.
+
+- **[getConfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getConfiguration.md)**
+- **[getHTMLTextDir](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getHTMLTextDir.md)**
+- **[getLocaleLang](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getLocaleLang.md)**
+- **[getLocaleName](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getLocaleName.md)**
+- **[getLocalizedUrl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getLocalizedUrl.md)**
+- **[getMultilingualUrls](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getMultilingualUrls.md)**
+- **[getPathWithoutLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getPathWithoutLocale.md)**
+- **[getTranslation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getTranslation.md)**
+- **[getEnumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/intlayer/getEnumeration.md)**
+
+### `express-intlayer`
+
+Leverage Intlayer within **Express**-based apps:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/express-intlayer/t.md)**  
+  A minimal, straightforward translation helper for your server routes and views.
+
+### `react-intlayer`
+
+Enhance your **React** applications with powerful hooks:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md)**
+
+### `next-intlayer`
+
+Seamlessly integrate with **Next.js**:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/next-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/next-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/next-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/next-intlayer/useLocale.md)**
+
+---
+
+## Additional Resources
+
+- **[Blog: Intlayer and i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_i18next.md)**  
+  Learn how Intlayer complements and compares with the popular **i18next** library.
+
+- **[Live Tutorial on YouTube](https://youtu.be/W2G7KxuSD4c?si=GyU_KpVhr61razRw)**  
+  Watch a comprehensive demo and learn how to integrate Intlayer in real time.
+
+---
+
+## Contributing & Feedback
+
+We value the power of open-source and community-driven development. If you’d like to propose improvements, add a new guide, or correct any issues in our docs, feel free to submit a Pull Request or open an issue on our [GitHub repository](https://github.com/aymericzip/intlayer/blob/main/docs/docs).
+
+**Ready to translate your application faster and more efficiently?** Dive into our docs to start using Intlayer today. Experience a robust, streamlined approach to internationalisation that keeps your content organised and your team more productive.
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Init history

package/docs/en-GB/interest_of_intlayer.md

@@ -0,0 +1,163 @@
+---
+createdAt: 2024-08-14
+updatedAt: 2025-06-29
+title: Interest of Intlayer
+description: Discover the benefits and advantages of using Intlayer in your projects. Understand why Intlayer stands out among other frameworks.
+keywords:
+  - Benefits
+  - Advantages
+  - Intlayer
+  - Framework
+  - Comparison
+slugs:
+  - doc
+  - concept
+  - interest
+---
+
+# Intlayer: A tailored way to translate your website
+
+**Intlayer** is an internationalisation library designed specifically for JavaScript developers. It allows the declaration of your content everywhere in your code. It converts declarations of multilingual content into structured dictionaries to integrate easily into your code. Using TypeScript, **Intlayer** makes your development stronger and more efficient.
+
+## Example of usage
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+```bash codeFormat="esm"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.mjs
+        └── index.js
+```
+
+```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      "en-GB": "Hello World",
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+// Export the content dictionary for the component
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// Define the content dictionary for the component
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      "en-GB": "Hello World",
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+// Export the content dictionary for the component
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// Define the content dictionary for the component
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      "en-GB": "Hello World",
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+// Export the content dictionary for the component
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+// Component that uses the Intlayer hook to retrieve translated content
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+## Why Choose Intlayer?
+
+| Feature                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **JavaScript-Powered Content Management** | Harness the flexibility of JavaScript to define and manage your content efficiently.                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **Type-Safe Environment**                 | Utilise TypeScript to ensure all your content definitions are precise and error-free.                                                                                                                                                                                                                                                                                                                                                                                                    |
+| **Integrated Content Files**              | Keep your translations close to their respective components, enhancing maintainability and clarity.                                                                                                                                                                                                                                                                                                                                                                                      |
+| **Simplified Setup**                      | Get up and running swiftly with minimal configuration, especially optimised for Next.js projects.                                                                                                                                                                                                                                                                                                                                                                                        |
+| **Server Component Support**              | Perfectly suited for Next.js server components, ensuring smooth server-side rendering.                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Enhanced Routing**                      | Full support for Next.js app routing, adapting seamlessly to complex application structures.                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Organised Codebase**                    | Keep your codebase more organised: 1 component = 1 dictionary in the same folder.                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **CI Auto-translation**                   | Autofill your translations in your CI using your own OpenAI API key, eliminating the need for an L10n platform.                                                                                                                                                                                                                                                                                                                                                                          |
+| **MCP Server Integration**                | Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. [Learn more](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/mcp_server.md).                                                                                                                                                                                                                  |
+| **Markdown Support**                      | Import and interpret markdown files for multilingual content such as privacy policies.                                                                                                                                                                                                                                                                                                                                                                                                   |
+| **Free Visual Editor & CMS**              | A free visual editor and CMS are available if you need to collaborate with content writers for your translations, once again removing the need for a localisation platform and allowing content externalisation from the codebase.                                                                                                                                                                                                                                                       |
+| **Simplified Content Retrieval**          | No need to call your `t` function for each piece of content; retrieve all your content directly using a single hook.                                                                                                                                                                                                                                                                                                                                                                     |
+| **Consistent Implementation**             | The same implementation for both client and server components, with no need to pass your `t` function through each server component.                                                                                                                                                                                                                                                                                                                                                     |
+| **Tree-shakable Content**                 | The content is tree-shakable, which reduces the size of the final bundle.                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **Non-blocking Static Rendering**         | Intlayer doesn't block Static Rendering as `next-intl` does.                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **Interoperability**                      | Allows interoperability with [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_next-intl.md), and [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_react-intl.md). |
+
+## Doc History
+
+- 5.5.10 - 2025-06-29: Initial history