Per-component i18n
AI-powered translation. Visual Editor. Multilingual CMS.
Docs • Next.js • React + Vite • CMS • Discord
What is Intlayer?
Most i18n libraries are either too complex, too rigid, or not built for modern frameworks.
Intlayer is a modern i18n solution for web and mobile apps.
It’s framework-agnostic, AI-powered, and includes a free CMS & visual editor.
With per-locale content files, TypeScript autocompletion, tree-shakable dictionaries, and CI/CD integration, Intlayer makes internationalization faster, cleaner, and smarter.
Keys benefits of Intlayer:
| Feature | Description |
|---|---|
 |
Cross-Frameworks 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
Speed up your development by declaring your content once, before auto generation.
- Per-Locale Content Declaration File |
|
| Compiler
The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.
- Compiler |
|
| 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 internationalization, 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| Static Rendering
Doesn't 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 using 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, building your dictionaries, translating your content, and more.
- VSCode Extension |
|
| Interoperability
Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n.
- Intlayer and react-intl
- Intlayer and next-intl
- Intlayer and next-i18next
- Intlayer and vue-i18n
- Intlayer compat adapters |
|
| Performances & Benchmark
Uses advanced tree-shaking and dynamic loading to boost performances and keep the solution as light as possible.
📦 Installation
Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.
npm install intlayer react-intlayer
⚡ Quick Start (Next.js)
// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
defaultLocale: Locales.ENGLISH,
},
};
export default config;
// app/home.content.ts
import { t, type Dictionary } from "intlayer";
const content = {
key: "home",
content: {
title: t({
en: "Home",
fr: "Accueil",
es: "Inicio",
}),
},
} satisfies Dictionary;
export default content;
// app/page.tsx
import { useIntlayer } from "react-intlayer";
const HomePage = () => {
const { title } = useIntlayer("home");
return
{title}
;
};
🎥 Live tutorial on YouTube
Table of Contents
Explore our comprehensive documentation to get started with Intlayer and learn how to integrate it into your projects.
📘 Get Started
⚙️ Concept
How Intlayer Works Configuration Intlayer CLI Compiler
Intlayer Editor Intlayer CMS Dictionary
[Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)
[Translation](https://intlayer.org/doc/concept/content/translation)
[Enumeration](https://intlayer.org/doc/concept/content/enumeration)
[Condition](https://intlayer.org/doc/concept/content/condition)
[Nesting](https://intlayer.org/doc/concept/content/nesting)
[Markdown](https://intlayer.org/doc/concept/content/markdown)
[Function Fetching](https://intlayer.org/doc/concept/content/function-fetching)
[Insertion](https://intlayer.org/doc/concept/content/insertion)
[File](https://intlayer.org/doc/concept/content/file)
🌐 Environment
[Next.js 15](https://intlayer.org/doc/environment/nextjs/15)
[Next.js 14 (App Router)](https://intlayer.org/doc/environment/nextjs/14)
[Next.js Page Router](https://intlayer.org/doc/environment/nextjs/next-with-page-router)
[Next.js using Compiler](https://intlayer.org/doc/environment/nextjs/compiler)
React CRA Vite + React Vite + React using Compiler React-router-v7 Remix 3 Tanstack start
[Solid](https://intlayer.org/doc/environment/tanstack-start/solid)
[React](https://intlayer.org/doc/environment/astro/react)
[Vue](https://intlayer.org/doc/environment/astro/vue)
[Svelte](https://intlayer.org/doc/environment/astro/svelte)
[Solid](https://intlayer.org/doc/environment/astro/solid)
[Lit](https://intlayer.org/doc/environment/astro/lit)
React Native Vite + Svelte SvelteKit Vite + Preact Vite + Vue Vite + Nuxt Vite + Solid Solid Start Angular
[Backend](https://intlayer.org/doc/environment/express)
[Express](https://intlayer.org/doc/environment/express)
[NestJS](https://intlayer.org/doc/environment/nest)
[Fastify](https://intlayer.org/doc/environment/fastify)
[AdonisJS](https://intlayer.org/doc/environment/adonisjs)
[Hono](https://intlayer.org/doc/environment/hono)
[Elysia](https://intlayer.org/doc/environment/elysia)
📊 Benchmark
Next.js TanStack Start Vue Solid Svelte
📰 Blog
What is i18n i18n and SEO Intlayer and i18next Intlayer and react-intl Intlayer and next-intl
Multilingual content management system
More than an i18n library, Intlayer is a complete multilingual content management system. A full CMS is available for free at app.intlayer.org.
Intlayer connects developers, copywriters, and AI agents in one workflow for creating and maintaining multilingual websites effortlessly.Intlayer replaces the following stack in a single solution:
- i18n solutions (e.g.
i18next,next-intl,vue-i18n) - TMSs (Translation Management Systems) (e.g. Crowdin, Phrase, Lokalise)
- Feature flags
- Headless CMSs (e.g. Contentful, Strapi, Sanity)
🌐 Readme in other languages
English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe
🤝 Community
Intlayer is built with and for the community and we’d love your input!
- Have a suggestion? Open an issue
- Found a bug or improvement? Submit a PR
- Need help or want to connect? Join our Discord
You can also follow us on :
[](https://discord.gg/528mBV4N)
[](https://www.linkedin.com/company/intlayerorg)
[](https://www.instagram.com/intlayer/)
[](https://x.com/Intlayer183096)
[](https://www.youtube.com/@intlayer)
[](https://www.tiktok.com/@intlayer)
Contribution
For more detailed guidelines on contributing to this project, please refer to the CONTRIBUTING.md file. It contains essential information on our development process, commit message conventions, and release procedures. Your contributions are valuable to us, and we appreciate your efforts in making this project better!
Contribute on GitHub, GitLab, or Bitbucket.
Thank You for the Support
If you like Intlayer, give us a ⭐ on GitHub. It helps others discover the project! See why GitHub Stars matter.