Internationalize (i18n) your website React and Next.js

Intlayer is an internationalization library designed specifically for JavaScript developers. It allows the declaration of your content throughout your code. It converts multilingual content declarations into structured dictionaries, making integration easy. Using TypeScript, Intlayer strengthens your development and enhances efficiency.

Why to chose Inlyayer?

Free and Open Source

Intlayer is free and open source, allowing you to use it for free and contribute to suit your needs.

JavaScript-Powered Content Management

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

Type-Safe Environment

Leverage TypeScript to ensure all your content definitions are precise and error-free.

Declaration at the component level

Keep your translations close to their respective components, enhancing maintainability and clarity.

Simplified Setup

Get up and running quickly with minimal configuration, especially optimized for Next.js projects.

Integrated CMS

Edit your content on your website with an integrated CMS directly on your website. Boost content generation thanks to AI.

Codebase

Visual Editor

Multilingual

Markdown

// src/component/client/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Título de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
Visual Editor

Improve code maintainability by keeping your content definitions close to your components. Reduce redundancy, enhance clarity, and simplify updates with a structured approach that makes your code easier to manage and scale over time.

Leverage the free visual editor to build and manage your site effortlessly. Create, edit, and organize components and pages without touching code, making it easier for content managers and developers to collaborate efficiently.

Expand your reach with built-in translation support. Easily translate your content using an intuitive interface, ensuring seamless multilingual experiences for your users without the hassle of managing multiple content versions manually.

Write content in Markdown for a seamless, structured approach to text formatting. Create and manage your site’s pages with ease, leveraging Markdown’s simplicity to maintain consistency and enhance readability across your platform.

Available on

          Try the live demo

          Frequently asked questions

          What is internationalization (i18n)?

          Internationalization (i18n) is the process of designing and developing applications like Next.js, react, or express to support multiple languages easily. It enables you to create multilingual websites by simplifying the translation process. Tools like TypeScript make it easier to implement i18n, allowing for efficient and easy adaptation of your application to different languages and regions.Read more about i18n

          What are the main features of Intlayer?

          Intlayer simplifies configuration management and enables internationalization for various types of JavaScript applications, including server components. It allows content declaration directly alongside components, improving codebase maintainability. Additionally, Intlayer leverages TypeScript to prevent missing declarations. Finally, Intlayer offers a visual editor, enabling non-developers to edit website content, translate automatically using AI, and optimize the application’s SEO.Read more about Intlayer's features

          Is there a visual editor in Intlayer?

          Yes, Intlayer provides an optional visual editor for managing content easily without diving into code.Read more about the visual editor

          What is the cost of using Intlayer?

          Intlayer integrates a selection of free NPM packages along with a visual editor. Additionally, it offers a CMS for externalizing content. This CMS is free to use but includes additional features for Premium and Enterprise plan members.Read more about Intlayer plans

          What is Intlayer?

          Intlayer is a package that allows you to manage your multilingual website. It provides a set of tools and utilities that make it easy to set up your website for multilingual content and localization.Read more about Intlayer

          How does Intlayer integrate with Next.js?

          Intlayer integrates with Next.js to enable server-side rendering and static site generation, making multilingual content delivery more efficient.Read more about Next.js integration

          How can I contribute to Intlayer?

          You can contribute by submitting pull requests or reporting issues on the GitHub repository.Read more about how to contribute

          Which platforms does Intlayer support?

          Intlayer is available for React (including Create React App), Vite with React, Next.js, and Express. This ensures a seamless integration with modern JavaScript frameworks and server-side environments.Read more about the platforms supported