--- createdAt: 2024-08-14 updatedAt: 2026-09-27 priority: 8 title: "Why Intlayer? Benefits over Other i18n Libraries" 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 - why history: - version: 8.11.2 date: 2026-05-31 changes: "Add Why Intlayer over alternatives section" - version: 7.3.1 date: 2025-11-27 changes: "Release Compiler" - version: 5.8.0 date: 2025-08-19 changes: "Update comparative table" - version: 5.5.10 date: 2025-06-29 changes: "Init history" author: aymericzip --- # Why you should consider Intlayer? ## What is Intlayer? **Intlayer** is an internationalization 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 in your code. Using TypeScript, **Intlayer** makes your development stronger and more efficient. ## Why Intlayer over alternatives? Compared to main solutions like `next-intl` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as: Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**. Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy. Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents. - [LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md) - [MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md) - [agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md) Intlayer offers a bench of additional features that other i18n solutions do not have, such as [Markdown support](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md), [fetching external content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/function_fetching.md), [file content loading](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md), [live content update](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md), [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) and more. - [Markdown support](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md) - [fetching external content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/function_fetching.md) - [file content loading](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md) - [live content update](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md) - [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) to help **translate in the background**. - [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time. More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely. - [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) - [full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) If you use different frameworks for different part of your application (e.g., React, React-native, Vue, Angular, Svelte, etc.), Intlayer provides a way to **use a common synatax and implementation across all main frontend frameworks**. You will also be able to share your content declaration across your design-system, apps, backend etc. ## Why was Intlayer created? Intlayer was created to solve a common problem that affects all common i18n libraries such as `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, and `vue-i18n`. All these solutions adopt a centralized approach to list and manage your content. For example: ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json ├── i18n.ts └── src └── components └── MyComponent └── index.tsx ``` Or here using namespaces: ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json ├── i18n.ts └── src └── components └── MyComponent └── index.tsx ``` This type of architecture slows down the development process and makes the codebase more complex to maintain for several reasons: 1. **For any new component created, you should:** - Create the new resource/namespace in the `locales` folder - Remember to import the new namespace in your page - Translate your content (often done manually by copy/paste from AI providers) 2. **For any change made on your components, you should:** - Search for the related resource/namespace (far from the component) - Translate your content - Ensure your content is up to date for any locale - Verify your namespace doesn't include unused keys/values - Ensure the structure of your JSON files is the same for all locales On professional projects using these solutions, localization platforms are often used to help manage the translation of your content. However, this can quickly become costly for large projects. To solve this problem, Intlayer adopts an approach that scopes your content per-component and keeps your content close to your component, as we often do with CSS (`styled-components`), types, documentation (`storybook`), or unit tests (`jest`). ```bash codeFormat="typescript" . └── components └── MyComponent ├── index.content.ts ├── index.test.tsx ├── index.stories.tsx └── index.tsx ``` ```bash codeFormat="commonjs" . └── components └── MyComponent ├── index.content.cjs ├── index.test.mjs ├── index.stories.mjs └── index.tsx ``` ```bash codeFormat="esm" . └── components └── MyComponent ├── index.content.mjs ├── index.test.mjs ├── index.stories.mjs └── index.tsx ``` ```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]} import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { myTranslatedContent: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` ```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]} import { useIntlayer } from "react-intlayer"; export const ComponentExample = () => { const { myTranslatedContent } = useIntlayer("component-example"); return {myTranslatedContent}; }; ``` This approach allows you to: 1. **Increase the speed of development** - `.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}` 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. **Clean your codebase** - Reduce the complexity - Increase the maintainability 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 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 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) 6. **Optimize loading performance** - If a component is lazy-loaded, its related content will be loaded at the same time > To understand where these libraries come from, read the history of JavaScript i18n. - [The history of JavaScript i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/history_of_i18n.md) ## Additional features of Intlayer | Feature | Description | | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.webp?raw=true) | **Cross-Frameworks Support**

Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more. | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true) | **JavaScript-Powered Content Management**

Harness the flexibility of JavaScript to define and manage your content efficiently.

- [Content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) | | Feature | **Compiler**

The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.

- [Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Per-Locale Content Declaration File**

Speed up your development by declaring your content once, before auto generation.

- [Per-Locale Content Declaration File](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/per_locale_file.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true) | **Type-Safe Environment**

Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.

- [TypeScript configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md#configure-typescript) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true) | **Simplified Setup**

Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease.

- [Explore Next.js integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_16.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true) | **Simplified Content Retrieval**

No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.

- [React integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true) | **Consistent Server Component Implementation**

Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component.

- [Server Components](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_16.md#step-7-utilize-content-in-your-code) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true) | **Organized Codebase**

Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components enhance maintainability and clarity.

- [How Intlayer works](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/how_works_intlayer.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true) | **Enhanced Routing**

Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.

- [Explore Next.js integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_16.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true) | **Markdown Support**

Import and interpret locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.

- [Content files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.webp?raw=true) | **Free Visual Editor & CMS**

A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.

- [Intlayer Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)
- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.webp?raw=true) | **Tree-shakable Content**

Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency.

- [App build optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/how_works_intlayer.md#app-build-optimization) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.webp?raw=true) | **Static Rendering**

Doesn't block Static Rendering.

- [Next.js integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_16.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true) | **AI-Powered Translation**

Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider/API key.

- [CI/CD integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/CI_CD.md)
- [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md)
- [Auto fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/autoFill.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true) | **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.

- [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.webp?raw=true) | **VSCode Extension**

Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more.

- [VSCode Extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/vs_code_extension.md) | | ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true) | **Interoperability**

Allows interoperability with react-i18next, next-i18next, next-intl, and react-intl.

- [Intlayer and react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/intlayer_with_react-intl.md)
- [Intlayer and next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/intlayer_with_next-intl.md)
- [Intlayer and next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/intlayer_with_next-i18next.md)
- [Intlayer compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) | | Testing Missing Translations (CLI/CI) | ✅ CLI: npx intlayer content test (CI-friendly audit) | ## Comparison of Intlayer with other solutions | 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 ``, 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 | ## GitHub STARs GitHub stars are a strong indicator of a project's popularity, community trust, and long-term relevance. While not a direct measure of technical quality, they reflect how many developers find the project useful, follow its progress, and are likely to adopt it. For estimating the value of a project, stars help compare traction across alternatives and provide insights into ecosystem growth. [![Star History Chart](https://api.star-history.com/chart?repos=aymericzip/intlayer%2Cformatjs/formatjs%2Ci18next/react-i18next%2Ci18next/i18next%2Ci18next/next-i18next%2Clingui/js-lingui%2Camannn/next-intl%2Cintlify/vue-i18n%2Ccodingcommons/typesafe-i18n%2Copral/paraglide-js&type=date&legend=top-left)](https://star-history.com/#aymericzip/intlayer&formatjs/formatjs&i18next/react-i18next&i18next/i18next&i18next/next-i18next&lingui/js-lingui&amannn/next-intl&intlify/vue-i18n&codingcommons/typesafe-i18n&opral/paraglide-js) ## Commit activity Stars show popularity. Commits show how much work goes into a project. At the time of writing, Intlayer counts about 7,500 commits, more than most libraries compared here, and about 5 times more than `next-intl` or `next-i18next`. > Intlayer is a monorepo, so its count includes every framework package, the CLI and the docs. Read commits as a signal of activity, not of quality. ## npm downloads Downloads reward the oldest solutions, not the best ones. A library released years ago is still installed by every project that picked it back then, by every CI run and by every package that depends on it. The count measures inertia more than a fresh choice. AI assistants amplify the effect. `next-intl`, `i18next` and `vue-i18n` are everywhere in the code they were trained on, so they suggest them by default, without comparing the alternatives. Each suggestion adds downloads, which feeds the next suggestion. Compare on the benchmark rather than on the download count. ## 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`). If you want to keep using the API of your current i18n library, `intlayer` also provides **compat adapters**: packages exposing the exact same API as `react-i18next`, `next-intl`, `react-intl`, `vue-i18n`, and more, but served by Intlayer dictionaries. This lets you migrate progressively without rewriting your code. See the [Compat Adapters documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md). - [Compat Adapters documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) ## Frequently Asked Questions Three generations coexist: - **Runtime catalog libraries**: `i18next`, `react-i18next`, `next-i18next`, `vue-i18n`, `ngx-translate`, `svelte-i18n`. JSON namespaces loaded at runtime. Mature, framework agnostic, untyped, and shipped whole to the page. - **Compile time message libraries**: `Lingui`, `Paraglide`, and `next-intl` or `react-intl` with an extraction step. Better bundle behaviour and partial typing, still a centralized catalog. - **Content layer libraries**: `Intlayer`. Content is declared and compiled per component, so typing, tree shaking, editing tools and AI translation all come from the same declarations. Much less than a namespace based setup, because a page never downloads a catalog it does not render. Server rendered markup resolves its content on the server, and the build time compiler replaces `useIntlayer` calls with the exact dictionary entries a component uses, so unused keys and unused languages are dropped. [Dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md) split the rest per locale. Measured against the usual alternatives, Intlayer reduces bundle and page size by up to 50%. See [bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/bundle_optimization.md) and the [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/index.md). - [Dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md) - [bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/bundle_optimization.md) - [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/index.md) Yes, and there are two paths. You can migrate the content progressively with the [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_i18next_to_intlayer.md) or the [next-intl migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_next-intl_to_intlayer.md). Or you can keep your current API entirely: the [compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) expose the exact same API as `i18next`, `react-i18next`, `next-intl`, `next-i18next`, `react-intl`, `use-intl`, `vue-i18n` and `Lingui`, but served by Intlayer dictionaries, so imports change and component code does not. - [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_i18next_to_intlayer.md) - [next-intl migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_next-intl_to_intlayer.md) - [compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) Yes. The [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md) keeps your `/messages/{locale}/{namespace}.json` files as the source of truth and generates Intlayer dictionaries from them, in both directions. A [sync PO plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-po.md) does the same for gettext catalogs, and [per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/per_locale_file.md) let you split content by language instead of grouping locales in one file. - [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md) - [sync PO plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-po.md) - [per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/per_locale_file.md) No. Run `npx intlayer extract` and Intlayer reads your source files, pulls the user facing strings out and writes a `.content` file next to each one, so you review a diff instead of copying strings into a catalog one at a time. See the [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md). - [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md) For a fully automated pipeline, the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) does the same at build time on JSX, TSX, Vue and Svelte source, generating the dictionaries on every change so there are no keys to maintain by hand. It works by static analysis, so strings that only exist at runtime stay out of reach, and it needs a few annotations to tell user facing text apart from application logic. - [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) Five pieces, all optional: - **[VS Code extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/vs_code_extension.md)**: jump from a `useIntlayer` key to the content file that declares it, extract content from a component, and run build, fill, test, push and pull from the command palette or a dedicated Intlayer tab. - **[LSP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**: the same awareness in any editor that speaks LSP, with go to definition, find all references, hover previews of a translated value, autocompletion of keys and fields, and a warning when a key is not declared anywhere. It also resolves `i18next`, `react-i18next`, `next-intl` and `use-intl` calls, which helps while you migrate. - **[MCP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**: exposes the Intlayer documentation and CLI to Cursor, VS Code, Claude Desktop, Claude Code and ChatGPT, so an assistant answers from current docs instead of guessing, and can run commands such as `intlayer fill` itself. - **[Agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**: focused skills such as `intlayer-config`, `intlayer-cli` and `intlayer-content`, plus one per framework, that teach an agent your routing setup and the content node types. - **[ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/eslint.md)**: `no-raw-text` flags hardcoded strings, with further rules for static dictionary keys and unused content. `next-intl` is a message layer for Next.js: you keep JSON message files per locale and read them through `useTranslations`. Intlayer is a content layer: declarations live next to the component, are typed from the declaration itself, and are compiled per component so a page ships only what it renders. Intlayer also covers what `next-intl` leaves to you, namely AI translation, a visual editor, a CMS and missing translation checks in CI. If you want to keep the `next-intl` API, the [compat adapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) serves it from Intlayer dictionaries. - [compat adapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) `i18next` resolves string keys against namespaces at runtime, which means a renamed or misspelled key fails silently and every namespace a page touches is downloaded in full. Intlayer resolves content at build time against generated types, so a bad key is a compile error, and only the entries a component renders reach the bundle. `i18next` has the larger plugin ecosystem and a longer track record; Intlayer has typing, bundle size, and the editing and automation tooling. See the [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_i18next_to_intlayer.md) or the [compat adapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md). - [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_i18next_to_intlayer.md) - [compat adapter](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) On bundle and page size, yes: not loading catalogs a page does not render cuts bundle and page size by up to 50% against namespace based setups. The [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/index.md) publishes the method and the numbers per framework, including [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/nextjs.md), [TanStack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/tanstack.md), [Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/vue.md) and [Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/svelte.md), so you can reproduce them rather than take the claim on trust. - [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/index.md) - [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/nextjs.md) - [TanStack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/tanstack.md) - [Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/vue.md) - [Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/svelte.md) It depends on what hurts today. If your pain is bundle size, silent missing translations, or translators who cannot work without a developer, the migration pays for itself. If your catalogs are small and stable, the gain is smaller. Either way the migration does not have to be a rewrite: the [compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) keep your current API, and the [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md) keeps your existing JSON files as the source of truth while both layers coexist. - [compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md) - [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md) [Markdown content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md), [content fetched from an external source](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), file content loading, [live content updates](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md), a [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md), a [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), a [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) that extracts content from existing components, [content variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/variants.md) for A/B testing, [analytics](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) on content exposure, an [MCP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md), an [LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md) and [agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md). - [Markdown content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md) - [content fetched from an external source](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) - [live content updates](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md) - [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) - [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) - [content variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/variants.md) - [analytics](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) - [MCP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md) - [LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md) - [agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md) Yes. Intlayer can generate your namespaces in the format and location your current library expects, for example `/messages/{locale}/{namespace}.json`, so you get the AI translation, the editor and the CI checks while your application code keeps using its existing i18n library. Yes, under the Apache 2.0 license, commercial use included. The hosted CMS is an optional paid service that can also be [self hosted](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/self_hosting.md). - [self hosted](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/self_hosting.md)