Skip to main content
LazyLocales works seamlessly with i18next and other i18n libraries. The CLI writes translated JSON files directly to your project, which are then bundled or loaded at runtime.

​
Setup

1

Install dependencies

npm install i18next react-i18next
2

Run LazyLocales translation

Use the CLI to generate translated locale files:
npx lazylocales translate
This writes files to your localesDir (e.g., public/locales/):
public/locales/
├── en.json          ← source
├── nl-NL.json       ← translated
├── fr-FR.json       ← translated
└── de.json          ← translated
3

Configure i18next to load local files

Import your locale files directly:
i18n.ts
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import nl from './locales/nl-NL.json';
import fr from './locales/fr-FR.json';
import de from './locales/de.json';

i18next
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      'nl-NL': { translation: nl },
      'fr-FR': { translation: fr },
      de: { translation: de },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18next;
For dynamic loading with code splitting, use i18next-http-backend pointed at your locale files served from /public/locales/ or your CDN.
4

Use translations in your components

import { useTranslation } from 'react-i18next';

function Greeting() {
  const { t } = useTranslation();
  return <h1>{t('greeting')}</h1>;
}

​
Dynamic loading from public directory

If you prefer to load translations dynamically at runtime, configure i18next-http-backend to fetch from your public directory: 
npm install i18next-http-backend
i18n.ts
import i18next from 'i18next';
import HttpBackend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';

i18next
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}.json',
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18next;
This loads translations from your public folder (e.g., /public/locales/nl-NL.json), enabling updates without rebuilding your app.

​
CI/CD integration

Keep translations up to date in your deployment pipeline:
.github/workflows/translate.yml
- name: Translate
  run: npx lazylocales translate --json
  env:
    LAZYLOCALES_API_KEY: ${{ secrets.LAZYLOCALES_API_KEY }}
See the CI/CD guide for complete examples.