Translate a React or Next.js app into English

The message files in a React or Next.js project

In a React or Next.js project, interface text lives in JSON files, one per language: public/locales/de/common.json with i18next and react-i18next, messages/fr.json with next-intl, or a file of ICU messages, often with flat keys, with react-intl. That file, exactly as it sits in your repository, is what you upload.

Manuce handles all three syntaxes: nested keys ("checkout": { "cta": "Bezahlen" }), i18next interpolation ({{name}}) and ICU messages in react-intl and next-intl ({count, plural, one {# Artikel} other {# Artikel}}). Keys, variable names and ICU structure stay untouched; only the wording is translated.

The price is based on the words in the values, with keys and tags excluded, so a deeply nested file with long keys such as dashboard.settings.notifications.title costs no more than a flat one. English is charged at the base rate (×1 coefficient).

One React-specific limit: only text in these files is translated. Strings hard-coded in .tsx components, or written directly in Next.js generateMetadata, are not in the file. Move them into your messages first if they need to appear in English.

What changes when the target is English

• Plurals. English has two CLDR categories, one and other. Many source languages have more: French uses one, many and other; Polish adds few. The categories do not line up either: in French, 0 falls under one, whereas in English it is other («0 files»). With i18next, every plural key needs an _other form: items_one gives «{{count}} item», items_other gives «{{count}} items». Extra forms such as _few or _many carried over from the source stay in the file but are never selected for en.
• Punctuation. French spaces before colons and question marks disappear («Total :» becomes «Total:»), and French « » or German „ “ quotation marks give way to English ones.
• British or American. The difference comes down to a few words (colour/color, cancelled/canceled, organise/organize) and the locale code, en-GB, en-US or plain en. Decide which audience you are writing for and check it in the free sample.
• Length. English usually runs 10 to 15% shorter than French, and often shorter than German or Spanish: «Enregistrer les modifications» becomes «Save changes». Buttons gain room, but one-word labels can turn ambiguous: «Order» may mean a purchase or a sort order.
• Word order. A sentence split across several keys («Hello», then the name, then «welcome back») translates badly. Keep it as one string with {{name}}, or use the Trans component, so English can place the variable where it belongs.

What Manuce returns, and what it does not do

You get back the same file in the same format: indentation, key order, quotation marks, comments, line endings, encoding and BOM preserved. Only the values change. The file goes straight into public/locales/en/, or alongside your source file as messages/en.json. A diff against the source shows nothing but value lines.

Every translated value is checked against the source: if a {{count}}, a {name} or a rich-text tag such as <0> or <b> goes missing or changes, the mismatch is caught. If it persists, the source value is kept and the report says so. A string left in the source language is easy to spot in testing; a misspelt variable would break rendering.

Not translated: keys, empty values, URLs, email addresses, numbers, colours, date formats ("dateFormat": "dd/MM/yyyy" stays as it is), identifiers and anything marked as non-translatable. The report lists the strings translated and those left unchanged, with the reason.

Manuce does not extract text from your components, configure locales in your Next.js routing, add plural keys missing from the source or switch your date formats to US conventions: those settings remain on your side.

Preparing the file and checking it in the app

• Start from the most recent source file and make sure it is valid JSON (no trailing comma after the last entry).
• Check that every plural key in the source has an _other form; without it, the English file will not have one either.
• Merge sentences split into fragments into single values.
• Once integrated, view the relevant screens with 0, 1 and 2 items to test plurals.
• Format dates and numbers with Intl.DateTimeFormat and Intl.NumberFormat for the locale: «1 234,56» becomes «1,234.56», and 03/04 reads as 3 April in en-GB but 4 March in en-US.
• In Next.js, make sure English pages carry lang="en" on the html element, then go through the report and deal with any strings still in the source language.

In practice

1. Take the source-language message file from your repository (fr.json, common.json or equivalent).
2. Upload it to Manuce and review the quote and the free English sample.
3. Download the English file and the report of translated and unchanged strings.
4. Place the file in the English locale folder and test plurals, variables, dates and numbers.