Så här översätter du i18next JSON-filer i React & Next.js (2026)

Du har precis färdigställt en React-app som behöver lanseras på 12 språk senast nästa fredag. Dina lokaliseringsfiler finns i public/locales/en/common.json, du har 340 nycklar per språkinställning, och tokens inuti dina strängar ser ut som {{userName}} och {{count}} spridda över kapslade objekt. Du klistrar in JSON-koden i ChatGPT, och den returnerar {{ nombreUsuario }}, extra mellanslag och halva pluraliseringsnycklarna omdöpta. Din app kraschar vid byggning.

Om du har försökt automatisera i18next JSON-översättning, känner du igen smärtan. JSON-formatet är flexibelt, vilket är precis anledningen till att de flesta översättningsverktyg förstör det. Det verkliga problemet är inte kvaliteten på språkmodellen – det är att AI-verktyg av konsumentkvalitet inte förstår i18nexts strukturella regler.

Denna guide går igenom vad som gör i18next JSON annorlunda från andra lokaliseringsformat, varför naiva översättningsmetoder förstör React- och Next.js-appar, och hur du automatiserar översättning säkert över dussintals språkinställningar utan att manuellt granska varje nyckel.

Vad är i18next JSON och varför översättning är knepigt

i18next är det mest använda i18n-biblioteket i JavaScript-ekosystemet. Det driver React (react-i18next), Next.js (next-i18next, App Router next-intl), Vue och Node backend-tjänster. Det lagrar översättbara strängar i platta eller kapslade JSON-filer, en per språkinställning.

En typisk fil ser ut så här:

{
  "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>."
  }
}

Detta ser enkelt ut, men tre saker gör det farligt att översätta med allmänna AI-verktyg.

Interpoleringstokens är strukturella, inte text

Sekvensen {{userName}} är inte ett ord – det är en platshållare som körtiden ersätter med data. Lägg till ett mellanslag ({{ userName }}), byt namn på det, eller översätt den inre identifieraren och körtiden misslyckas tyst eller kastar ett fel. Vissa översättare konverterar hjälpsamt {{count}} till {{conteo}} på spanska. Din app försöker nu interpolera en variabel som inte existerar och renderar den råa platshållaren till din användare.

Pluraliseringsnycklar är magiska suffix

i18next detekterar pluraler med suffix: _zero, _one, _two, _few, _many, _other. Dessa är inte godtyckliga strängar – de måste matcha CLDR-pluraliseringskategorierna för målspråket. Engelska använder endast _one och _other. Ryska, arabiska och polska använder upp till sex kategorier. Om din översättare tar bort _other eller byter namn på det, bryts återfallsföljden.

Kapslade nycklar måste förbli intakta

Till skillnad från Gettext .po-filer, som är platta nyckel-värde-par, kan i18next-filer kapslas godtyckligt. En lat översättare kan platta ut strukturen, ändra nyckelnamn för att matcha översatt text, eller ändra ordning på objekt. Ditt t('cart.items_other')-anrop i koden löser inte längre upp.

Dåliga lösningar som utvecklare provar först

Varje team går igenom samma tre-stegs misslyckandecykel innan de investerar i en riktig lösning.

Steg ett: Klistra in i ChatGPT

Du kopierar 200 nycklar till ChatGPT, frågar ”översätt denna JSON till spanska” och klistrar in resultatet. Det fungerar för 180 nycklar. Tjugo har fått mellanslag tillagda inuti {{...}}, tre har fått pluraländelserna omskrivna, och en <strong>-tagg översattes till <fuerte>. Din byggnad misslyckas antingen eller skickar tyst trasiga strängar till produktion.

Steg två: Google Translate API

Du kopplar upp Google Translate REST API, itererar över din JSON och skickar varje värde. Hastigheten är utmärkt. Kvaliteten är det inte. Googles API behandlar varje sträng isolerat – inget sammanhang om din app, ingen förståelse för att {{count}} är en platshållare, ingen medvetenhet om att nyckeln cart.empty skiljer sig från cart.items_one. Du behöver fortfarande mänsklig granskning av varje nyckel.

Steg tre: Kommersiella TMS-plattformar

Du registrerar dig för ett översättningshanteringssystem. De debiterar per ord, kräver GitHub-integrationer och låser dig till månatliga platser. För ett sidoprojekt eller en indie-app faller ekonomin snabbt – och du stöter fortfarande på samma problem med platshållarkorruption om deras motor inte specifikt analyserar i18next-formatet.

Samma misslyckandelägen dyker upp även i Gettext-arbetsflöden. Vår guide om hur man översätter .po-filer utan att bryta kodvariabler täcker det parallella problemet för WordPress och andra Gettext-baserade stackar.

Den säkra metoden: Syntaxmedveten översättning

Det enda tillförlitliga sättet att översätta i18next JSON i stor skala är med ett verktyg som först analyserar formatet, låser syntaxen och endast skickar översättningsbar text till AI:n.

Så här fungerar syntaxmedveten bearbetning i bakgrunden:

1. Analyserar JSON-filen till ett abstrakt träd, bevarar nyckelvägar och kapsling.
2. Identifierar interpoleringstokens ({{name}}, {{count, number}}, {{date, datetime}}) och ersätter dem med platshållar-ID:n.
3. Identifierar HTML-taggar inuti Trans-komponenter (<0>, <strong>, <br/>) och låser dem.
4. Detekterar pluralnycklar med suffix och mappar dem till CLDR-regler för målspråket.
5. Skickar endast den rengjorda texten till LLM med kontext om nyckelvägen.
6. Återinför de ursprungliga tokens och taggarna på deras exakta positioner.
7. Validerar utdata – om någon platshållare saknas eller är felaktigt formulerad, återställs den till källan.

Detta är samma princip som gör molnbaserad PO-översättning säker. Om du är nyfiken på den underliggande arkitekturen, förklarar vår jämförelse av AI-översättningskvalitet hur olika LLM:er hanterar dessa begränsningar.

Steg för steg: Översätt i18next JSON med SimplePoTranslate

SimplePoTranslate stöder i18next JSON nativt på Pro- och Lifetime-planer. Gratisnivån täcker för närvarande .po och .pot – uppgradera eller använd en provperiod för att få tillgång till JSON.

1. Förbered din källfil

Använd din engelska (eller källspråkets) fil som masterfil. Se till att den är giltig JSON och innehåller alla nycklar din app använder. Ett vanligt misstag är att lämna kvar inaktuella eller oanvända nycklar, vilket förbrukar din översättningskvot för strängar du aldrig kommer att rendera.

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

2. Ladda upp till SimplePoTranslate

Logga in på din instrumentpanel, klicka på Ny översättning och ladda upp common.json. Plattformen upptäcker automatiskt i18next-formatet. Välj ditt målspråk från de 41 språkinställningarna, välj en ton (professionell, informell, marknadsföring) och skicka in.

3. Låt motorn arbeta

Under huven analyseras filen, delas upp i säkra satser och översätts parallellt. Interpolationstokens låses. Pluraländelser bevaras och mappas till målspråkets CLDR-regler. HTML inuti Trans-komponenter förblir intakt.

4. Ladda ner ZIP-filen

Du får tillbaka en ZIP-fil som innehåller den översatta JSON-filen plus alternativa format (.php för PHP-appar, .po för kompatibilitet mellan verktyg). Lägg JSON-filen i public/locales/es/common.json och driftsätt igen.

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

5. Upprepa eller batchbearbeta

För alla 12 målspråk, skicka in 12 jobb. Pro-planens kvoter täcker dussintals typiska SaaS-appar. För monorepos med flera namrymsfiler, ladda upp varje separat eller batchbearbeta dem sekventiellt.

Integrera översättningar tillbaka i din app

När du väl har översatta JSON-filer är integrationen den enkla delen. Några fallgropar:

• Verifiera pluraliseringskategorier. Kör ett snabbt röktester per språkinställning: rendera en komponent med count={0}, count={1}, count={5} och bekräfta att alla tre producerar rätt sträng.
• Kontrollera RTL-språkinställningar. Om du översatte till arabiska, hebreiska eller persiska, behöver ditt användargränssnitt RTL-medveten CSS. Vår WordPress RTL-översättningsguide täcker de CSS-mönster som även gäller för React-appar.
• Ställ in en återfallsföljd. Konfigurera i18next att falla tillbaka till engelska om en nyckel saknas, så att tillstånd mitt under driftsättning inte kraschar användare.
• Lås din källfil i CI. Lägg till en kontroll som avvisar PR:er där en/common.json ändras utan att återskapa andra språkinställningar. Översättningsavvikelser är den enskilt största orsaken till i18n-buggar i produktion.

För team som levererar över React, Next.js och serversidan är det en stor vinst att producera varje format från en källa. Vårt inlägg om en fil in, fem format ut förklarar varför utdata i flera format är viktigt för långsiktigt underhåll.

När JSON inte räcker: Hantera komplexa fall

Några undantagsfall kräver extra uppmärksamhet.

ICU MessageFormat

Om ditt projekt använder ICU-syntax ({count, plural, one {1 item} other {# items}}), behandlar i18next det som interpolering men strukturen är mer komplex. Se till att ditt översättningsverktyg känner igen ICU-parametrar och inte översätter kategorinamn som one, other, eller formatidentifierare som plural, number, date.

Trans-komponent med React-noder

<Trans> renderar React-komponenter inuti översatta strängar, nycklade efter index (<0>, <1>). Översättaren måste bevara den exakta taggordningen. SimplePoTranslate:s syntaxlås hanterar detta, men om du använder ett annat verktyg, verifiera innan leverans.

Namrymsfiler

Stora appar delar upp språkinställningar i namrymdar: common.json, dashboard.json, checkout.json. Översätt varje fil oberoende – slå inte ihop dem. Kvaliteten på sammanhanget är högre när varje namrymds nyckelvägar förblir avgränsade.

Sammanfattning

Att översätta i18next JSON för en React- eller Next.js-app handlar inte om att välja den bästa AI-modellen. Det handlar om att respektera formatets strukturella regler: interpoleringar, pluraländelser, kapslade nycklar och HTML-taggar måste överleva rundresan. Konsument-AI-verktyg behandlar JSON som ostrukturerad text. Syntaxmedvetna verktyg analyserar det som strukturerad data och rör endast översättbara ytor.

Om du lanserar en flerspråkig app och har kopierat och klistrat in JSON i chattgränssnitt, känner du redan till kostnaden: timmar av manuell granskning per språkinställning, slumpmässiga produktionsbuggar och en växande hög med trasiga pluralformer. En formatmedveten pipeline eliminerar alla dessa misslyckandemöjligheter.

Redo att översätta dina i18next JSON-filer säkert? Prova SimplePoTranslate gratis – inget kreditkort krävs. Ladda upp en gång, leverera på 41 språk.