React i18next JSON Translation: Structure & Auto-Translate Keys
react-i18next makes frontend internationalization
effortless, but translating nested JSON files manually or with raw machine
translation breaks {{variable}} interpolations
and plural keys (_one / _other). Here is how to structure and translate i18next JSON cleanly.
TL;DR — Key Takeaways
-
Machine translation alters
{{count}}into translated words or adds spaces ({ { count } }), throwing runtime undefined errors in React. -
i18next plural keys like
item_one/item_othermust remain untouched while their string values are localized. - StrucTrans parses i18next JSON files recursively, preserving syntax, nested objects, and variables 100%.
3 Bottlenecks in React i18next Localization
When scaling React or Next.js applications into multiple languages, developers frequently encounter these breakages when using generic translation tools:
Interpolation Corruption
Google Translate turns {{userName}} into {{nombreUsuario}},
breaking the variable matching contract in t('welcome', { userName }).
Translated Suffix Identifiers
i18next uses suffixes like _one and
_other to infer plurals. Translating
the key cart_item_other to cart_item_otro completely breaks i18next plural resolution.
Mangled Key Objects
Nested keys like nav.header.dashboard get translated as dictionary words, destroying your JSON object
schema.
Raw Translation vs StrucTrans AST-Safe i18next Output
{
"saludo": "¡Hola, {{ nombre }}!",
"item_uno": "1 artículo",
"item_otro": "{{ contar }} artículos"
}Keys & suffixes translated, variable placeholders broken with spaces.
{
"greeting": "¡Hola, {{name}}!",
"item_one": "1 artículo",
"item_other": "{{count}} artículos"
}Keys & suffixes locked 100%, interpolations preserved intact.
Setting Up & Auto-Translating React i18next Files
Follow this step-by-step guide to structure and translate your React i18n files seamlessly.
Organize Namespace Directory Hierarchy
In Next.js or React Vite projects using i18next-http-backend, place your base translation files in structured namespace
folders:
public/
locales/
en/
common.json
dashboard.json
auth.json
es/
de/Format Base JSON with Clean Keys & Variables
Write clean, semantic nested keys in public/locales/en/common.json:
{
"nav": {
"home": "Home",
"settings": "Settings"
},
"user": {
"welcome": "Welcome back, {{name}}",
"unreadMessages_one": "You have 1 unread message",
"unreadMessages_other": "You have {{count}} unread messages"
}
}Translate Online via StrucTrans
Drop your common.json file into StrucTrans JSON Translator. Choose your target languages (e.g. Spanish, German, French,
Ukrainian).
StrucTrans isolates keys like unreadMessages_one and tokens like {{count}} while
translating string values into natural, fluent target language prose.
Consume in React Components with useTranslation()
Place translated files in public/locales/es/common.json. Your React components instantly render translated text with
full variable type safety:
import { useTranslation } from 'react-i18next';
export function Header({ userName, count }) {
const { t } = useTranslation('common');
return (
{t('user.welcome', { name: userName })}
{t('user.unreadMessages', { count })}
);
}Frequently Asked Questions
How do I translate react-i18next JSON files without breaking {{variables}}?
React-i18next uses double-curly braces like {{username}} or {{count}} for interpolation. StrucTrans automatically tokenizes double curly braces, preventing translation engines from adding spaces or translating internal variable names.
Does auto-translation preserve i18next plural keys like _one and _other?
Yes. Key suffixes like key_one, key_other, key_zero, key_few, and key_many are structural identifiers in i18next. StrucTrans locks these key names entirely, translating only the target string values.
Can I translate nested i18next namespaces and multi-level JSON objects?
Yes. StrucTrans recursively parses complex nested JSON structures, preserving objects, arrays, and namespace hierarchies while keeping key paths 100% intact.
Is StrucTrans free for React and Next.js developers?
Yes. You can upload and translate react-i18next JSON files directly online for free without account creation or API setup.
Auto-Translate Your React i18n JSON Files Now
Safeguard your double-curly brace variables and i18next plural keys while translating into 30+ languages.