Namespaces

Namespaces are a powerful feature in the i18next internationalization framework and Locize, allowing you to organize your translations into multiple files. This makes it easier to manage, scale, and optimize your localization projects — especially as your app grows.

Why use namespaces?

While small projects may work with a single translation file, larger projects benefit from splitting translations into multiple namespaces. Reasons include:

Improved organization: Avoid losing track when you have hundreds of segments in one file
Faster load times: Only load the translations needed for a specific page or feature
Easier collaboration: Teams can work on different namespaces independently

We recommend creating multiple, smaller namespaces for better maintainability.

Semantic reasons

Group related segments together for clarity and reuse. For example:

common.json: Reusable UI elements like button labels ('save', 'cancel')
validation.json: All validation messages
glossary.json: Consistent terminology across your app (sample usage)

Technical/editorial reasons

Namespaces help you avoid loading all translations upfront, reducing initial load and improving performance. Common strategies include:

Namespace per view/page
Namespace per application section or feature set (e.g., admin area)
Namespace per module for lazy loading in single-page applications

Configuration and usage

Locize / i18next

You can configure i18next to use multiple namespaces and set a default namespace:

i18next.init({
  ns: ['common', 'moduleA', 'moduleB'],
  defaultNS: 'moduleA'
}, (err, t) => {
  i18next.t('myKey'); // key in moduleA namespace (default)
  i18next.t('myKey', { ns: 'common' }); // key in common namespace
  i18next.t('common:myKey'); // key in common namespace
});
// Load additional namespaces after initialization
i18next.loadNamespaces('myNamespace', (err, t) => { /* ... */ });

Advanced options include:

Calling the t function with multiple namespaces to look up a key
Setting fallback namespaces for missing keys

More details: Locize / i18next

react-i18next

With react-i18next, you can load and use specific namespaces in your components:

// Load a specific namespace
// the t function will be set to that namespace as default
const { t, i18n } = useTranslation('ns1');
t('key'); // looked up from namespace ns1
// Load multiple namespaces
const { t, i18n } = useTranslation(['ns1', 'ns2', 'ns3']);
t('key'); // looked up from ns1
t('key', { ns: 'ns2' }); // looked up from ns2

More details: react-i18next

locizify

locizify.init({
  namespace: 'myNamespace'
  ns: ['common', 'myNamespace'] // -> add additional namespaces to load
});

You can access a different namespace by setting the attribute i18next-options:

<div i18next-options='{"ns": "common"}'>
  <p>different namespace common is used</p>
  <p>all the way down</p>
</div>

Optionally you can set locizify to create a namespace per location/route.

locizify.init({
  namespaceFromPath: true
});

more details: locizify