Internationalization (i18n)

Files: src/config/config.toml, src/config/language.json, src/i18n/<lang>.json, src/config/menu.<lang>.json, src/content/**/<language>/ · Skill level: Beginner

Techlo ships in English, French, and Arabic. Arabic is the right-to-left example, so see RTL & Arabic for how direction works. The Arabic text is a machine translation, so have a native speaker review it before you publish.

Everything reads the language list from src/config/language.json, so you never list languages anywhere else. Each language has its own content folder, menu file, and interface labels.

In the Tina edition, you edit every language’s content at /admin/, and its menu and labels under Menus and Interface labels. In the Sanity edition, content, Menus, and Interface labels are documents in the Studio, one set per language. language.json stays in the project in every edition.

Language Settings

# Restart your server when you change these values
[settings.multilingual]
  enable               = true
  defaultLanguage      = "en"
  disableLanguages     = [""] # Languages to turn off, such as ["fr", "ar"]
  showDefaultLangInUrl = false

Setting	What it does
`enable`	Turns multiple languages on or off
`defaultLanguage`	The primary language
`disableLanguages`	Languages to turn off. Their files stay in the project
`showDefaultLangInUrl`	Adds the default language’s code to its addresses, such as `/en/`

Each language has an entry in src/config/language.json:

{
  "languageName": "Fr",
  "languageCode": "fr",
  "contentDir": "french",
  "dir": "ltr",
  "ogLocale": "fr_FR",
  "dateLocale": "fr-FR",
  "weight": 2
}

dir is ltr or rtl, and it sets the direction of the page. ogLocale is the language code for social previews, and dateLocale sets the format for dates.

Add A Language

Run the language script. This example adds German. The script’s settings differ by edition.

In the Astro and Tina editions:

npm run generate-multilingual-content -- de --name Deutsch --content-dir german --date-locale de-DE --og-locale de_DE

In the Sanity edition:

npm run generate-multilingual-content -- --lang de --name Deutsch --dir-name german --locale de-DE --og-locale de_DE

For a right-to-left language, add --dir rtl.

It adds the language to language.json, and makes copies of your default language to translate. Then:

Astro: translate the new german/ content folders, src/i18n/de.json, and src/config/menu.de.json, then restart the dev server.
Tina: run npm run tina:generate, restart npm run dev, and translate the new german/ folders, Menus, and Interface labels in the editor.
Sanity: restart the dev server. The language appears in the Studio, with a copy of every default-language document to translate. Your other documents aren’t touched.

If you host on Netlify, each language needs a /de/* block in netlify.toml, so that a missing page shows that language’s 404 page. In the Astro and Tina editions, the script adds it for you. In the Sanity edition, add it yourself, as the other languages have.

Remove One Language

Add its code to disableLanguages, then restart the dev server. To remove Arabic:

[settings.multilingual]
  disableLanguages = ["ar"]

It leaves your site. In the Tina edition its files stay, and the editor still lists them. In the Sanity edition it stays listed in the Studio.

Keep Only Your Default Language

Astro: set enable = false in [settings.multilingual], run npm run toml:watch once, then run npm run remove-multilingual.
Tina: do the same, then run npm run tina:generate.
Sanity: run npm run remove-multilingual. The other languages’ documents stay in your project unless you add -- --delete-online, which deletes them and can’t be undone.

Internationalization (i18n)