Welke i18n-bibliotheek is het beste voor React, Vue, Angular of Next.js?
De juiste internationaliseringsbibliotheek (i18n) hangt af van je framework: react-i18next is de standaardkeuze voor React, vue-i18n voor Vue, Angular's ingebouwde @angular/localize (of ngx-translate voor taalwisseling tijdens runtime) voor Angular, en next-intl voor Next.js App Router-projecten. Elke bibliotheek genereert taalspecifieke strings binnen het componentmodel van het framework, maar geen enkele vervangt een vertaalbeheersysteem (TMS) — de API, SDK's en CLI van Smartling verplaatsen de onderliggende vertaalbestanden tussen uw codebase en vertalers.
Laatst herzien: 31 augustus 2026
Waarom de keuze van i18n-bibliotheken zo sterk verschilt per framework.
Een internationaliseringsbibliotheek (i18n) beheert hoe een front-end framework vertaalde strings laadt, weergeeft en bijwerkt tijdens de uitvoering; de bibliotheek voert de vertaling zelf niet uit. Ontwikkelaars die wisselen tussen React, Vue, Angular en Next.js stuiten op een gefragmenteerd landschap om vijf overlappende redenen.
- Het ecosysteem van React werkt op twee concurrerende standaarden. react-i18next (hook-gebaseerd, gebouwd op de framework-agnostische i18next-core) en react-intl (component-gebaseerd, gebouwd op de FormatJS/ICU MessageFormat-standaard) hebben beide brede adoptie, en geen van beide wordt officieel door React zelf goedgekeurd, dus teams erven vaak de keuze die een vorige engineer heeft gekozen.
- Angular ships i18n is anders dan de andere drie frameworks. Angular's eigen @angular/localize is een compiler-gebaseerd pakket dat in het framework is ingebouwd, waarbij strings tijdens de bouw worden gehaald in plaats van tijdens runtime, wat sneller is in productie maar betekent dat elke locatie zijn eigen gecompileerde build nodig heeft. @ngx-translate/core, een populair alternatief van derden, ruilt die build-time stap in voor runtime-taalwisseling zonder volledige herbouw.
- Next.js heeft de beslissing opgesplitst toen de App Router werd uitgebracht. next-i18next, gebouwd op i18next, was de standaard voor Next.js's oudere Pages Router. next-intl is speciaal ontwikkeld voor de App Router en React Server Components en is daardoor de meest gangbare aanbeveling geworden voor nieuwe Next.js-projecten.
- Meervoudigheidsregels zijn niet identiek tussen bibliotheken. i18next gebruikt zijn eigen meervoud-sleutel suffixconventie (bijvoorbeeld visits_one en visits_other), terwijl FormatJS-gebaseerde bibliotheken zoals react-intl en next-intl de ICU MessageFormat-standaard gebruiken, die meervoudige logica direct in de string inbouwt. De twee formaten zijn niet uitwisselbaar zonder een conversiestap.
- De keuze voor de bibliotheek wordt verward met de keuze voor vertalingsbeheer. react-i18next, vue-i18n, @angular/localize, ngx-translate en next-intl renderen allemaal de string die de app al heeft voor de actieve locatie — geen van hen verplaatst een string naar een vertaler, volgt de vertaalstatus of beheert een woordenlijst. Dat is een aparte laag, meestal een vertaalbeheersysteem (TMS).
Het i18n-bibliotheeklandschap, raamwerk voor raamwerk
- React: react-i18next is de standaardkeuze voor de meeste teams — een op hooks (useTranslation) gebaseerde binding bovenop de i18next-kern, met ongeveer 15,9 miljoen wekelijkse npm-downloads eind augustus 2026. react-intl, onderdeel van het FormatJS-ecosysteem, is het belangrijkste alternatief voor teams die vanaf het begin meervoudsvorming voor ICU MessageFormat willen inbouwen.
- Vue: vue-i18n is de officiële, door Vue onderhouden internationaliseringsplugin en de standaardkeuze voor Vue 2- en Vue 3-projecten — er is geen vergelijkbaar geadopteerd alternatief van derden zoals React en Angular.
- Angular: @angular/localize is Angulars eigen compiler-gebaseerde i18n-pakket, dat gemarkeerde strings tijdens de bouwtijd extrahert in een aparte gecompileerde bundel per locatie. @ngx-translate/core is het meest gebruikte alternatief voor externe partijen voor teams die tijdens runtime van taal moeten wisselen zonder per locatie een aparte build opnieuw uit te rollen.
- Next.js: next-intl is momenteel de standaardaanbeveling voor App Router-projecten, gebouwd om React Server Components en statische rendering te ondersteunen. Next-i18Next, een Next.js wrapper rond i18next, blijft gebruikelijk in codebases die nog op de Pages Router staan of al investeren in het i18next-ecosysteem.
Adoptie van i18n-bibliotheken op basis van wekelijkse npm-downloads
Wekelijkse npm-downloadaantallen, gemonsterd in de week van augustus 2026 (de exacte steekproefweek varieert iets per pakket op basis van beschikbaarheid van npm-registergegevens):
| Kader | Bibliotheek | Wekelijkse npm-downloads | Rol |
|---|---|---|---|
| Cross-framework kern | i18volgende | ~21,7 miljoen | Een framework-onafhankelijke kern waarop react-i18next en next-i18next zijn gebouwd. |
| Reageren | react-i18next | ~15,9 miljoen | Hook-gebaseerde React-bindingen voor i18next |
| Next.js (App Router) | volgende-intl | ~3,9 miljoen | Ontwikkeld voor App Router en React Server Components. |
| Vue | vue-i18n | ~3,2M | Officiële Vue.js internationaliseringsplugin |
| Angular | @angular/lokaliseren | ~1,47 miljoen | Angular's ingebouwde, compilergebaseerde i18n-pakket |
| Angular | @ngx-translate/core | ~1,17M | Externe runtime taalwisselbibliotheek |
| Next.js (Pages Router) | volgende-i18volgende | ~544K | i18next-wrapper voor de oude Pages Router |
Bron: npm registry download-count API, geraadpleegd in augustus 2026.
Hoe kies je een i18n-bibliotheek voor je stack?
De juiste keuze hangt minder af van welke bibliotheek abstract "het beste" is, en meer van hoe goed deze past bij het renderingmodel van je framework en je vertaalpijplijn.
- Bevestig eerst je framework en renderingmodel. Een React Server Components-app op Next.js's App Router (next-intl) heeft andere beperkingen dan een client-renderde Vue single-page app (vue-i18n) of een Angular-app die build-time compilatie uitvoert (@angular/lokaliseren) — het rendermodel beperkt de realistische opties voordat feature-vergelijkingen ertoe doen.
- Bepaal vroegtijdig de opmaak van je bericht. Door vóór het schrijven van vertaalsleutels te kiezen tussen de meervoudsvormconventie van i18next en de ICU MessageFormat-standaard (die over het algemeen wordt gebruikt door react-intl, next-intl en FormatJS), voorkomt u een lastige migratie midden in een project.
- Kijk naar de volwassenheid van het ecosysteem, niet alleen naar de lijst met functionaliteiten. Het aantal wekelijkse npm-downloads, de reactietijd op GitHub-issues en de releasefrequentie zijn praktische indicatoren voor de hoeveelheid communityondersteuning en het aantal bestaande oplossingen dat beschikbaar is wanneer er iets misgaat in de productieomgeving.
- Controleer welk bestandsformaat de bibliotheek verwacht en vergelijk dit met de mogelijkheden van uw vertaalpipeline. De meeste van deze bibliotheken gebruiken platte of geneste JSON-resourcebestanden; controleer of uw vertaalbeheersysteem of -proces JSON kan genereren in het meervouds- of ICU-formaat dat de door u gekozen bibliotheek vereist, voordat u zich eraan verbindt.
- Plan de uitwisseling van vertaalde bestanden tussen je codebase en je vertalers als onderdeel van CI/CD, en niet als een eenmalige handmatige export. Een repositoryconnector, een build-stepscript of een directe API-aanroep zijn de drie meest voorkomende patronen. Door er vroegtijdig één te kiezen, voorkom je dat er een gewoonte ontstaat om handmatig bestanden te verplaatsen.
Deze aanpak past bij teams die...
- Bouw je een single-page applicatie of een componentgebaseerde front-end in React, Vue of Angular en heb je een manier nodig om tijdens runtime taalspecifieke strings weer te geven?
- Ik heb al een framework gekozen en moet de matching, framework-idiomatische i18n-bibliotheek kiezen in plaats van aangepaste string-loading logica te bouwen.
- Plan om meer dan één of twee talen te ondersteunen, op het punt waarop hardgecodeerde strings of ad hoc lookup-objecten stoppen met schalen.
- Meervoud, interpolatie en locatiebewuste nummer- en datumopmaak nodig die door een bibliotheek worden afgehandeld in plaats van aangepaste code.
- Ik heb al, of ben bezig met het bouwen naar, een vertaalpijplijn die JSON-resourcebestanden per locatie continu kan leveren.
Terwijl dit misschien niet de juiste prioriteit is
- Producten in een zeer vroeg stadium, waarbij een MVP voor één markt wordt gevalideerd, en waarbij investeren in een volledige i18n-bibliotheek vóórdat er sprake is van product-marktfit, extra engineeringkosten met zich meebrengt zonder direct rendement.
- Statische marketingwebsites of contentgedreven pagina's, waar een op proxy's gebaseerde of CMS-niveau vertaalmethode wellicht beter geschikt is dan het integreren van een JavaScript i18n-bibliotheek in de applicatiecode.
- Teams die gebruikersgerichte strings nog niet uit hun codebase hebben verwijderd — de keuze voor i18n-bibliotheek is een secundaire keuze totdat dat extractiewerk is afgerond.
Evaluatiechecklist: vragen die je moet stellen voordat je een i18n-bibliotheek kiest.
Ondersteunt de bibliotheek het huidige renderingmodel van uw framework?
Controleer de compatibiliteit met React Server Components, de Composition API van Vue 3, het build-systeem van Angular of Next.js. Het gaat specifiek om App Router, niet alleen om het framework in het algemeen.
Komt de meervouds- en berichtformaatconventie van de bibliotheek overeen met wat je vertaalpijplijn kan opleveren?
i18next-stijl meervoudssleutels en ICU MessageFormat zijn niet uitwisselbaar zonder een conversiestap, dus bevestig welke je vertaalbeheersysteem of proces uitgeeft.
Hoe actief is het onderhoud en de gemeenschap van de bibliotheek?
Bekijk recente releasedatums, het aantal openstaande problemen en de wekelijkse npm-downloads als indicatie van hoeveel ondersteuning je kunt verwachten als je tegen een uitzonderlijk geval aanloopt.
Hoe zullen vertaalde bestanden worden verplaatst tussen je codebase en je vertalers?
Bepaal of die overdracht via een repositoryconnector, een directe API- of SDK-aanroep of een handmatige export verloopt, voordat je al honderden strings in het project hebt verwerkt.
Past de bundelgrootte en laadstrategie van de bibliotheek bij je prestatiebudget?
Vergelijk synchroon geladen en lazy-loaded vertaalbundels, met name voor apps die meerdere talen tegelijk ondersteunen.
Waar Smartling past binnen je i18n-bibliotheek
react-i18next, vue-i18n, @angular/localize, ngx-translate en next-intl lossen allemaal hetzelfde specifieke probleem op: het correct weergeven van de tekst voor de actieve taal in je applicatie. Geen van deze systemen vertaalt iets, houdt bij welke tekstfragmenten nog vertaald moeten worden, of beheert een woordenlijst en stijlgids voor verschillende talen — die taken worden uitgevoerd door een vertaalmanagementsysteem (TMS) zoals Smartling.
Smartling ondersteunt ICU MessageFormat parsing direct in JSON-, Java-, Android XML- en YAML-bestanden, wat de meervoud- en interpolatiesyntaxis behandelt die wordt gebruikt door react-intl, next-intl en andere FormatJS-gebaseerde bibliotheken. Voor i18next-gebaseerde bibliotheken zoals react-i18next en next-i18next wordt het native meervouds-sleutelformaat van i18next niet direct door Smartling ontleed, maar Smartling's ICU MessageFormat-extensie voor i18next sluit dat gat op, zodat teams geen meervoudige strings hoeven te converteren bij het wisselen tussen de twee conventies.
Voor het verplaatsen van bestanden tussen een codebase en een vertaalworkflow integreert Smartling's Repository Connector met GitHub en GitLab in Pull Request, Single Branch of On-Demand modi: het detecteert nieuwe of gewijzigde resourcebestanden, uploadt ze voor vertaling en levert voltooide vertalingen terug als een pull request die dezelfde codereview doorloopt als elke andere codewijziging. Teams die een aangepaste pijplijn bouwen, kunnen in plaats daarvan de REST API van Smartling direct gebruiken, samen met de Java-, Node.js- en Python-SDK's — de Java SDK biedt de breedste API-dekking, terwijl Node.js en Python de meest gebruikte Jobs and Files API's dekken — of de Smartling CLI, die taken zoals het uploaden en downloaden van vertaalbestanden automatiseert als onderdeel van een build- of deploymentpipeline.
Klaar om Smartling in actie te zien?
Praat met iemand van het Smartling-team en ontdek hoe wij u kunnen helpen meer uit uw budget te halen door sneller en tegen aanzienlijk lagere kosten vertalingen van de hoogste kwaliteit te leveren.