@intlayer/docs 5.8.0-canary.0 → 5.8.0

package/docs/en/formatters.md

@@ -13,6 +13,7 @@ keywords:
   - Relative Time
   - Units
   - Compact
+  - List
   - Internationalization
 slugs:
   - doc
@@ -37,6 +38,18 @@ import {
   relativeTime,
   units,
   compact,
+  list,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
 } from "intlayer";
 ```
 
@@ -44,7 +57,7 @@ If you are using React, hooks are also available; see `react-intlayer/format`.
 
 ## Cached Intl
 
-The exported `Intl` is a thin, cached wrapper around the global `Intl`. It memoizes instances of `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, which avoids rebuilding the same formatter repeatedly.
+The exported `Intl` is a thin, cached wrapper around the global `Intl`. It memoizes instances of `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, and `PluralRules`, which avoids rebuilding the same formatter repeatedly.
 
 Because formatter construction is relatively expensive, this caching improves performance without changing behavior. The wrapper exposes the same API as the native `Intl`, so usage is identical.
 
@@ -52,18 +65,268 @@ Because formatter construction is relatively expensive, this caching improves pe
 
 > If `Intl.DisplayNames` is not available in the environment, a single dev-only warning is printed (consider a polyfill).
 
-Example:
+Examples:
 
 ```ts
 import { Intl } from "intlayer";
 
+// Number formatting
 const numberFormat = new Intl.NumberFormat("en-GB", {
   style: "currency",
   currency: "GBP",
 });
 numberFormat.format(1234.5); // "£1,234.50"
+
+// Display names for languages, regions, etc.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Collation for sorting
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (equal)
+
+// Plural rules
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
+## Additional Intl Utilities
+
+Beyond the formatter helpers, you can also use the cached Intl wrapper directly for other Intl features:
+
+### `Intl.DisplayNames`
+
+For localized names of languages, regions, currencies, and scripts:
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
+
+### `Intl.Collator`
+
+For locale-aware string comparison and sorting:
+
+```ts
+import { Intl } from "intlayer";
+
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
+```
+
+### `Intl.PluralRules`
+
+For determining plural forms in different locales:
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Locale Utilities
+
+### `getLocaleName(displayLocale, targetLocale?)`
+
+Gets the localized name of a locale in another locale:
+
+```ts
+import { getLocaleName } from "intlayer";
+
+getLocaleName("fr", "en"); // "French"
+getLocaleName("en", "fr"); // "anglais"
+getLocaleName("de", "es"); // "alemán"
+```
+
+- **displayLocale**: The locale to get the name for
+- **targetLocale**: The locale to display the name in (defaults to displayLocale)
+
+### `getLocaleLang(locale?)`
+
+Extracts the language code from a locale string:
+
+```ts
+import { getLocaleLang } from "intlayer";
+
+getLocaleLang("en-US"); // "en"
+getLocaleLang("fr-CA"); // "fr"
+getLocaleLang("de"); // "de"
+```
+
+- **locale**: The locale to extract the language from (defaults to current locale)
+
+### `getLocaleFromPath(inputUrl)`
+
+Extracts the locale segment from a URL or pathname:
+
+```ts
+import { getLocaleFromPath } from "intlayer";
+
+getLocaleFromPath("/en/dashboard"); // "en"
+getLocaleFromPath("/fr/dashboard"); // "fr"
+getLocaleFromPath("/dashboard"); // "en" (default locale)
+getLocaleFromPath("https://example.com/es/about"); // "es"
+```
+
+- **inputUrl**: The complete URL string or pathname to process
+- **returns**: The detected locale or default locale if no locale is found
+
+### `getPathWithoutLocale(inputUrl, locales?)`
+
+Removes the locale segment from a URL or pathname:
+
+```ts
+import { getPathWithoutLocale } from "intlayer";
+
+getPathWithoutLocale("/en/dashboard"); // "/dashboard"
+getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
+getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
+```
+
+- **inputUrl**: The complete URL string or pathname to process
+- **locales**: Optional array of supported locales (defaults to configured locales)
+- **returns**: The URL without the locale segment
+
+### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+
+Generates a localized URL for the current locale:
+
+```ts
+import { getLocalizedUrl } from "intlayer";
+
+getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
+getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
+getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
+- **url**: The original URL to localize
+- **currentLocale**: The current locale
+- **locales**: Optional array of supported locales (defaults to configured locales)
+- **defaultLocale**: Optional default locale (defaults to configured default locale)
+- **prefixDefault**: Whether to prefix the default locale (defaults to configured value)
+
+### `getHTMLTextDir(locale?)`
+
+Returns the text direction for a locale:
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
+- **locale**: The locale to get the text direction for (defaults to current locale)
+- **returns**: `"ltr"`, `"rtl"`, or `"auto"`
+
+## Content Handling Utilities
+
+### `getContent(node, nodeProps, locale?)`
+
+Transforms a content node with all available plugins (translation, enumeration, insertion, etc.):
+
+```ts
+import { getContent } from "intlayer";
+
+const content = getContent(
+  contentNode,
+  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
+  "fr"
+);
+```
+
+- **node**: The content node to transform
+- **nodeProps**: Properties for the transformation context
+- **locale**: Optional locale (defaults to configured default locale)
+
+### `getLocalisedContent(node, locale, nodeProps, fallback?)`
+
+Transforms a content node with only the translation plugin:
+
+```ts
+import { getLocalisedContent } from "intlayer";
+
+const content = getLocalisedContent(
+  contentNode,
+  "fr",
+  { dictionaryKey: "common" },
+  true // fallback to default locale if translation missing
+);
+```
+
+- **node**: The content node to transform
+- **locale**: The locale to use for translation
+- **nodeProps**: Properties for the transformation context
+- **fallback**: Whether to fallback to default locale (defaults to false)
+
+### `getTranslation(languageContent, locale?, fallback?)`
+
+Extracts content for a specific locale from a language content object:
+
+```ts
+import { getTranslation } from "intlayer";
+
+const content = getTranslation(
+  {
+    en: "Hello",
+    fr: "Bonjour",
+    de: "Hallo",
+  },
+  "fr",
+  true
+); // "Bonjour"
+```
+
+- **languageContent**: Object mapping locales to content
+- **locale**: Target locale (defaults to configured default locale)
+- **fallback**: Whether to fallback to default locale (defaults to true)
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Retrieves and transforms content from a dictionary by key:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+const nestedContent = getIntlayer("common", "fr", customPlugins);
+```
+
+- **dictionaryKey**: The key of the dictionary to retrieve
+- **locale**: Optional locale (defaults to configured default locale)
+- **plugins**: Optional array of custom transformation plugins
+
+### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+
+Asynchronously retrieves content from a distant dictionary:
+
+```ts
+import { getIntlayerAsync } from "intlayer";
+
+const content = await getIntlayerAsync("common", "fr");
+```
+
+- **dictionaryKey**: The key of the dictionary to retrieve
+- **locale**: Optional locale (defaults to configured default locale)
+- **plugins**: Optional array of custom transformation plugins
+
 ## Formatters
 
 All helpers below are exported from `intlayer`.
@@ -81,7 +344,7 @@ Examples:
 import { number } from "intlayer";
 
 number(123456.789); // "123,456.789" (in en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
+number("1000000", { locale: "fr" }); // "1 000 000"
 number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
@@ -118,7 +381,7 @@ Examples:
 import { currency } from "intlayer";
 
 currency(1234.5, { currency: "EUR" }); // "€1,234.50"
-currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
 ### `date(date, optionsOrPreset?)`
@@ -195,6 +458,25 @@ compact(1200); // "1.2K"
 compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 ```
 
+### `list(values, options?)`
+
+Formats an array of values into a localized list string using `Intl.ListFormat`.
+
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Common fields: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
+  - Defaults: `type: 'conjunction'`, `style: 'long'`
+
+Examples:
+
+```ts
+import { list } from "intlayer";
+
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
+```
+
 ## Notes
 
 - All helpers accept `string` inputs; they are internally coerced to numbers or dates.
@@ -209,25 +491,98 @@ Examples:
 
 ```ts
 // App code (recommended)
-import { number, currency, date, Intl } from "intlayer";
+import {
+  number,
+  currency,
+  date,
+  relativeTime,
+  units,
+  compact,
+  list,
+  Intl,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
+} from "intlayer";
 ```
 
 ### React
 
 Client components:
 
-```ts
-import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
+// or in Preact apps
+// "preact-intlayer/format";
 // or in Next.js apps
-import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
+// "next-intlayer/client/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
+      <p>{unit(123456.789, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
 ```
 
 Server components (or React Server runtime):
 
 ```ts
-import { useNumber, useCurrency, useDate } from "react-intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/server/format";
 // or in Next.js apps
-import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "next-intlayer/server/format";
 ```
 
 > That hooks will consider the locale from the `IntlayerProvider` or `IntlayerServerProvider`
@@ -237,14 +592,27 @@ import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
 Client components:
 
 ```ts
-import { useNumber, useCurrency, useDate } from "vue-intlayer/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
 ```
 
 > That composables will consider the locale from the injected `IntlayerProvider`
 
 ## Doc History
 
-| Version | Date       | Changes                      |
-| ------- | ---------- | ---------------------------- |
-| 5.8.0   | 2025-08-20 | Add vue formatters           |
-| 5.8.0   | 2025-08-18 | Add formatters documentation |
+| Version | Date       | Changes                                                                        |
+| ------- | ---------- | ------------------------------------------------------------------------------ |
+| 5.8.0   | 2025-08-20 | Add vue formatters                                                             |
+| 5.8.0   | 2025-08-18 | Add formatters documentation                                                   |
+| 5.8.0   | 2025-08-20 | Add list formatter documentation                                               |
+| 5.8.0   | 2025-08-20 | Add additional Intl utilities (DisplayNames, Collator, PluralRules)            |
+| 5.8.0   | 2025-08-20 | Add locale utilities (getLocaleName, getLocaleLang, getLocaleFromPath, etc.)   |
+| 5.8.0   | 2025-08-20 | Add content handling utilities (getContent, getTranslation, getIntlayer, etc.) |

package/docs/en/how_works_intlayer.md

@@ -25,8 +25,8 @@ The main idea behind Intlayer is to adopt a per-component content management. So
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 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.
@@ -45,12 +45,10 @@ The build step can be done in three ways:
 - using the app plugins such as [`vite-intlayer` package](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vite-intlayer/index.md), or their equivalents for [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/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/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.
 

package/docs/en/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-08-20
+updatedAt: 2025-08-23
 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:
@@ -197,23 +197,23 @@ This approach allows you to:
    - `.content.{{ts|mjs|cjs|json}}` files can be created using a VSCode extension
    - Autocompletion AI tools in your IDE (such as GitHub Copilot) can help you declare your content, reducing copy/paste
 
-2. **Reduce the complexity of your codebase**
+2. **Clean your codebase**
+   - Reduce the complexity
+   - Increase the maintainability
 
-3. **Increase the maintainability of your codebase**
-
-4. **Duplicate your components and their related content more easily (Example: login/register components, etc.)**
+3. **Duplicate your components and their related content more easily (Example: login/register components, etc.)**
    - By limiting the risk of impacting other components' content
    - By copy/pasting your content from one application to another without external dependencies
 
-5. **Avoid polluting your codebase with unused keys/values for unused components**
-   - If you don't use a component, you don't need to import its content
+4. **Avoid polluting your codebase with unused keys/values for unused components**
+   - If you don't use a component, Intlayer will not import its related content
    - If you delete a component, you'll more easily remember to remove its related content as it will be present in the same folder
 
-6. **Reduce reasoning cost for AI agents to declare your multilingual content**
+5. **Reduce reasoning cost for AI agents to declare your multilingual content**
    - The AI agent won't have to scan your entire codebase to know where to implement your content
    - Translations can easily be done by autocompletion AI tools in your IDE (such as GitHub Copilot)
 
-7. **Optimize loading performance**
+6. **Optimize loading performance**
    - If a component is lazy-loaded, its related content will be loaded at the same time
 
 ## Additional features of Intlayer
@@ -240,26 +240,37 @@ This approach allows you to:
 
 ## Comparison of Intlayer with other solutions
 
-| Feature                                       | Intlayer                                                                                                                         | React-i18next / i18next                                            | React-Intl (FormatJS)                              | LinguiJS                                           | next-intl                                          | next-i18next                                       | vue-i18n                                                  |
-| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- | --------------------------------------------------------- |
-| **Translations Near Components**              | Yes, content collocated with each component                                                                                      | No                                                                 | No                                                 | No                                                 | No                                                 | No                                                 | Yes - using `Single File Components` (SFCs)               |
-| **TypeScript Integration**                    | Advanced, auto-generated strict types                                                                                            | Basic; extra config for safety                                     | Good, but less strict                              | Typings, needs config                              | Good                                               | Basic                                              | Good (types available; key-safety needs setup)            |
-| **Missing Translation Detection**             | Build-time error/warning                                                                                                         | Mostly fallback strings at runtime                                 | Fallback strings                                   | Needs extra config                                 | Runtime fallback                                   | Runtime fallback                                   | Runtime fallback/warnings (configurable)                  |
-| **Rich Content (JSX/Markdown/components)**    | Direct support, even React nodes                                                                                                 | Limited / interpolation only                                       | ICU syntax, not real JSX                           | Limited                                            | Not designed for rich nodes                        | Limited                                            | Limited (components via `<i18n-t>`, Markdown via plugins) |
-| **AI-powered Translation**                    | Yes, supports multiple AI providers. Usable using your own API keys. Considers the context of your application and content scope | No                                                                 | No                                                 | No                                                 | No                                                 | No                                                 | No                                                        |
-| **Visual Editor**                             | Yes, local Visual Editor + optional CMS; can externalize codebase content; embeddable                                            | No / available via external localization platforms                 | No / available via external localization platforms | No / available via external localization platforms | No / available via external localization platforms | No / available via external localization platforms | No / available via external localization platforms        |
-| **Localized Routing**                         | Built-in, middleware support                                                                                                     | Plugins or manual config                                           | Not built-in                                       | Plugin/manual config                               | Built-in                                           | Built-in                                           | Manual via Vue Router (Nuxt i18n handles it)              |
-| **Dynamic Route Generation**                  | Yes                                                                                                                              | Plugin/ecosystem or manual setup                                   | Not provided                                       | Plugin/manual                                      | Yes                                                | Yes                                                | Not provided (Nuxt i18n provides)                         |
-| **Pluralization**                             | Enumeration-based patterns; see docs                                                                                             | Configurable (plugins like i18next-icu)                            | Advanced (ICU)                                     | Advanced (ICU/messageformat)                       | Good                                               | Good                                               | Advanced (built-in plural rules)                          |
-| **Formatting (dates, numbers, currencies)**   | Optimized formatters (Intl under the hood)                                                                                       | Via plugins or custom Intl usage                                   | Advanced ICU formatters                            | ICU/CLI helpers                                    | Good (Intl helpers)                                | Good (Intl helpers)                                | Built-in date/number formatters (Intl)                    |
-| **Content Format**                            | .tsx, .ts, .js, .json, .md, .txt                                                                                                 | .json                                                              | .json, .js                                         | .po, .json                                         | .json, .js, .ts                                    | .json                                              | .json, .js                                                |
-| **ICU support**                               | WIP (native ICU)                                                                                                                 | Via plugin (i18next-icu)                                           | Yes                                                | Yes                                                | Yes                                                | Via plugin (i18next-icu)                           | Via custom formatter/compiler                             |
-| **SEO Helpers (hreflang, sitemap)**           | Built-in tools: helpers for sitemap, **robots.txt**, metadata                                                                    | Community plugins/manual                                           | Not core                                           | Not core                                           | Good                                               | Good                                               | Not core (Nuxt i18n provides helpers)                     |
-| **Ecosystem / Community**                     | Smaller but growing fast and reactive                                                                                            | Largest and most mature                                            | Large, enterprise                                  | Growing, smaller                                   | Mid-size, Next.js-focused                          | Mid-size, Next.js-focused                          | Large in Vue ecosystem                                    |
-| **Server-side Rendering & Server Components** | Yes, streamlined for SSR / React Server Components                                                                               | Supported, some config needed                                      | Supported in Next.js                               | Supported                                          | Full support                                       | Full support                                       | SSR via Nuxt/Vue SSR (no RSC)                             |
-| **Tree-shaking (load only used content)**     | Yes, per-component at build time via Babel/SWC plugins                                                                           | Usually loads all (can be improved with namespaces/code-splitting) | Usually loads all                                  | Not default                                        | Partial                                            | Partial                                            | Partial (with code-splitting/manual setup)                |
-| **Lazy loading**                              | Yes, per-locale/per-component                                                                                                    | Yes (e.g., backends/namespaces on demand)                          | Yes (split locale bundles)                         | Yes (dynamic catalog imports)                      | Yes (per-route/per-locale)                         | Yes (per-route/per-locale)                         | Yes (async locale messages)                               |
-| **Management of Large Projects**              | Encourages modular, suited for design-system                                                                                     | Needs good file discipline                                         | Central catalogs can get large                     | May get complex                                    | Modular with setup                                 | Modular with setup                                 | Modular with Vue Router/Nuxt i18n setup                   |
+| Feature                                       | `intlayer`                                                                                                                          | `react-i18next`                                                                                          | `react-intl` (FormatJS)                                                                                                          | `lingui`                                              | `next-intl`                                                                                              | `next-i18next`                                                                                           | `vue-i18n`                                                   |
+| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| **Translations Near Components**              | ✅ Yes, content collocated with each component                                                                                      | ❌ No                                                                                                    | ❌ No                                                                                                                            | ❌ No                                                 | ❌ No                                                                                                    | ❌ No                                                                                                    | ✅ Yes - using `Single File Components` (SFCs)               |
+| **TypeScript Integration**                    | ✅ Advanced, auto-generated strict types                                                                                            | ⚠️ Basic; extra config for safety                                                                        | ✅ Good, but less strict                                                                                                         | ⚠️ Typings, needs config                              | ✅ Good                                                                                                  | ⚠️ Basic                                                                                                 | ✅ Good (types available; key-safety needs setup)            |
+| **Missing Translation Detection**             | ✅ TypeScript error hightlight and build-time error/warning                                                                         | ⚠️ Mostly fallback strings at runtime                                                                    | ⚠️ Fallback strings                                                                                                              | ⚠️ Needs extra config                                 | ⚠️ Runtime fallback                                                                                      | ⚠️ Runtime fallback                                                                                      | ⚠️ Runtime fallback/warnings (configurable)                  |
+| **Rich Content (JSX/Markdown/components)**    | ✅ Direct support                                                                                                                   | ⚠️ Limited / interpolation only                                                                          | ⚠️ ICU syntax, not real JSX                                                                                                      | ⚠️ Limited                                            | ❌ Not designed for rich nodes                                                                           | ⚠️ Limited                                                                                               | ⚠️ Limited (components via `<i18n-t>`, Markdown via plugins) |
+| **AI-powered Translation**                    | ✅ Yes, supports multiple AI providers. Usable using your own API keys. Considers the context of your application and content scope | ❌ No                                                                                                    | ❌ No                                                                                                                            | ❌ No                                                 | ❌ No                                                                                                    | ❌ No                                                                                                    | ❌ No                                                        |
+| **Visual Editor**                             | ✅ Yes, local Visual Editor + optional CMS; can externalize codebase content; embeddable                                            | ❌ No / available via external localization platforms                                                    | ❌ No / available via external localization platforms                                                                            | ❌ No / available via external localization platforms | ❌ No / available via external localization platforms                                                    | ❌ No / available via external localization platforms                                                    | ❌ No / available via external localization platforms        |
+| **Localized Routing**                         | ✅ Yes, supports localized paths out of the box (works with Next.js & Vite)                                                         | ⚠️ No built-in, requires plugins (e.g. `next-i18next`) or custom router config                           | ❌ No, only message formatting, routing must be manual                                                                           | ⚠️ No built-in, requires plugins or manual config     | ✅ Built-in, App Router supports `[locale]` segment                                                      | ✅ Built-in                                                                                              | ✅ Built-in                                                  |
+| **Dynamic Route Generation**                  | ✅ Yes                                                                                                                              | ⚠️ Plugin/ecosystem or manual setup                                                                      | ❌ Not provided                                                                                                                  | ⚠️ Plugin/manual                                      | ✅ Yes                                                                                                   | ✅ Yes                                                                                                   | ❌ Not provided (Nuxt i18n provides)                         |
+| **Pluralization**                             | ✅ Enumeration-based patterns                                                                                                       | ✅ Configurable (plugins like i18next-icu)                                                               | ✅ (ICU)                                                                                                                         | ✅ (ICU/messageformat)                                | ✅ Good                                                                                                  | ✅ Good                                                                                                  | ✅ Built-in plural rules                                     |
+| **Formatting (dates, numbers, currencies)**   | ✅ Optimized formatters (Intl under the hood)                                                                                       | ⚠️ Via plugins or custom Intl usage                                                                      | ✅ ICU formatters                                                                                                                | ✅ ICU/CLI helpers                                    | ✅ Good (Intl helpers)                                                                                   | ✅ Good (Intl helpers)                                                                                   | ✅ Built-in date/number formatters (Intl)                    |
+| **Content Format**                            | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                    | ⚠️ .json                                                                                                 | ✅ .json, .js                                                                                                                    | ⚠️ .po, .json                                         | ✅ .json, .js, .ts                                                                                       | ⚠️ .json                                                                                                 | ✅ .json, .js                                                |
+| **ICU support**                               | ⚠️ WIP                                                                                                                              | ⚠️ Via plugin (i18next-icu)                                                                              | ✅ Yes                                                                                                                           | ✅ Yes                                                | ✅ Yes                                                                                                   | ⚠️ Via plugin (`i18next-icu`)                                                                            | ⚠️ Via custom formatter/compiler                             |
+| **SEO Helpers (hreflang, sitemap)**           | ✅ Built-in tools: helpers for sitemap, robots.txt, metadata                                                                        | ⚠️ Community plugins/manual                                                                              | ❌ Not core                                                                                                                      | ❌ Not core                                           | ✅ Good                                                                                                  | ✅ Good                                                                                                  | ❌ Not core (Nuxt i18n provides helpers)                     |
+| **Ecosystem / Community**                     | ⚠️ Smaller but growing fast and reactive                                                                                            | ✅ Largest and mature                                                                                    | ✅ Large                                                                                                                         | ⚠️ Smaller                                            | ✅ Mid-size, Next.js-focused                                                                             | ✅ Mid-size, Next.js-focused                                                                             | ✅ Large in Vue ecosystem                                    |
+| **Server-side Rendering & Server Components** | ✅ Yes, streamlined for SSR / React Server Components                                                                               | ⚠️ Supported at page level but need to pass t-functions on component tree for children server components | ⚠️ Supported at page level with additional set up, but need to pass t-functions on component tree for children server components | ✅ Supported, set up needed                           | ⚠️ Supported at page level but need to pass t-functions on component tree for children server components | ⚠️ Supported at page level but need to pass t-functions on component tree for children server components | ✅ SSR via Nuxt/Vue SSR (no RSC)                             |
+| **Tree-shaking (load only used content)**     | ✅ Yes, per-component at build time via Babel/SWC plugins                                                                           | ⚠️ Usually loads all (can be improved with namespaces/code-splitting)                                    | ⚠️ Usually loads all                                                                                                             | ❌ Not default                                        | ⚠️ Partial                                                                                               | ⚠️ Partial                                                                                               | ⚠️ Partial (with code-splitting/manual setup)                |
+| **Lazy loading**                              | ✅ Yes, per-locale / per-dictionary                                                                                                 | ✅ Yes (e.g., backends/namespaces on demand)                                                             | ✅ Yes (split locale bundles)                                                                                                    | ✅ Yes (dynamic catalog imports)                      | ✅ Yes (per-route/per-locale), need mamespace management                                                 | ✅ Yes (per-route/per-locale), need mamespace management                                                 | ✅ Yes (async locale messages)                               |
+| **Purge unused content**                      | ✅ Yes, per-dictionary at build time                                                                                                | ❌ No, only via manual namespace segmentation                                                            | ❌ No, all declared messages are bundled                                                                                         | ✅ Yes, unused keys detected & dropped at build       | ❌ No, can be managed manually with namespace management                                                 | ❌ No, can be managed manually with namespace management                                                 | ❌ No, only possible via manual lazy-loading                 |
+| **Management of Large Projects**              | ✅ Encourages modular, suited for design-system                                                                                     | ⚠️ Needs good file discipline                                                                            | ⚠️ Central catalogs can get large                                                                                                | ⚠️ May get complex                                    | ✅ Modular with setup                                                                                    | ✅ Modular with setup                                                                                    | ✅ Modular with Vue Router/Nuxt i18n setup                   |
+
+---
+
+## Interoperability
+
+`intlayer` can also help to manage your `react-intl`, `react-i18next`, `next-intl`, `next-i18next`, and `vue-i18n` namespaces.
+
+Using `intlayer`, you can declare your content in the format of your favorite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
+
+Refer to [`dictionaryOutput` and `i18nextResourcesDir` options](https://intlayer.org/doc/concept/configuration#content-configuration) for more details.
 
 ## Document History