i18next Integration - LazyLocales Documentation

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

Install dependencies

npm install i18next react-i18next

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

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.

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.

​Setup

​Dynamic loading from public directory

​CI/CD integration

Setup

Dynamic loading from public directory

CI/CD integration