> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lazylocales.com/llms.txt
> Use this file to discover all available pages before exploring further.

# i18next Integration

> Load translations in your application with i18next

LazyLocales works seamlessly with [i18next](https://www.i18next.com/) and other i18n libraries. The CLI writes translated JSON files directly to your project, which are then bundled or loaded at runtime.

## Setup

<Steps>
  <Step title="Install dependencies">
    ```bash theme={null}
    npm install i18next react-i18next
    ```
  </Step>

  <Step title="Run LazyLocales translation">
    Use the CLI to generate translated locale files:

    ```bash theme={null}
    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
    ```
  </Step>

  <Step title="Configure i18next to load local files">
    Import your locale files directly:

    ```typescript i18n.ts theme={null}
    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;
    ```

    <Info>
      For dynamic loading with code splitting, use `i18next-http-backend` pointed at your locale files served from `/public/locales/` or your CDN.
    </Info>
  </Step>

  <Step title="Use translations in your components">
    ```tsx theme={null}
    import { useTranslation } from 'react-i18next';

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

## Dynamic loading from public directory

If you prefer to load translations dynamically at runtime, configure `i18next-http-backend` to fetch from your public directory:

```bash theme={null}
npm install i18next-http-backend
```

```typescript i18n.ts theme={null}
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:

```yaml .github/workflows/translate.yml theme={null}
- name: Translate
  run: npx lazylocales translate --json
  env:
    LAZYLOCALES_API_KEY: ${{ secrets.LAZYLOCALES_API_KEY }}
```

See the [CI/CD guide](/integrations/ci-cd) for complete examples.