Beste praktijken
Plaats URL's in variabelen
Wanneer je strings vertaalt die URL's of vergelijkbare gegevens bevatten, is het aan te raden deze URL's in variabelen te plaatsen en ze vervolgens binnen je sjablonen te gebruiken.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>Gebruik ARIA-labels
Bij het vertalen van de tekst van interactieve elementen zoals knoppen is het belangrijk om ARIA-labels op te nemen om de toegankelijkheid te waarborgen. ARIA-labels helpen schermlezers beschrijvende informatie te geven over de functie van het element.
Bijvoorbeeld, als je een knop hebt waarmee gebruikers tekst uit een codeblok kunnen kopiëren, kun je het aria-label attribuut gebruiken om een duidelijke beschrijving te geven:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>Dit voelt ergens erg meta.
Globale origins-array en meerdere origins per component
Dit patroon werkt alleen bij gebruik van de Next.js Pages Router.
Als je met grotere applicaties werkt, is het aan te raden strings en vertalingen op te splitsen in meerdere, kleinere origins. Deze aanpak helpt de bundelgrootte en overdrachtstijden te verkleinen en zorgt voor efficiënte en schaalbare lokalisatie.
Hoewel dit eenvoudig is wanneer je alleen aan de clientzijde rendert, wordt het beheren van origins snel complex wanneer je vertalingen ophaalt voor server-side rendering. Je kunt het beheer van origins echter automatiseren door de TacoTranslate client origins array te gebruiken.
Bekijk dit voorbeeld, waarin we onze componenten en pagina's in aparte bestanden hebben ondergebracht.
import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';
// Set an origin name for this component
const origin = 'components/pricing-table';
// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);
export default function PricingTable() {
return (
<TacoTranslate origin={origin}>
<Translate string="Pricing table" />
// ...
</TacoTranslate>
);
}import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';
const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);
export default function PricingPage() {
return (
<TacoTranslate origin={origin}>
<Translate string="Pricing page" />
<PricingTable />
</TacoTranslate>
);
}
// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}Bekijk onze voorbeelden van server-side rendering voor meer informatie over getTacoTranslateStaticProps.