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