Why you should consider Intlayer?

What is Intlayer?

Intlayer is an internationalisation library designed specifically for JavaScript developers. It allows the declaration of your content everywhere in your code. It converts declarations of multilingual content into structured dictionaries to integrate easily 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 centralised approach to list and manage your content. For example:

.├── locales│   ├── en.json│   ├── fr.json│   └── es.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, localisation 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. 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)

Additional features of Intlayer

Feature	Description
-------------------------------------------------------------------------------------------------------------------------	--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Cross-Framework Support Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.
	JavaScript-Powered Content Management Harness the flexibility of JavaScript to define and manage your content efficiently. - Content declaration
	Per-Locale Content Declaration File Accelerate your development by declaring your content once, prior to auto-generation. - Per-Locale Content Declaration File
	Type-Safe Environment Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion. - TypeScript configuration
	Simplified Setup Get up and running quickly with minimal configuration. Adjust settings for internationalisation, routing, AI, build, and content handling with ease. - Explore Next.js integration
	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
	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
	Organised Codebase Keep your codebase more organised: 1 component = 1 dictionary in the same folder. Translations close to their respective components enhance maintainability and clarity. - How Intlayer works
	Enhanced Routing Full support for app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc. - Explore Next.js integration
	Markdown Support Import and interpret locale files and remote Markdown for multilingual content such as privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code. - Content files
	Free Visual Editor & CMS A free visual editor and CMS are available for content writers, removing the need for a localisation platform. Keep your content synchronised using Git, or externalise it totally or partially with the CMS. - Intlayer Editor - Intlayer CMS
	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 optimisation
	Static Rendering Does not block Static Rendering. - Next.js integration
	AI-Powered Translation Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools with your own AI provider/API key. - CI/CD integration - Intlayer CLI - Auto fill
	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
	VSCode Extension Intlayer provides a VSCode extension to help you manage your content and translations, build your dictionaries, translate your content, and more. - VSCode Extension
	Interoperability Enables 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

Document History