Question

Why you should consider Intlayer to make your app multilingual?

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 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:

.
├── locales
│   ├── en.json
│   ├── es.json
│   └── fr.json
├── i18n.ts
└── src
    └── components
        └── MyComponent
            └── index.tsx

Or here using namespaces:

.
├── 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).

.
└── components
    └── MyComponent
        ├── index.content.ts
        ├── index.test.tsx
        ├── index.stories.tsx
        └── index.tsx

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;

import { useIntlayer } from "react-intlayer";

export const ComponentExample = () => {
  const { myTranslatedContent } = useIntlayer("component-example");

  return <span>{myTranslatedContent}</span>;
};

This approach allows you to:

1. Increase the speed of development

   • .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

3. Increase the maintainability of your codebase

4. 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
   • 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

   • 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

   • If a component is lazy-loaded, its related content will be loaded at the same time

Additional features of Intlayer

1. Cross-Frameworks Support
   Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.

2. JavaScript-Powered Content Management
   Harness the flexibility of JavaScript to define and manage your content efficiently.

   • Content declaration

3. Per-Locale Content Declaration File
   Speed up your development by declaring your content once, before auto generation.

   • Per-Locale Content Declaration File

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

   • TypeScript configuration

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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
    • Intlayer CMS

12. 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

13. Static Rendering
    Doesn't block Static Rendering.

    • Next.js integration

14. 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
    • Intlayer CLI
    • Auto fill

15. 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

16. 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

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

    • Intlayer and react-intl
    • Intlayer and next-intl
    • Intlayer and next-i18next

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