Translate a React or Next.js App into German

What German does to a React interface

German text often runs 20 to 35% longer than English. The growth is worst in short labels: buttons, tabs, column headers. Compound nouns make it harder. "Access rights management" becomes Zugriffsrechteverwaltung, a single word that will not wrap by itself, and "Email notifications" becomes E-Mail-Benachrichtigungen.

• Hyphenation: CSS hyphens: auto only breaks German words correctly when the element or page carries lang="de". In Next.js, make sure the lang attribute on <html> follows the active locale.
• Capitals: every noun is capitalised, and nothing else. German has no title case, so it is Neues Projekt erstellen, not Neues Projekt Erstellen.
• Register: formal Sie is standard in business software ("Speichern Sie Ihre Änderungen"). Many consumer apps use informal du ("Speichere deine Änderungen"). Decide first, then check the register in the free sample.
• Punctuation and formats: quotation marks „…“, dates as 31.12.2025, numbers as 1.234,56 and amounts written as "12,90 €".

Plurals, placeholders and word order

German has only two CLDR plural categories, one and other. In i18next that gives:

"files_one": "{{count}} Datei"
"files_other": "{{count}} Dateien"

In ICU (react-intl, next-intl): {count, plural, one {# Datei} other {# Dateien}}.

Zero takes the plural ("0 Dateien"), as in English. If your source is French, though, it uses the singular there. Your source may also carry _many keys: from French, for instance. These stay in the German file, because the structure is never altered, but they are never selected for German and do no harm.

The real trap is strings assembled in code. t('delete') + ' ' + t('file') yields "Löschen Datei", whereas German puts the verb last: Datei löschen. Likewise, "The {{item}} was deleted" needs der, die or das depending on the gender of the inserted noun. Use one complete sentence per key ("{{item}} wurde gelöscht") or an ICU select.

What Manuce returns, and what it does not do

You get back the same file in the same format, ready to drop into locales/de/ or messages/de.json. Indentation, key order, quotes, comments, line endings, encoding and BOM are preserved. Only the values change.

• Nested keys, {{name}} interpolations, ICU arguments and tags are kept. This includes the <0>…</0> tags of Trans and <b> in react-intl.
• Every translated value is checked against the source, placeholders and tags included. If a mismatch persists, the source value is kept and the report says so.
• The following are left untranslated: keys, empty values, URLs, email addresses, numbers, colours, date formats, identifiers and anything marked as non-translatable. A value of "9.99" stays "9.99". German formatting should come from Intl.NumberFormat('de-DE') or the next-intl formatter.
• The report lists the strings translated, the strings left as they were, and why.

Manuce does not translate text hard-coded in your JSX or TSX components. It does not set up routing for the de locale or adjust your CSS. It does not produce sworn or certified translations either: have legal content such as terms of sale or an Impressum checked by a professional. Pricing counts the words in values only; keys and tags are excluded.

Preparing the files

• Move all copy into the JSON files. Look for strings still hard-coded in components, in Next.js metadata and in form validation messages.
• Remove concatenations like the one above. Each key should hold a full sentence with its placeholders.
• Validate the JSON. A trailing comma or an unescaped quote in en.json will carry over into de.json.
• Let keys give context. Use button.save rather than save: "Speichern" and "Gespeichert" are not interchangeable.
• Keep one file per namespace (common.json, checkout.json) to make the report easier to read.

Checking the app after delivery

1. Switch to de and start with dense screens: navigation, tabs, action buttons and table headers, at mobile width.
2. Look for overflow. A clipped "Abbrechen" or "Einstellungen" points to a fixed width that should become min-width.
3. Test plurals with 0, 1 and 2 items.
4. Read the report and deal with any values kept in the source language.
5. If you chose Sie, search for "du", "dein" and "deine" to catch a stray informal string, and vice versa.

In practice

1. Export the source-language JSON files, one per namespace.
2. Upload them to Manuce and check the quote and the free sample, including the register.
3. Download the German file and the report.
4. Place the file in the de locale folder and test dense screens and plurals.