Een React- of Next.js-site meertalig maken (next-intl) | We.Inc
Vertaal een React- of Next.js-site op de juiste manier: berichtbestanden, locale-routing met next-intl, Intl-opmaak voor datums, bedragen en meervouden, rechts-naar-links-layouts en hreflang-tags.
Bewaar elke tekst in één JSON-berichtbestand per taal, geef elke taal een eigen URL zoals /de/about, en maak datums, prijzen en meervouden op met de ingebouwde Intl API's van de browser. In de Next.js App Router verbindt next-intl dit allemaal: een [locale]-routesegment, een proxy die de taal kiest, en useTranslations in componenten.
De onderdelen van een vertaalde site
Onderdeel
Wat u gebruikt
Teksten
messages/en.json, messages/de.json enzovoort
URL's
Eén padprefix per taal: /en/..., /de/...
Taaldetectie
createMiddleware van next-intl in proxy.ts (middleware.ts vóór Next.js 16)
Datums, getallen, bedragen
Intl.DateTimeFormat en Intl.NumberFormat
Meervouden
ICU-berichtsyntaxis of Intl.PluralRules
Zoekmachines
hreflang-links voor elke taalversie, plus x-default
Vertalen is meer dan woorden uitwisselen. De woordvolgorde verandert, meervoudsregels verschillen, Arabisch leest van rechts naar links en elk land schrijft datums op zijn eigen manier. Probeer de schakelaar hieronder om één kleine productkaart van taal te zien wisselen, en bouw daarna hetzelfde in uw app met de setupbestanden en de hreflang-generator.
Kies een taal in de demo. De kaart wisselt zijn berichten, maakt prijs en datum op voor die locale, en draait de richting om voor Arabisch.
Wijzig het aantal artikelen om te zien hoe elke taal zijn eigen meervoudsvorm kiest.
Kopieer de next-intl-setupbestanden naar een Next.js App Router-project.
Vul uw domein en talen in de hreflang-generator in en plak de tags, of het metadata-object, in uw layout.
Bouw nooit zinnen door fragmenten aan elkaar te plakken. Vertaal hele zinnen met placeholders zoals {count}, omdat de woordvolgorde verschilt.
Laat ruimte in uw layout, want een vertaald label is vaak merkbaar langer dan het Engelse.
Stel lang in op het html-element voor elke taal, en dir="rtl" voor talen die van rechts naar links lezen.
Vermijd vlaggen in taalkiezers. Vlaggen staan voor landen, en veel talen worden in meerdere landen gesproken.
Laat mensen handmatig van taal wisselen en onthoud hun keuze, in plaats van alleen op browserinstellingen te vertrouwen.
Veelgestelde vragen
Welke i18n-bibliotheek gebruik ik met React?
Voor de Next.js App Router is next-intl er speciaal voor gemaakt en ondersteunt het Server Components. Voor een gewone React-app zonder Next.js kiest u een bibliotheek die berichten als JSON opslaat, zodat later overstappen naar een andere beheersbaar blijft.
Horen talen in submappen, subdomeinen of aparte domeinen?
Submappen zoals example.com/de/ zijn het eenvoudigst te beheren, omdat één site en één domein alles dragen. next-intl ondersteunt ook routing op basis van domeinen als u de.example.com of een landendomein nodig hebt.
Hoe voeg ik hreflang toe in Next.js?
Geef alternates.languages terug vanuit metadata of generateMetadata, met één item per taal-URL. Next.js schrijft voor elk ervan een link rel="alternate" hreflang-tag. Elke taalversie moet alle andere en zichzelf vermelden, anders kunnen zoekmachines de set negeren.
Kan ik mijn site machinaal vertalen?
U kunt machinevertaling gebruiken als eerste versie, maar laat een vloeiende spreker het nakijken, vooral koppen, prijzen en juridische tekst. Magere of niet-nagekeken vertalingen kunnen lezers verwarren en het vertrouwen schaden.
Berichten, geen teksten in componenten
Elk stukje tekst dat iemand ziet, hoort uit een berichtbestand te komen met een key op basis van betekenis, zoals Cart.checkoutButton. Ontwikkelaars bewerken het Engels, vertalers bewerken de andere bestanden, en niemand hoeft in componenten te zoeken naar hard-coded tekst.
Namespaces per component houden bestanden leesbaar. useTranslations('Cart') van next-intl geeft u dan t('checkoutButton'), alleen binnen dat component.
Laat Intl de opmaak doen
Intl.NumberFormat schrijft 1234.5 euro als 1.234,50 € voor een Duitse lezer, met het symbool en de scheidingstekens geplaatst zoals die locale verwacht. Intl.DateTimeFormat doet hetzelfde voor datums, en Intl.PluralRules vertelt u of een getal in een bepaalde taal de vorm one, few, many of other krijgt.
Deze API's zitten in elke moderne browser en in Node, dus opmaak voegt geen gewicht toe aan uw bundle en blijft correct voor talen die u nooit hebt bestudeerd.
Talen die van rechts naar links lezen
Arabisch, Hebreeuws, Perzisch en Urdu lezen van rechts naar links. dir="rtl" op het html-element spiegelt de tekstuitlijning en de volgorde van inline-inhoud, maar vaste left- en right-waarden in CSS blijven staan.
Gebruik logische properties zoals margin-inline-start en padding-inline-end, of de ms- en pe-utilities van Tailwind, zodat de witruimte automatisch meedraait met de richting.
next-intl-setup voor de App Router
Installeer met npm install next-intl. Deze bestanden volgen de structuur uit de eigen startgids van next-intl voor routing op basis van locale.
Eén bestand per taal, met in elk dezelfde keys. ICU-syntaxis regelt meervouden binnen het bericht.
src/i18n/routing.ts en src/proxy.ts
Routing somt uw locales één keer op. De proxy (vóór Next.js 16 middleware.ts genoemd) stuurt bezoekers door naar een taalprefix.
src/i18n/request.ts
Leest de locale uit het [locale]-segment, weigert onbekende locales en laadt de berichten van die taal.
next.config.ts, layout en een pagina
De plugin koppelt request.ts. Verplaats uw pagina's naar app/[locale]/ en lees berichten met useTranslations. next/root-params staat standaard aan vanaf Next.js 16.3; eerdere versies hebben experimental.rootParams nodig.
Opmaak zonder bibliotheek
Intl in gewoon JavaScript
Werkt in elke React-app, vertaald of niet.
hreflang-regels die zoekmachines controleren
Taalannotaties goed instellen
Regel
Voorbeeld
Gebruik volledige absolute URL's
Elke versie vermeldt zichzelf en alle andere
De Duitse pagina linkt naar en, de, ar en x-default
Taal is ISO 639-1, optionele regio ISO 3166-1 alpha-2
de, en-GB, pt-BR
Nooit alleen een regio
be is Wit-Russisch, niet België; gebruik nl-BE of fr-BE
x-default voor alle anderen
Verwijst naar een taalkiezer of uw hoofdversie
Probeer het: één kaart in vijf talen
Wissel van taal en wijzig het aantal artikelen. Teksten komen uit een berichtobject, en de prijs, datum en meervoudsvorm komen uit de Intl API's van de browser.
Taal
Artikelen in winkelwagen: {n}
Gekozen meervoudscategorie:
Richting:
De demo rekent geen valuta om; hij maakt alleen hetzelfde getal op.
hreflang-generator
Vul uw domein, een paginapad en uw taalcodes in om de link-tags voor de head te krijgen, of het alternates-object voor Next.js.
Domein
Paginapad
Taalcodes (gescheiden door komma's)
x-default-taal
Ongeldige codes overgeslagen: {codes}. Gebruik een vorm zoals de of en-GB.