How to Localize your React App with react-i18next

1. Create a React app

We'll add English and German to a small React app. react-i18next renders the messages, while i18nexus handles AI translation and keeps your team's copy in one place.

This example uses Vite and Node.js 22.13+ or 24 LTS. Skip the creation commands if you already have a browser-rendered React app.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install i18next@^26 react-i18next i18next-http-backend i18next-browser-languagedetector

2. Let i18nexus handle your translations

Write your copy once. i18nexus stores your source strings, AI translates them into your project languages, and gives your team a place to review the results. The CLI brings those translations into your app.

To create a new i18nexus project, run this from your app directory:

npx @i18nexus/cli@latest init

For this example, use these choices:

• Sign in or create an account in the browser opened by the CLI.
• Use i18next as your library. Installed libraries are detected automatically.
• For a new app, choose that you do not have translation JSON yet. Set English (en) as the base language and German (de) as an additional language.
• Use one namespace: common.
• Accept automatic sync in package.json. This installs the CLI locally and adds development and build sync scripts.

When setup finishes, add the project API key printed by the CLI to .env in the app root. Add .env to .gitignore:

I18NEXUS_API_KEY="your_project_api_key"

Add your first two strings

Open the dashboard link printed by the CLI and add these English strings in the common namespace. The key is what your code uses; the value is what your users read.

Expand

• welcome: Welcome to my app!
• greeting: Hello, {{name}}!

Save each string, then expand its row to see the translations. You can review and edit them in the same place as your source text.

Expand

Prefer working with an AI coding assistant? Choose MCP setup during init, then ask your assistant to create these same strings through i18nexus. The MCP guide explains that workflow. The dashboard remains available for you and your team.

Give AI translation a moment to finish, then download the generated JSON before adding the imports in the next step:

npx i18nexus pull

You should now have public/locales/en/common.json and its German equivalent. These are generated files: make future string changes in i18nexus and let the CLI sync them.

3. Connect i18next

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

export const ready = i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    supportedLngs: ['en', 'de'],
    fallbackLng: 'en',
    load: 'languageOnly',
    ns: ['common'],
    defaultNS: 'common',
    detection: {
      order: ['localStorage', 'navigator'],
      caches: ['localStorage']
    },
    backend: {
      loadPath: `${import.meta.env.BASE_URL}locales/{{lng}}/{{ns}}.json`
    },
    interpolation: {escapeValue: false}
  });

export default i18n;

The HTTP backend loads the JSON served by your own app from public/locales. The detector checks a saved preference first, then the browser language. Unsupported languages fall back to English.

import {StrictMode, Suspense} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
import {ready} from './i18n';
import './index.css';

ready.then(() => {
  createRoot(document.getElementById('root')).render(
    <StrictMode>
      <Suspense fallback={<p>Loading…</p>}>
        <App />
      </Suspense>
    </StrictMode>
  );
});

4. Render text and switch languages

import {useEffect} from 'react';
import {useTranslation} from 'react-i18next';

export default function App() {
  const {t, i18n} = useTranslation('common');

  useEffect(() => {
    document.documentElement.lang = i18n.resolvedLanguage || 'en';
  }, [i18n.resolvedLanguage]);

  return (
    <main>
      <h1>{t('welcome')}</h1>
      <p>{t('greeting', {name: 'Sam'})}</p>
      <select
        aria-label="Language"
        value={i18n.resolvedLanguage}
        onChange={event => i18n.changeLanguage(event.target.value)}>
        <option value="en">English</option>
        <option value="de">Deutsch</option>
      </select>
    </main>
  );
}

Calling changeLanguage updates components using useTranslation. The detector saves the choice in local storage for the next visit. Refresh the page after CLI updates if the HTTP backend has already cached the messages.

Run npm run dev and try the language switcher. The welcome message and greeting should change together:

EnglishExpand

DeutschExpand

Add plurals when you need them

Create a plural set named items in the i18nexus dashboard. Use {{count}} item for English one and {{count}} items for other.

Render it with t('items', { count: 3 }). i18nexus generates the _one, _other, and other language-specific forms in the output JSON; your code uses the root key items.

Keep translations in sync

The sync script added by the CLI runs i18nexus listen alongside your app. It pulls on startup and updates the generated JSON when strings or translations change in i18nexus. Refresh the page if your app still shows a cached translation.

For deployment, set I18NEXUS_API_KEY in your build environment and run npm run build. The CLI-added prebuild script pulls the latest JSON before compilation. Install dev dependencies in the build stage so the CLI is available. Updates to bundled translations require a new build.

Keep adding source strings in the dashboard or through the i18nexus MCP. Your team can review and refine the AI translations in the same project. react-i18next documentation has the details for larger apps.