# Multiple Translation Files

One of the advantages of react-i18next is based on i18next it supports the separation of translations into multiple files - which are called namespaces in i18next context -> as you're accessing keys from a namespace defining that as a prefix:

So while this takes the translation from the defined default namespace:

{% tabs %}
{% tab title="JavaScript" %}

```jsx
i18next.t('look.deep');
```

{% endtab %}

{% tab title="TypeScript" %}

```tsx
i18next.t($ => $.look.deep);
```

{% endtab %}
{% endtabs %}

This will lookup the key in a namespace (file) called common.json:

{% tabs %}
{% tab title="JavaScript" %}

```jsx
i18next.t('common:look.deep'); // not recommended with ns prefix when used in combination with natural language keys
// better use the ns option:
i18next.t('look.deep', { ns: 'common' })
```

{% endtab %}

{% tab title="TypeScript" %}

```tsx
i18next.t($ => $.look.deep, { ns: 'common' })
```

{% endtab %}
{% endtabs %}

In order to use multiple namespaces/translation files, you need to specify it when calling [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) :

```javascript
const { t } = useTranslation(['translation', 'common']);
```

[`withTranslation`](https://react.i18next.com/latest/withtranslation-hoc):

```javascript
withTranslation(['translation', 'common'])(MyComponent);
```

or [`Translation`](https://react.i18next.com/latest/translation-render-prop):

{% tabs %}
{% tab title="JavaScript" %}

```jsx
<Translation ns={['translation', 'common']}>
{
  (t) => <p>{t('look.deep', { ns: 'common' })}</p>
}
</Translation>
```

{% endtab %}

{% tab title="TypeScript" %}

```tsx
<Translation ns={['translation', 'common']}>
{
  (t) => <p>{t($ => $.look.deep, { ns: 'common' })}</p>
}
</Translation>
```

{% endtab %}
{% endtabs %}

## Separating translation files

In i18next you have a lot of options to add translations on init, in your code calling API methods or using one of the backend implementation. For a detailed write up check out the ["Add or load translation guide on i18next.com"](https://www.i18next.com/how-to/add-or-load-translations).

With react-i18next you can use any of the components passing down the `t` function to your components to load namespaces:

* [useTranslation (hook)](/latest/usetranslation-hook.md)
* [withTranslation (HOC)](/latest/withtranslation-hoc.md)
* [Translation (render prop)](/latest/translation-render-prop.md)

All take arguments to define which namespaces to load and will Suspense rendering until those got loaded.

So you do not need to load all translations upfront enabling you to create huge react based applications without slowing down loading of the first page cause all translations need to be loaded upfront (hello other i18n implementations).

## Manage your translations with a management GUI

### [**locize**](https://www.locize.com?utm_source=react_i18next_com\&utm_medium=gitbook\&utm_campaign=guides_multiple_translation_files) is the perfect translation management tool for your [**i18next**](https://www.i18next.com) project

#### ➡️ [i18next](https://www.i18next.com/) + [locize](https://www.locize.com/?utm_source=react_i18next_com\&utm_medium=gitbook\&utm_campaign=guides_multiple_translation_files) = [true continuous localization](https://www.locize.com/how-it-works?utm_source=react_i18next_com\&utm_medium=gitbook\&utm_campaign=guides_multiple_translation_files#continuouslocalization)

[Here](https://github.com/locize/react-tutorial) you can find a step by step guide, which will unleash the full power of i18next in combination with locize.\
See how your developer experience with this localization workflow [could look like](https://youtu.be/osScyaGMVqo).\
There's also the possibility to have an [even more focused developer experience](https://youtu.be/VfxBpSXarlU), with the help of the [auto-machinetranslation workflow](https://www.locize.com/docs/automatic-translation?utm_source=react_i18next_com\&utm_medium=gitbook\&utm_campaign=guides_multiple_translation_files) and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also [automatically translated](https://youtu.be/VfxBpSXarlU) into the target languages using machine translation (like [Google Translate](https://cloud.google.com/translate)).

{% embed url="<https://youtu.be/osScyaGMVqo>" %}

{% embed url="<https://youtu.be/VfxBpSXarlU>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://react.i18next.com/guides/multiple-translation-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.