Internationalisering

Voeg meertalige ondersteuning toe aan je app. Gebruik de Proyecta Content API voor redactionele lokalisatie, of vraag de AI om een i18n-framework direct in de code te integreren.

Proyecta ondersteunt twee complementaire benaderingen voor het internationaliseren van de apps die je bouwt:

1. Inhoudslokalisatie via de Proyecta Content API — voor redactionele content (blogposts, FAQ’s, marketingteksten) die vertaald moet worden naar meerdere talen
2. Code-niveau i18n via een vertaalframework — voor UI-teksten, datums, valuta’s en het wisselen van taal tijdens runtime

Beide werken vandaag al. Welke je nodig hebt, hangt af van wat je wilt vertalen.

Proyecta als builder wordt zelf geleverd met 24 locales, dus het product beheerst i18n van nature. Dezelfde patronen zijn van toepassing op de apps die je erin bouwt.

Optie 1: Inhoudslokalisatie (Proyecta Content API)

Als je een content-rijke site bouwt — blog, kennisbank, marketingpagina’s, productcatalogus — gebruik dan de ingebouwde locale-ondersteuning. Vertel de AI welke talen je ondersteunt ("Make the site available in English, Spanish and French") en die registreert ze voor je, met Engels als standaard. Haal je content vervolgens op in de taal van de bezoeker.

Aan de frontend lossen de getypeerde content-hooks van het template de gelokaliseerde velden voor je op — geef de actieve locale van de bezoeker mee en elk localized-veld komt terug als één vertaalde waarde:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';

function Blog({ slug }: { slug: string }) {
    const { i18n } = useTranslation();

    // List a collection in the current locale
    const { data: posts } = useCollection('posts', { locale: i18n.language });

    // Or read one entry by slug in the current locale
    const { data: post } = useEntry('posts', slug, { locale: i18n.language });

    // ...render posts / post
}

Achter de schermen doorloopt het CMS een fallback-keten — de gevraagde locale → de geconfigureerde fallbacks → de standaardlocale — en meldt de code die daadwerkelijk werd geleverd op elke entry als localeResolved. Laat locale weg op eentalige sites en velden komen terug als onbewerkte waarden.

Dit is de juiste keuze wanneer:

• Redacteuren die geen code schrijven content moeten vertalen
• Je wilt dat vertalingen versiebaar zijn
• Je locale-specifieke publicatie nodig hebt (gepland publiceren komt binnenkort — entries vereisen momenteel handmatig publiceren via de API)

Zie Contentbeheer voor de volledige Content API.

Optie 2: Code-niveau i18n-framework

Voor UI-teksten — labels, knoppen, foutmeldingen, datums, valuta’s — vraag je de AI om een i18n-framework direct in je project te integreren:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

De AI zal:

1. Een framework kiezen — de AI gebruikt i18next met react-i18next (de standaard van Proyecta)
2. Catalogusbestanden aanmaken in src/locales/ (één JSON per taal)
3. Teksten inpakken in t()-aanroepen (via de useTranslation-hook van react-i18next)
4. Een taalkiezer-component toevoegen
5. URL-routing instellen met locale-prefixen
6. RTL-layouts (dir="rtl") afhandelen voor Arabisch, Hebreeuws, enz.
7. Getallen, datums en valuta’s opmaken per locale

Automatisch vertalen met de AI

Zodra je basistaal op zijn plek staat, is de AI uitstekend in het produceren van de overige catalogusbestanden:

• "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
• "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

Voor content met hoge impact (juridische teksten, medisch, financieel) laat je een menselijke vertaler de AI-output nakijken voordat je het publiceert.

Beide benaderingen combineren

De meeste echte apps gebruiken beide: code-niveau i18n voor de UI-schil (knoppen, foutmeldingen, navigatie) en de Content API voor redactionele content (artikelen, productbeschrijvingen). Ze bestaan probleemloos naast elkaar — je i18n-framework verwerkt de catalogusbestanden tijdens de build, de Content API levert gelokaliseerde entries tijdens runtime.

Aanbevolen werkwijzen

1. Kies eerst je basistaal en rond de teksten af. Vertalen terwijl de boel nog verandert is frustrerend.
2. Vertalingen in batches uitvoeren. Vertaal niet terwijl je bezig bent — wacht tot een functie stabiel is.
3. Test RTL vroeg als je Arabisch of Hebreeuws ondersteunt. RTL-bugs blijven verborgen totdat je er echt naar kijkt.
4. Voeg lang en dir toe aan <html>. Browsers en schermlezers zijn ervan afhankelijk.
5. Gebruik Intl voor opmaak. Schrijf geen eigen datum- of valutaopmaak — gebruik Intl.DateTimeFormat, Intl.NumberFormat.

Binnenkort beschikbaar

• Locale-beheer UI in de builder — locales kiezen, vertaaldekking bekijken, catalogi bewerken zonder Proyecta te verlaten
• Automatisch vertalen bij opslaan voor nieuwe teksten
• i18n-klare projectsjablonen met het framework vooraf geïntegreerd