Intlayer: A closer way to translate your application

Intlayer is an innovative internationalization framework designed to replace i18next for Next.js and React applications. It streamlines the process of internationalization with flexible content declaration and robust configuration options.

Why Intlayer?

Intlayer offers a more modern approach to internationalization compared to traditional frameworks like i18next. It is designed to fit seamlessly into Next.js and React projects, providing intuitive content declaration, robust configuration options, and a simpler setup process.

• Content Declaration: Declare content dictionaries in the same directory as your components, enhancing maintainability and reducing complexity. Learn more.
• Customizable Configuration: Intlayer allows you to customize various aspects of the framework, including internationalization, middleware, and content handling. Learn how to configure.
• Integration with Next.js and React: Intlayer integrates smoothly with Next.js and React applications. It also supports server-side rendering and dynamic routing. Explore Next.js integration | Explore React integration.
• Scalability and Consistency: With Intlayer, your content dictionaries are structured and consistent, reducing the chances of errors during development. This ensures a more reliable internationalization process.
• TypeScript Support: Intlayer provides full support for TypeScript, allowing for more type-safe code. This enhances developer productivity and code quality.

Getting Started

To start using Intlayer, follow these steps:

Installation

Install the necessary packages for your project:

npm install intlayer

yarn add intlayer

pnpm add intlayer

Declaring Your Content

Intlayer allows you to declare your content in various formats, including TypeScript, ECMAScript modules, CommonJS modules, and JSON. Here's an example of a content declaration using TypeScript:

import { t, type DeclarationContent } from "intlayer";

const exampleContent = {
  key: "example",
  content: {
    welcome: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Bienvenido",
    }),
  },
} satisfies DeclarationContent;

export default exampleContent;

For more examples and information on content declaration, see the documentation.

Integrating with Next.js

If you're using Next.js, Intlayer is designed to work seamlessly with it. The integration process involves setting up middleware, defining locale routes, and utilizing content dictionaries in your components.

Follow this guide to set up Intlayer with Next.js.

Integrating with Create React App

For Create React App users, Intlayer also provides an easy way to integrate internationalization. Learn how to set up Intlayer with Create React App.

Integrating with Vite + React

Intlayer is also compatible with vite and rollup environments. Check how to set up Intlayer with Vite + React.

Integrating with Express

If you're using Express, Intlayer provides a middleware that can be used to handle internationalization. Learn how to set up Intlayer with Express.

Configuration

Intlayer's configuration is highly customizable. You can define internationalization settings, middleware behavior, and more. The configuration file supports various formats like TypeScript, JavaScript, and JSON.

Here's an example configuration:

// intlayer.config.ts

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

For more information on configuring Intlayer, check the configuration documentation.

Using Intlayer with i18next

Intlayer can also export i18next dictionaries for projects that still rely on i18next for certain functionalities. This integration allows you to generate i18next dictionaries while still benefiting from Intlayer's flexible content declaration. Learn how to configure Intlayer for i18next.

CLI Commands

Intlayer comes with a CLI package that allows you to transpile your content declarations into dictionaries. You can run these commands to build your dictionaries:

npx intlayer build

To run in watch mode:

npx intlayer build --watch

For more information on the CLI and its usage, refer to the CLI documentation.

Conclusion

Intlayer offers a more flexible and modern approach to internationalization. Its seamless integration with Next.js and React, customizable configuration, and support for various content declaration formats make it a powerful choice for internationalization.

For additional resources, guides, and examples, explore the Intlayer documentation.

Live tutorial on YouTube