aymericzip / intlayer

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 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 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 | --- 📦 Installation Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization. ⚡ Quick Start (Next.js) Get the full guide → 🎥 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 Why Intlayer? Introduction ⚙️ Concept How Intlayer Works Configuration Intlayer CLI Compiler Intlayer Editor Intlayer CMS Dictionary Per-Locale Content Declaration File Translation Enumeration Condition Nesting Markdown Function Fetching Insertion File 🌐 Environment Intlayer with Next.js 16 Next.js 15 Next.js 14 (App Router) Next.js Page Router Next.js using Compiler React CRA Vite + React Vite + React using Compiler <a hr _...truncated for preview_