Wrapping strings in t() was the easy part of translating my React app
I tried getting an AI agent to internationalize a side project and spent longer checking its diff than it would have taken me to do it myself. It did the work. It also picked the languages, decided where the language files went, and chose Simplified Chinese without asking. None of that was wrong exactly, but I had to read every changed file to find out. So I started doing it properly, and then I…
Translating a React app without proper internationalization tools can be an arduous task. For each string, a developer must locate the text in the JSX code, generate a unique key, replace the string with `t(the_key)`, add the key and English text to the `en.json` file, and translate the key into other languages. While steps 1-4 are relatively straightforward, step 5 often introduces issues that are not immediately apparent.
Plural forms vary across languages, with English having only two forms (1 item, 2 items), while Russian requires four different forms based on the last digits of the number. This discrepancy can lead to errors if the appropriate forms are not present in the translation file. Machine translation and AI models may also incorrectly translate placeholders, such as `{{name}}`, leading to empty gaps in the translated text.
Furthermore, translating HTML markup within sentences can be problematic, as languages may place elements differently. For instance, the link to terms and conditions may need to be repositioned in other languages. In the React-i18next library, these elements are often wrapped in a `Trans` component, preserving their positioning across languages.
React codebases can contain strings that do not appear as regular text, such as class names, URLs, console logs, and product names. Translating these elements can break styling or render incorrect information in other languages. Developers must be vigilant when deciding which elements to translate and which to leave unchanged.
Additionally, Chinese (Simplified vs. Traditional) can present unique challenges, as the written language differs between regions. Developers must account for these differences when creating translation files. The location of language files, whether in `src/locales` or `public/locales`, depends on how the application loads them. In Next.js with the App Router, `useTranslation()` does not function in server components, which can lead to unexpected behavior if an AI agent makes these decisions without proper consideration.
To streamline the translation process, a developer created the `guided-i18n` tool. This VS Code extension automates the five essential steps of internationalization, providing a checklist for every string and key before any changes are made. The extension writes the translated JSON files and uses the user's API key to translate the strings.
Every translation is verified for placeholders, tags, and plural forms, and any failures are reported instead of being written to the files. The extension ensures that only the modified strings and a brief context (file path, component name) are sent to the translation model, preventing the leakage of sensitive information.
`guided-i18n` is currently limited to React applications using the `react-i18next` library and JSON files for translations. It costs minimal resources, even for large projects, and is available as a free extension on the VS Code Marketplace and Open VSX for Cursor and Windsurf. Developers are encouraged to provide feedback on any issues or inaccuracies the tool may encounter, as their input will help improve its functionality.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
