DEV Community

Ibrahim Demir
Ibrahim Demir

Posted on

How to Add 56 Languages to Your React App in 5 Minutes

#react #i18n #javascript #tutorial

You've built a React app. Your users speak different languages. You know you need i18n but the setup feels like a weekend project.

It doesn't have to be. Here's how to go from zero to 56 languages in about 5 minutes.

What We'll Build

We'll take a React app with hardcoded English strings and:

  1. Set up react-i18next
  2. Extract all translatable strings
  3. Translate them into 56 languages with one command
  4. See the result

Prerequisites

  • A React app (Create React App, Vite, Next.js - doesn't matter)
  • Node.js 18+
  • 5 minutes

Step 1: Install react-i18next 

npm install react-i18next i18next
Enter fullscreen mode Exit fullscreen mode

Create src/i18n/i18n.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './en-US.json';

i18n.use(initReactI18next).init({
  resources: { en: { translation: en } },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

export default i18n;
Enter fullscreen mode Exit fullscreen mode

Import it in your entry point:

// src/main.tsx or src/index.tsx
import './i18n/i18n';
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Your Source Strings

Create src/i18n/en-US.json with your app's text:

{
  "welcome": {
    "title": "Welcome to My App",
    "subtitle": "The best app for doing things"
  },
  "nav": {
    "home": "Home",
    "settings": "Settings",
    "logout": "Log out"
  },
  "dashboard": {
    "greeting": "Hello, {{name}}",
    "stats": "You have {{count}} items"
  }
}
Enter fullscreen mode Exit fullscreen mode

Then use the useTranslation hook in your components:

import { useTranslation } from 'react-i18next';

function Dashboard({ name, count }) {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('dashboard.greeting', { name })}</p>
      <p>{t('dashboard.stats', { count })}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Tip: If you have an existing app with hundreds of hardcoded strings, run localingos extract. It detects your framework and generates an AI prompt that does the refactoring for you.

Step 3: Install Localingos and Sync 

npm install -g localingos
localingos init
Enter fullscreen mode Exit fullscreen mode

The wizard asks for your API key and project ID (get both at localingos.com - free, no credit card).

Now sync:

localingos sync
Enter fullscreen mode Exit fullscreen mode

That's it. Check your src/i18n/ directory:

src/i18n/
├── en-US.json          ← your source
├── es-ES.json          ← Spanish
├── fr-FR.json          ← French
├── de-DE.json          ← German
├── ja-JP.json          ← Japanese
├── zh-CN.json          ← Chinese
├── pt-BR.json          ← Portuguese
├── ar-SA.json          ← Arabic
└── ... (56 locales)
Enter fullscreen mode Exit fullscreen mode

Step 4: Load the Translations

Update your i18n config to load all locales:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const localeFiles = import.meta.glob('./*.json', { eager: true });
const resources = {};
for (const [path, module] of Object.entries(localeFiles)) {
  const locale = path.replace('./', '').replace('.json', '');
  resources[locale] = { translation: module.default || module };
}

i18n.use(initReactI18next).init({
  resources,
  lng: navigator.language || 'en-US',
  fallbackLng: 'en-US',
  interpolation: { escapeValue: false },
});

export default i18n;
Enter fullscreen mode Exit fullscreen mode

Add a language switcher:

import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <select value={i18n.language} onChange={e => i18n.changeLanguage(e.target.value)}>
      <option value="en-US">English</option>
      <option value="es-ES">Español</option>
      <option value="fr-FR">Français</option>
      <option value="ja-JP">日本語</option>
      <option value="zh-CN">中文</option>
    </select>
  );
}
Enter fullscreen mode Exit fullscreen mode

What About Placeholders?

Notice {{name}} and {{count}} in our source strings? Localingos validates that placeholders survive translation. If the AI mangles them, it retries with a corrective prompt. If that fails, it falls back to a different model. Your variables are safe.

Keep It in Sync

Add to your CI pipeline so translations stay up to date:

# .github/workflows/localingos-sync.yml
- name: Sync translations
  run: npx localingos sync
  env:
    LOCALINGOS_API_KEY: ${{ secrets.LOCALINGOS_API_KEY }}
Enter fullscreen mode Exit fullscreen mode

Or if you use an AI coding agent (Cursor, Copilot, Claude Desktop), the built-in MCP server lets you say "sync my translations" and it just works.

Recap

  1. npm install react-i18next i18next - set up the i18n library
  2. Create en-US.json with your source strings
  3. localingos sync - get 56 languages back
  4. Load the locale files and add a language switcher

Total time: about 5 minutes. Total cost: free (5,000 words included, no credit card).

Localingos — AI-powered translations for developers. One command, 56 languages.

Top comments (0)