How to localize a React app

i18n in React

The usual setup uses react-i18next. react-i18next loads one or more JSON resource files (i18next calls them “namespaces”), looks keys up at runtime, and re-renders when the language changes. Keys can be nested with dot notation, and dynamic values use {{double-brace}} interpolation.

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import en from './locales/en/translation.json'
import de from './locales/de/translation.json'

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, de: { translation: de } },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false }, // React already escapes
})

import { useTranslation } from 'react-i18next'

export function Greeting() {
  const { t } = useTranslation()
  return <h1>{t('greeting', { name: 'Sam' })}</h1>
}
// locales/en/translation.json → { "greeting": "Hello, {{name}}!" }

Translate it with nlit

1. 1Add your source-language strings to nlit as keys (import your existing files, or start fresh).
2. 2Run AI auto-translate into every target language — the credit cost is shown before each run, and your glossary keeps brand terms intact.
3. 3Review and approve, then pull the files into your repo with the CLI.

# .nlit.yaml
format: json-nested      # i18next-friendly nested JSON
output_dir: src/locales
platform: web
languages:
  - de
  - fr
  - ja

src/locales/
  de/
    translation.json
  fr/
    translation.json
  ja/
    translation.json

Format for React: json-nested. See the CLI docs for every format and flag.

Things to watch for

• Plurals: don’t hand-roll count logic — mark the key as plural in nlit so each language gets the right CLDR forms (English has 2, Russian has 4).
• Interpolation: keep nlit’s {{name}} placeholders intact when translating — the glossary and AI auto-translate preserve them automatically.
• Namespaces map to nlit modules: split large apps into modules (common, onboarding, settings) and they pull as separate JSON files.

FAQ