Internationalising your React/NextJS application has never been easier since Intlayer

Intlayer is an intlayernationalisation solution that allow the declaration of your content everywhere in your code. It converts declaration of multilingual content to integrate easily in your code.

Intlayer addresses:

• Solution covering Vite+React, Create React App, or NextJS environement

• Management of Server Components

• TypeScript validation and autocompletion support

For more details: Interest of Intlayer

Example of usage

.
├── ClientComponent
│   ├── index.content.ts
│   └── index.tsx
└── ServerComponent
    ├── index.tsx
    └── index.content.ts

// ./ClientComponent/index.content.ts

import { DeclarationContent, t } from "intlayer";

const clientComponentContent: DeclarationContent = {
  id: "client-component",
  myTranslatedContent: t({
    en: "Hello World",
    fr: "Bonjour le monde",
    es: "Hola Mundo",
  }),
};

export default clientComponentContent;

// ./ClientComponent/index.tsx
"use client";

import { useIntlayer } from "next-intlayer";

export const ClientComponent = () => {
  const { myTranslatedContent } = useIntlayer("client-component");

  return <span>{myTranslatedContent}</span>;
};

Why Choose Intlayer?

Intlayer integrates better into the React ecosystem, making it possible to declare your content at the same level as your component. This way, you can easily copy your code between your applications without having to search for the dictionaries related to that code.

While the other internationalisation solutions require writing JSON dictionaries for each language available for your application, Intlayer simplifies this by declaring the content through a simple JavaScript file.

Using the power of TypeScript, you can also be sure that no translations are missing in your declaration files.

How to integrate Intlayer

To see how to integrate Intlayer into your application, I invite you to consult the online documentation corresponding to your environment:

• Intlayer + NextJS

• Intlayer + React (Create React App)

• Intlayer + React (Vite)

For each of these environments, setting up your application will take no more than 10 minutes.

Once your content is written in your declaration file, a simple hook allows you to use your content in your components.

And that’s it! Your content will be automatically translated according to what has been declared in your declaration files.

Test it by yourself

Test it live with this interactive online example on CodeSandbox.

Support the projet

To share your comments, bugs, or suggestions:

• GitHub
• Website
• LinkedIn