@intlayer/docs 5.5.8

package/en/frequent_questions/locale_incorect_in_url.md

@@ -0,0 +1,52 @@
+# Incorrect Locale Retrieved from URL
+
+## Problem Description
+
+When trying to access the locale parameter from the URL, you might encounter an issue where the locale value is incorrect:
+
+```js
+const { locale } = await params;
+console.log(locale); // returns "about" instead of the expected locale
+```
+
+## Solution
+
+### 1. Verify File Structure
+
+Ensure your Next.js app router path follows this structure:
+
+```bash
+src/app/[locale]/about/page.tsx
+```
+
+### 2. Check Middleware Configuration
+
+The issue often occurs when the middleware is not present or not triggered. The middleware file should be located at:
+
+```bash
+src/middleware.ts
+```
+
+This middleware is responsible for rewriting routes when `prefixDefault` is set to `false`. For example, it rewrites `/en/about` into `/about`.
+
+### 3. URL Patterns Based on Configuration
+
+#### Default Configuration (`prefixDefault: false`, `noPrefix: false`)
+
+- English: `/about`
+- French: `/fr/about`
+- Spanish: `/es/about`
+
+#### With `prefixDefault: true`
+
+- English: `/en/about`
+- French: `/fr/about`
+- Spanish: `/es/about`
+
+#### With `noPrefix: true`
+
+- English: `/about`
+- French: `/about`
+- Spanish: `/about`
+
+For more details about these configuration options, see the [Configuration Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en/configuration.md).

package/en/frequent_questions/static_rendering.md

@@ -0,0 +1,24 @@
+# Static vs Dynamic Rendering with i18n in Next.js
+
+## The issue with **next-intl**
+
+- **What happens?**
+  When you use `useTranslations`, `getTranslations`, or any next-intl helper _inside a Server Component_ on an i18n-routed app (`/en/…`, `/fr/…`), Next.js marks the whole route **dynamic**. ([Next Intl][1])
+
+- **Why?**
+  next-intl looks up the current locale from a request-only header (`x-next-intl-locale`) via `headers()`. Because `headers()` is a **dynamic API**, any component that touches it loses static optimisation. ([Next Intl][1], [Next.js][2])
+
+- **Official workaround (boilerplate)**
+
+  1. Export `generateStaticParams` with every supported locale.
+  2. Call `setRequestLocale(locale)` in **every** layout/page _before_ you call `useTranslations`. ([Next Intl][1])
+     This removes the header dependency, but you now have extra code to maintain and an unstable API in production.
+
+## How **intlayer** sidesteps the problem
+
+**Design choices**
+
+1. **Route-param only** – The locale comes from the `[locale]` URL segment that Next.js already passes to every page.
+2. **Compile-time bundles** – Translations are imported as regular ES modules, so they’re tree-shaken and embedded at build-time.
+3. **No dynamic APIs** – `useT()` reads from React context, not from `headers()` or `cookies()`.
+4. **Zero extra config** – Once your pages live under `app/[locale]/`, Next.js prerenders one HTML file per locale automatically.

package/en/frequent_questions/unknown_command.md

@@ -0,0 +1,76 @@
+# error: unknown command fill / build / etc
+
+If `npx intlayer fill --verbose` gives:
+
+```
+error: unknown command 'fill'
+```
+
+but you're sure the `fill` command _should_ exist, here are the steps to resolve it:
+
+## 1. **Ensure you're using the latest version**
+
+Run:
+
+```bash
+npx intlayer --version                  # current locale intlayer version
+npx intlayer@latest --version           # current latest intlayer version
+```
+
+This forces `npx` to pull the most recent version. Then try again:
+
+```bash
+npx intlayer@latest build --verbose
+```
+
+## 2. **Check if the command is registered**
+
+You can check with:
+
+```bash
+npx intlayer --help                     # provide informations related to the commands
+```
+
+See if the command appears in the command list.
+
+Go to the repo, and confirm that your command is exported and registered in the CLI entry point. Intlayer used `commander` as framework.
+
+Code regarding the CLI:
+https://github.com/aymericzip/intlayer/blob/main/packages/%40intlayer/cli/src/cli.ts
+
+## 4. **Restart your terminal**
+
+Sometimes a terminal restart is needed to recognize new commands.
+
+## 5. **If you’re developing `intlayer`, rebuild and link it**
+
+If you're developing `intlayer` locally:
+
+```bash
+# In the intlayer directory
+npm install
+npm run build
+npm link
+```
+
+Then in another terminal:
+
+```bash
+intlayer fill --verbose
+```
+
+This uses the local version you’re working on.
+
+## 6. **Clear npx cache (if you're stuck with an older version)**
+
+```bash
+npx clear-npx-cache
+```
+
+Or manually delete cached intlayer packages:
+
+```bash
+rm -rf ~/.npm/_npx
+```
+
+Check equivalent if you use pnpm, yarn, bun or other package manager

package/en/header.md

@@ -0,0 +1,5 @@
+![Logo](https://github.com/aymericzip/intlayer/blob/main/packages/@intlayer/design-system/src/components/Logo/logo_with_text_no_frame.svg)
+
+**Internationalization Made Easy**
+
+Intlayer offers a more flexible and modern approach to internationalizing your website. The seamless integration with Next.js and React, customizable configuration, and support for various content declaration formats make it a powerful choice for internationalization.

package/en/how_works_intlayer.md

@@ -0,0 +1,219 @@
+# 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/en/vs_code_extension.md)
+- using the app plugins such as [`vite-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/vite-intlayer/index.md), or their equivalents for [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/en/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/en/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 optimize 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 pluralization, and more.
+
+> To see all the features of Intlayer, you can read the [dictionary documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en/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.
+
+If configured on your project, Intlayer will automatically manage for you the fetch 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/en/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)
+
+## App build optimization
+
+To optimize the bundle size of your application, Intlayer provides two plugins to optimize the build of your application: `@intlayer/babel` and `@intlayer/swc` plugins.
+
+In development mode, Intlayer uses a centralized static import for dictionaries to simplify the development experience.
+
+By optimizing the build, Intlayer will replace all calls of dictionaries to optimize chunking. That way the final bundle will import only the dictionaries that are used.
+
+By activating the option `activateDynamicImport` in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/en/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 `vite-intlayer` package,
+
+> `@intlayer/swc` is not installed by default on `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/en/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.
+
+### 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/packages/intlayer-cli/index.md), and the [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/en/packages/intlayer/index.md) packages.
+
+### @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 optimization 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 optimize bundling of dictionaries for Vite and Webpack based applications.
+
+### @intlayer/swc (WIP)
+
+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)

package/en/index.md

@@ -0,0 +1,139 @@
+# Intlayer Documentation
+
+Welcome to the official **Intlayer** documentation! Here, you'll find everything you need to integrate, configure, and master Intlayer for all your internationalization (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/en/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/en/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/en/configuration.md)**  
+  Customize 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/en/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/en/intlayer_visual_editor.md)**  
+  Simplify collaboration with non-developers and power your translations with AI, directly in our free, intuitive CMS.
+
+---
+
+## Core Concepts
+
+### Dictionary
+
+Organize your multilingual content close to your code to keep everything consistent and maintainable.
+
+- **[Get Started](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/get_started.md)**  
+  Learn the basics of declaring your content in Intlayer.
+
+- **[Translation](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/translation.md)**  
+  Understand how translations are generated, stored, and utilized in your application.
+
+- **[Enumeration](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/enumeration.md)**  
+  Easily manage repeated or fixed sets of data across various languages.
+
+- **[Condition](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/conditional.md)**  
+  Learn how to use conditional logic in Intlayer to create dynamic content.
+
+- **[Insertion](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/insertion.md)**
+  Discover how to insert values in a string using insertion placeholders.
+
+- **[Function Fetching](https://github.com/aymericzip/intlayer/blob/main/docs/en/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/en/dictionary/markdown.md)**  
+  Learn how to use Markdown in Intlayer to create rich content.
+
+- **[File embeddings](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/file_embeddings.md)**  
+  Discover how to embed externals files in Intlayer to use them in the content editor.
+
+- **[Nesting](https://github.com/aymericzip/intlayer/blob/main/docs/en/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/en/intlayer_with_nextjs_15.md)**
+- **[Intlayer with Next.js 14 (App Router)](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_14.md)**
+- **[Intlayer with Next.js Page Router](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_page_router.md)**
+- **[Intlayer with React CRA](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_create_react_app.md)**
+- **[Intlayer with Vite + React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md)**
+- **[Intlayer with React Native and Expo](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react_native+expo.md)**
+- **[Intlayer with Lynx and React](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_lynx+react.md)**
+- **[Intlayer with Express](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_express.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.
+
+---
+
+## Packages
+
+Intlayer’s modular design offers dedicated packages for specific environments and needs:
+
+### `intlayer`
+
+Core utility functions to configure and manage your i18n setup.
+
+- **[getConfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getConfiguration.md)**
+- **[getHTMLTextDir](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getHTMLTextDir.md)**
+- **[getLocaleLang](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocaleLang.md)**
+- **[getLocaleName](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocaleName.md)**
+- **[getLocalizedUrl](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocalizedUrl.md)**
+- **[getMultilingualUrls](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getMultilingualUrls.md)**
+- **[getPathWithoutLocale](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getPathWithoutLocale.md)**
+- **[getTranslation](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getTranslation.md)**
+- **[getEnumeration](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getEnumeration.md)**
+
+### `express-intlayer`
+
+Leverage Intlayer within **Express**-based apps:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/en/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/en/packages/react-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useLocale.md)**
+
+### `next-intlayer`
+
+Seamlessly integrate with **Next.js**:
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/next-intlayer/useLocale.md)**
+
+---
+
+## Additional Resources
+
+- **[Blog: Intlayer and i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/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).
+
+**Ready to translate your application faster and more efficiently?** Dive into our docs to start using Intlayer today. Experience a robust, streamlined approach to internationalization that keeps your content organized and your team more productive.

package/en/interest_of_intlayer.md

@@ -0,0 +1,133 @@
+# Intlayer: A tailored way to translate your website
+
+**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** make 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: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+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**                 | Leverage 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 quickly with minimal configuration, especially optimized 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.                                                                                                                                                                                                                                                                                                                                                            |
+| **Organized Codebase**                    | Keep your codebase more organized: 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/en/mcp_server.md).                                                                                                                                                                                         |
+| **Markdown Support**                      | Import and interpret markdown files for multilingual content like privacy policies.                                                                                                                                                                                                                                                                                                                                                                     |
+| **Free Visual Editor & CMS**              | A free visual editor and CMS are available if you need to work with content writers for your translations, again removing the need for a localization platform and allowing content externalization 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, no need to pass your `t` function across each server component.                                                                                                                                                                                                                                                                                                                          |
+| **Tree-shakable Content**                 | The content is tree-shakable, which lightens the final bundle.                                                                                                                                                                                                                                                                                                                                                                                          |
+| **Non-blocking Static Rendering**         | Intlayer doesn't block Static Rendering as `next-intl` does.                                                                                                                                                                                                                                                                                                                                                                                            |
+| **Interoperability**                      | Allow interoperability with [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_next-intl.md), and [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react-intl.md). |