Declaration of Per-Locale Content Declaration in Intlayer

Intlayer supports two ways to declare multilingual content:

• Single file with all translations
• One file per locale (per-locale format)

This flexibility enables:

• Easy migration from other i18n tools
• Support for automated translation workflows
• Clear organization of translations into separate, locale-specific files

Per-Locale Format

This format is useful when:

• You want to version or override translations independently.
• You're integrating machine or human translation workflows.

You can also split translations into individual locale files by specifying the locale field:

import { t, Locales, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.ENGLISH, // Important
  content: { multilingualContent: "Title of my component" },
} satisfies Dictionary;

export default helloWorldContent;

import { t, Locales, type Dictionary } from "intlayer";

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.SPANISH, // Important
  content: { multilingualContent: "Título de mi componente" },
} satisfies Dictionary;

export default helloWorldContent;

Important: Make sure the locale field is defined. It tells Intlayer which language the file represents.

Note: In both cases, the content declaration file must follow the naming pattern *.content.{ts,tsx,js,jsx,mjs,cjs,json} to be recognized by Intlayer. The .[locale] suffix is optional and used only as a naming convention.

Global Configuration for Per-Locale Files

You can configure the global configuration for per-locale files by adding the following to your intlayer.config.ts file:

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

const config: IntlayerConfig = {
  dictionary: {
    locale: Locales.ENGLISH,
  },
};

export default config;

Using this configuration, all per-locale files will be generated with the default locale set to English. It also include generation of .content files using the extract command, and the compiler. (See Compiler or Extract for more information.)

Single File with Multiple Translations

This format is ideal for:

• Quick iteration in code.
• Seamless integration with the CMS.

This is the recommended approach for most use cases. It centralizes translations, making it easy to iterate and integrate with the CMS.

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

const helloWorldContent = {
  key: "hello-world",
  content: {
    multilingualContent: t({
      en: "Title of my component",
      es: "Título de mi componente",
    }),
  },
} satisfies Dictionary;

export default helloWorldContent;

Recommended: This format is best when using Intlayer's visual editor or managing translations directly in the code.

Mixing Formats

You can combine both declaration approaches for the same content key. For example:

• Declare your base content statically in a file like index.content.ts.
• Add or override specific translations in separate files such as index.fr.content.ts or index.content.json.

This setup is especially useful when:

• You want to define the initial content structure in code.
• You plan to enrich or complete translations later using the CMS or automated tools.

.
└── Components
    └── MyComponent
        ├── index.content.ts
        ├── index.content.json
        └── index.ts

Example

Here a multilingual content declaration file:

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

const helloWorldContent = {
  key: "hello-world",
  locale: Locales.ENGLISH,
  content: {
    multilingualContent: "Title of my component",
    projectName: "My project",
  },
} satisfies Dictionary;

export default helloWorldContent;

{
  "$schema": "https://intlayer.org/schema.json",
  "key": "hello-world",
  "content": {
    "multilingualContent": {
      "nodeType": "translation",
      "translation": {
        "fr": "Titre de mon composant",
        "es": "Título de mi componente"
      }
    }
  }
}

Intlayer merges multilingual and per-locale files automatically.

import { getIntlayer, Locales } from "intlayer";

const intlayer = getIntlayer("hello-world"); // Default locale is ENGLISH, so it will return the ENGLISH content

console.log(JSON.stringify(intlayer, null, 2));
// Result:
// {
//  "multilingualContent": "Title of my component",
//  "projectName": "My project"
// }

const intlayer = getIntlayer("hello-world", Locales.SPANISH);

console.log(JSON.stringify(intlayer, null, 2));
// Result:
// {
//  "multilingualContent": "Título de mi componente",
//  "projectName": "My project"
// }

const intlayer = getIntlayer("hello-world", Locales.FRENCH);

console.log(JSON.stringify(intlayer, null, 2));
// Result:
// {
//  "multilingualContent": "Titre de mon composant",
//  "projectName": "My project"
// }

Automatic Translation Generation

Use the intlayer CLI to auto-fill missing translations based on your preferred services.