Creation:2024-08-11Last update:2025-06-29

Reference this doc to your favorite AI assistantChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

Add the MCP Server to your AI Assistant

By integrating the Intlayer MCP Server to your favourite AI assistant can retrieve all the doc directly from ChatGPT, DeepSeek, Cursor, VSCode, etc.

See MCP Server doc

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Translation

Defining Translations

The t function in intlayer allows you to declare content in multiple languages. This function ensures type safety, raising an error if any translations are missing, which is particularly useful in TypeScript environments.

Here's an example of how to declare content with translations.

**/*.content.ts

Copy code

Copy the code to the clipboard

import { t, type Dictionary } from "intlayer";interface Content {  welcomeMessage: string;}export default {  key: "multi_lang",  content: {    welcomeMessage: t({      en: "Welcome to our application",      fr: "Bienvenue dans notre application",      es: "Bienvenido a nuestra aplicación",    }),  },} satisfies Dictionary<Content>;

Configuration for Locales

To ensure proper translation handling, you can configure the accepted locales in intlayer.config.ts. This configuration allows you to define the languages that your application supports:

intlayer.config.ts

Copy code

Copy the code to the clipboard

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

Using Translations in React Components

With react-intlayer, you can use translations in React components. Here's an example:

**/*.tsx

Copy code

Copy the code to the clipboard

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const content = useIntlayer("multi_lang");  return (    <div>      <p>{content.welcomeMessage}</p>    </div>  );};export default MyComponent;

This component fetches the corresponding translation based on the current locale set in your application.

Custom Content Objects

intlayer supports custom content objects for translation, allowing you to define more complex structures while ensuring type safety. Here's an example with a custom object:

**/*.content.ts

Copy code

Copy the code to the clipboard

import { t, type Dictionary } from "intlayer";interface ICustomContent {  title: string;  content: string;}const customContent = {  key: "custom_content",  content: {    profileText: t<ICustomContent>({      en: {        title: "Page Title",        content: "Page Content",      },      fr: {        title: "Titre de la Page",        content: "Contenu de la Page",      },      es: {        title: "Título de la Página",        content: "Contenido de la Página",      },    }),  },} satisfies Dictionary;export default customContent;

Doc History

Version	Date	Changes
5.5.10	2025-06-29	Init history

Get Started