Stop 20 · Advanced TopicsTopics · 9/14

Internationalization (i18n)

In short

Your app is a hit, and now users want it in Hindi, Tamil and Bengali. If every string is hard-coded in JSX, that's a painful rewrite. i18n prepares your code for any language.

Architecting an app so it can support multiple languages and locales — extracting all UI text into translation files instead of hardcoding strings.

The jaadu dubs a cartoon film into a studio microphone, wearing big headphones.

Think of it like this

Dubbing a movie

The film is shot once. Later, voices are recorded in Telugu, Hindi and Tamil without reshooting a single scene. i18n sets up your app the same way: the screens stay the same, and only the language track gets swapped.

Watch it happen

Translating one line

Component

i18next

hi.json

t("cart.items",{count})

1/5The component asks for a key, never hard-coded text.

The big ideas

What you need to know

Keys, not hard-coded text

Components use keys like cart.checkout, and each language file maps keys to real text.

Plurals and variables

"1 item" vs "3 items" differs by language. Libraries handle plural rules and insert values for you.

Never glue sentences

Word order changes between languages. Translate the whole sentence with placeholders instead of joining pieces.

Use a library

react-i18next, next-intl and FormatJS handle loading languages, plurals and switching.

See it in code

Walk through the code

tsx

1// locales/en.json2// { "cart": { "items_one": "{{count}} item", "items_other": "{{count}} items" } }3 4// locales/hi.json5// { "cart": { "items_one": "{{count}} आइटम", "items_other": "{{count}} आइटम" } }6 7import { useTranslation } from "react-i18next";8 9export function CartCount({ count }: { count: number }) {10  const { t } = useTranslation();11  return <p>{t("cart.items", { count })}</p>; // "3 items" in English12}

1/3English file: one key per plural form.

With react-i18next, passing count makes it pick the right plural form for the current language. Adding a new language means adding a new JSON file.

Save yourself the pain

Common mistakes

Oops

Building sentences like t("hello") + " " + name + "!".

Do this instead

Use one key with a placeholder, like t("greeting", { name }), so translators can change the word order.

Oops

Designing buttons that only fit short English words.

Do this instead

Leave room for longer text. Many languages need more space for the same message.

Your mission

Make one page bilingual

~35 min

Quick check

Why shouldn't you translate "You have", the number and "new messages" as three separate strings?

Go deeper

1Extract hardcoded strings in a small project into a translation file (even just English).
2Add a second language and a language switcher using a library like `next-intl` or `react-i18next`.
3Learn to handle pluralization rules, which differ significantly across languages.