Sådan oversætter du i18next JSON-filer i React & Next.js (2026)

Du har lige afsluttet en React-app, der skal lanceres på 12 sprog inden næste fredag. Dine lokalisationsfiler ligger i public/locales/en/common.json, du har 340 nøgler pr. lokalitet, og tokens inde i dine strenge ser ud som {{userName}} og {{count}} spredt ud over indlejrede objekter. Du indsætter JSON'en i ChatGPT, og den returnerer {{ nombreUsuario }}, ekstra mellemrum og halvdelen af pluraliseringsnøglerne omdøbt. Din app crasher ved build.

Hvis du har forsøgt at automatisere i18next JSON-oversættelse, kender du denne smerte. JSON-formatet er fleksibelt, hvilket netop er grunden til, at de fleste oversættelsesværktøjer ødelægger det. Det virkelige problem er ikke sprogmodellens kvalitet – det er, at forbruger-AI-værktøjer ikke forstår i18nexts strukturelle regler.

Denne guide gennemgår, hvad der gør i18next JSON anderledes end andre lokalitetsformater, hvorfor naive oversættelsestilgange ødelægger React- og Next.js-apps, og hvordan man automatiserer oversættelse sikkert på tværs af snesevis af lokaliteter uden manuelt at gennemgå hver nøgle.

Hvad er i18next JSON, og hvorfor oversættelse er vanskeligt

i18next er det mest udbredte i18n-bibliotek i JavaScript-økosystemet. Det driver React (react-i18next), Next.js (next-i18next, App Router next-intl), Vue og Node backend-tjenester. Det gemmer oversættelige strenge i flade eller indlejrede JSON-filer, én pr. lokalitet.

En typisk fil ser sådan ud:

{
  "welcome": "Welcome, {{userName}}!",
  "cart": {
    "empty": "Your cart is empty",
    "items_one": "{{count}} item in your cart",
    "items_other": "{{count}} items in your cart"
  },
  "errors": {
    "network": "Network error. <strong>Please retry</strong>."
  }
}

Dette ser simpelt ud, men tre ting gør det farligt at oversætte med generel AI.

Interpolationstokens er strukturelle, ikke tekst

Sekvensen {{userName}} er ikke et ord – det er en pladsholder, som runtime erstatter med data. Tilføj et mellemrum ({{ userName }}), omdøb det, eller oversæt den indre identifikator, og runtime fejler lydløst eller kaster en fejl. Nogle oversættere konverterer hjælpsomt {{count}} til {{conteo}} på spansk. Din app forsøger nu at interpolere en variabel, der ikke eksisterer, og gengiver den rå pladsholder til din bruger.

Pluraliseringsnøgler er magiske suffikser

i18next registrerer pluralis ud fra suffikser: _zero, _one, _two, _few, _many, _other. Dette er ikke vilkårlige strenge – de skal matche CLDR-pluraliskategorierne for den mållokale. Engelsk bruger kun _one og _other. Russisk, arabisk og polsk bruger op til seks kategorier. Hvis din oversætter udelader _other eller omdøber det, brydes fallback-kæden.

Indlejrede nøgler skal forblive intakte

I modsætning til Gettext .po-filer, som er flade nøgle-værdi-par, kan i18next-filer indlejres vilkårligt. En doven oversætter kan fladgøre strukturen, ændre nøgle-navne for at matche oversat tekst eller omarrangere objekter. Dit t('cart.items_other')-kald i koden løser ikke længere op.

Dårlige løsninger udviklere prøver først

Hvert team går igennem den samme tre-trins fejlcirkel, før de investerer i en rigtig løsning.

Fase Et: Indsæt i ChatGPT

Du kopierer 200 nøgler ind i ChatGPT, spørger "oversæt denne JSON til spansk," og indsætter resultatet tilbage. Det virker for 180 nøgler. Tyve har fået tilføjet mellemrum inde i {{...}}, tre har fået omskrevne pluralissuffikser, og et <strong>-tag blev oversat til <fuerte>. Dit build fejler enten eller sender lydløst ødelagte strenge til produktion.

Fase To: Google Translate API

Du forbinder Google Translate REST API'et, itererer over din JSON og sender hver værdi. Hastigheden er god. Kvaliteten er det ikke. Googles API behandler hver streng isoleret – ingen kontekst om din app, ingen forståelse for, at {{count}} er en pladsholder, ingen bevidsthed om, at nøglen cart.empty er anderledes end cart.items_one. Du har stadig brug for menneskelig gennemgang af hver nøgle.

Fase Tre: Kommercielle TMS-platforme

Du tilmelder dig et oversættelsesstyringssystem. De opkræver pr. ord, kræver GitHub-integrationer og binder dig til månedlige pladser. For et sideprojekt eller en indie-app bryder økonomien hurtigt sammen – og du rammer stadig de samme problemer med ødelagte pladsholdere, hvis deres motor ikke parser i18next-formatet specifikt.

De samme fejltyper viser sig også i Gettext-arbejdsgange. Vores guide om hvordan man oversætter .po-filer uden at ødelægge kodevariabler dækker det parallelle problem for WordPress og andre Gettext-baserede stakke.

Den sikre tilgang: Syntaksbevidst oversættelse

Den eneste pålidelige måde at oversætte i18next JSON i stor skala er med et værktøj, der først parser formatet, låser syntaksen og kun sender oversættelig tekst til AI'en.

Her er, hvad syntaksbevidst behandling gør under motorhjelmen:

1. Parser JSON'en til et abstrakt træ, bevarer nøglestier og indlejring.
2. Identificerer interpolationstokens ({{name}}, {{count, number}}, {{date, datetime}}) og erstatter dem med pladsholder-ID'er.
3. Identificerer HTML-tags inde i Trans-komponenter (<0>, <strong>, <br/>) og låser dem.
4. Registrerer pluralisnøgler via suffiks og mapper dem til CLDR-regler for den mållokale.
5. Sender kun den rensede tekst til LLM'en med kontekst om nøglestien.
6. Genindsætter de originale tokens og tags på deres præcise positioner.
7. Validerer outputtet – hvis en pladsholder mangler eller er fejlformet, gendannes den til kilde.

Dette er det samme princip, der gør skybaseret PO-oversættelse sikker. Hvis du er nysgerrig på den underliggende arkitektur, forklarer vores sammenligning af AI-oversættelseskvalitet, hvordan forskellige LLM'er håndterer disse begrænsninger.

Trin for trin: Oversæt i18next JSON med SimplePoTranslate

SimplePoTranslate understøtter i18next JSON nativt på Pro- og Lifetime-abonnementer. Gratis niveau dækker i øjeblikket .po og .pot – opgrader eller brug en prøveperiode for at få adgang til JSON.

1. Forbered din kildefil

Brug din engelske (eller kildelokale) fil som master. Sørg for, at det er gyldig JSON og indeholder alle de nøgler, din app bruger. En almindelig fejl er at efterlade forældede eller ubrugte nøgler, hvilket bruger din oversættelseskvote på strenge, du aldrig vil gengive.

# From your project root
cp public/locales/en/common.json ~/Desktop/common.json

2. Upload til SimplePoTranslate

Log ind på dit dashboard, klik på Ny oversættelse, og upload common.json. Platformen registrerer automatisk i18next-formatet. Vælg dit målsprog blandt de 41 understøttede lokaliteter, vælg en tone (professionel, afslappet, marketing), og indsend.

3. Lad motoren arbejde

Under motorhjelmen parses filen, opdeles i sikre batches og oversættes parallelt. Interpolationstokens er låst. Pluralissuffikser bevares og mappes til den mållokale CLDR-regler. HTML inde i Trans-komponenter forbliver intakt.

4. Download ZIP-filen

Du får en ZIP-fil tilbage, der indeholder den oversatte JSON plus alternative formater (.php til PHP-apps, .po til kompatibilitet på tværs af værktøjer). Placer JSON'en i public/locales/es/common.json og genudgiv.

unzip common_es.zip
mv common.json public/locales/es/common.json
npm run build

5. Gentag eller Batch

For alle 12 mållokaliteter skal du indsende 12 opgaver. Pro-planens kvoter dækker snesevis af typiske SaaS-apps. For monorepos med flere navneområdefiler skal du uploade hver separat eller batch'e dem sekventielt.

Integration af oversættelser tilbage i din app

Når du har oversat JSON-filer, er integrationen den nemme del. Et par faldgruber:

• Verificer pluraliskategorier. Kør en hurtig røgtest pr. lokalitet: gengiv en komponent med count={0}, count={1}, count={5} og bekræft, at alle tre producerer den rigtige streng.
• Kontroller RTL-lokaliteter. Hvis du har oversat til arabisk, hebraisk eller persisk, kræver din UI RTL-bevidst CSS. Vores WordPress RTL-oversættelsesguide dækker de CSS-mønstre, der også gælder for React-apps.
• Opsæt en fallback-kæde. Konfigurer i18next til at falde tilbage til engelsk, hvis en nøgle mangler, så midt-deploy-tilstande ikke får brugere til at crashe.
• Lås din kildefil i CI. Tilføj et tjek, der afviser PR'er, hvor en/common.json ændres uden at regenerere andre lokaliteter. Oversættelsesdrift er den enkelt største årsag til i18n-fejl i produktion.

For teams, der leverer på tværs af React, Next.js og serversiden, er det en kæmpe gevinst at producere alle formater fra én kilde. Vores indlæg om én fil ind, fem formater ud forklarer, hvorfor multi-format output er vigtigt for langsigtet vedligeholdelse.

Når JSON ikke er nok: Håndtering af komplekse tilfælde

Et par specifikke tilfælde kræver ekstra opmærksomhed.

ICU MessageFormat

Hvis dit projekt bruger ICU-syntaks ({count, plural, one {1 item} other {# items}}), behandler i18next det som interpolation, men strukturen er mere kompleks. Sørg for, at dit oversættelsesværktøj genkender ICU-parametre og ikke oversætter kategorinavne som one, other eller formatidentifikatorer som plural, number, date.

Trans-komponent med React-noder

<Trans> gengiver React-komponenter inde i oversatte strenge, indekseret efter indeks (<0>, <1>). Oversætteren skal bevare den nøjagtige tag-rækkefølge. SimplePoTranslates syntakslås håndterer dette, men hvis du bruger et andet værktøj, skal du verificere, før du udgiver.

Navneområdefiler

Store apps opdeler lokaliteter i navneområder: common.json, dashboard.json, checkout.json. Oversæt hver fil uafhængigt – flet dem ikke. Kontekstkvaliteten er højere, når hver navneområdes nøglestier forbliver afgrænsede.

Opsummering

At oversætte i18next JSON til en React- eller Next.js-app handler ikke om at vælge den bedste AI-model. Det handler om at respektere formatets strukturelle regler: interpolationer, pluralissuffikser, indlejrede nøgler og HTML-tags skal overleve returrejsen. Forbruger-AI-værktøjer behandler JSON som ustruktureret tekst. Syntaksbevidste værktøjer parser det som strukturerede data og rører kun oversættelige overflader.

Hvis du lancerer en flersproget app og har kopieret og indsat JSON i chatgrænseflader, kender du allerede omkostningerne: timevis af manuel gennemgang pr. lokalitet, tilfældige produktionsfejl og en voksende bunke af ødelagte pluralisformer. En formatbevidst pipeline fjerner hver eneste af disse fejltyper.

Klar til at oversætte dine i18next JSON-filer sikkert? Prøv SimplePoTranslate gratis – intet kreditkort påkrævet. Upload én gang, udgiv på 41 sprog.