Bygg flerspråkig Next.js-app med next-intl och ICU.
Att lägga till ett andra språk i en webbapp ser enkelt ut tills man försöker. Det är inte bara att översätta ord - det är plural som fungerar olika i olika språk, datum och valutor som formateras olika, ordföljd som varierar, och text som plötsligt blir dubbelt så lång och spränger din layout. Den här guiden går igenom hur du bygger flerspråkighet i Next.js på ett sätt som håller, med next-intl och ICU-formatet som grund.
Bygg in det tidigt - eftermontering är dyrt
Det viktigaste rådet först: planera för flera språk innan du behöver dem, även om du lanserar på ett. Att i efterhand gräva ut all hårdkodad text ur en stor app och ersätta den med översättningsnycklar är ett av de mest otacksamma omtagen jag vet. Om det ens finns en chans att ni ska bli flerspråkiga, lägg grunden från start - det kostar nästan inget då och mycket sedan. Det är ofta en av de första frågorna jag ställer i ett bygge inom webbutveckling.
next-intl: ramverket för App Router
För moderna Next.js-appar med App Router är next-intl ett naturligt val. Det hanterar routing per språk, gör översättningar tillgängliga i både Server Components och klientkomponenter, och integrerar med ramverkets renderingsmodell istället för att slåss mot den. Den vanliga strukturen är att språket blir en del av URL:en, så att varje språk får sin egen adress - bra både för användare och för sökmotorer.
ICU: därför räcker inte enkel ersättning
Det här är delen folk underskattar mest. Naiv översättning ersätter en sträng med en annan, men språk är mer komplicerade än så. "1 meddelande" mot "2 meddelanden" - och vissa språk har fler pluralformer än svenskan. ICU-formatet hanterar det här: det låter översättningen själv uttrycka regler för plural, kön och villkor, så att rätt form väljs efter värdet. Utan ICU bygger du till slut en härva av specialfall i koden; med ICU bor logiken i översättningen där den hör hemma.
Samma sak gäller datum, tider, tal och valutor - de ska formateras enligt språkets konventioner, inte hårdkodas. Använd plattformens inbyggda formatteringsfunktioner istället för att skriva egna.
Automatisk översättning - som utkast, inte facit
Maskinöversättning och AI har blivit imponerande bra och kan vara en enorm hjälp - men behandla det som ett utkast, inte som färdig produkt. AI kan ge er en första översättning av hundratals strängar på minuter, vilket sparar mycket tid. Men nyanser, ton och varumärkesspråk kräver en människa som granskar. Det bästa upplägget jag sett är AI som första pass följt av mänsklig kontroll - snabbheten i det automatiska, kvaliteten i det mänskliga.
Detaljerna som avslöjar en halvfärdig översättning
Det är detaljerna som skiljer en seriös flerspråkig app från en halvfärdig. Textlängd varierar kraftigt mellan språk, så en layout som ser perfekt ut på svenska kan spricka på tyska - testa med långa språk tidigt. Vissa språk skrivs från höger till vänster, vilket påverkar hela layouten. Och en sträng som glömts bort och visas på fel språk avslöjar genast bristen. En genomtänkt grund gör att de här sakerna hanteras systematiskt istället för att dyka upp som överraskningar. Hur ett sådant upplägg ser ut visar jag i kundcase.
Relaterat
- shadcn/ui vs MUI vs Mantine 2026: Designsystem-val för Next.js
- Headless commerce med Shopify Hydrogen + Next.js: Komplett guide
- Next.js 16 i produktion: Partial Prerendering, Cache Components och Turbopack
Vill du ta det vidare?
Jag hjälper team att bygga flerspråkiga Next.js-appar som tål fler språk - med next-intl, ICU och ett vettigt översättningsflöde. Boka ett samtal så går vi igenom era behov.
“Behandla automatisk översättning som ett utkast, inte ett facit. Snabbheten i det automatiska, kvaliteten i det mänskliga.”
- Simon Axelsson
Vanliga frågor
- När bör vi bygga in stöd för flera språk?
- Helst från start, även om ni lanserar på ett enda språk. Att i efterhand ersätta all hårdkodad text med översättningsnycklar i en stor app är ett av de mest otacksamma omtagen som finns. Om det ens är möjligt att ni blir flerspråkiga kostar grunden nästan inget nu och mycket senare.
- Varför räcker det inte att bara översätta strängarna?
- För att språk skiljer sig på fler sätt än ordval. Plural fungerar olika - vissa språk har fler former än svenskan - och datum, tal och valutor formateras olika. ICU-formatet låter översättningen uttrycka regler för plural och villkor, så rätt form väljs efter värdet, istället för att ni bygger specialfall i koden.
- Kan vi använda AI för att översätta hela appen?
- Som ett första utkast, ja, och det sparar mycket tid - AI kan översätta hundratals strängar på minuter. Men behandla det inte som färdig produkt. Nyanser, ton och varumärkesspråk kräver mänsklig granskning. Det bästa upplägget är AI som första pass följt av en människa som kontrollerar.
Simon Axelsson är senior IT-konsult och grundare av SIAX Technology AB. Han hjälper nordiska företag med molninfrastruktur, dataplattformar och AI-automation.
Fler artiklar
