Bedste praksis
Sæt URL'er i variabler
Når man oversætter strenge, der indeholder URL'er eller lignende data, er det god praksis at placere disse URL'er i variabler og derefter referere til dem i dine skabeloner.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Brug ARIA-etiketter
Når du oversætter tekst til interaktive elementer som knapper, er det vigtigt at inkludere ARIA-labels for at sikre tilgængelighed. ARIA-labels hjælper skærmlæsere med at give beskrivende oplysninger om elementets funktion.
For eksempel, hvis du har en knap, der lader brugere kopiere tekst fra en kodeblok, kan du bruge aria-label
attributten til at angive en klar beskrivelse:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Noget ved det her føles meget meta.
Global origins-array og flere oprindelser for komponenter
Dette mønster virker kun, når du bruger Next.js Pages Router.
Når man arbejder med større applikationer, er det fordelagtigt at opdele strenge og oversættelser i flere, mindre origins. Denne tilgang hjælper med at reducere bundlestørrelser og overførselstider, hvilket sikrer effektiv og skalerbar lokalisering.
Selvom dette er ligetil, når der kun gengives på klientsiden, bliver håndteringen af origins hurtigt kompleks, når man henter oversættelser til server-side rendering. Du kan dog automatisere håndteringen af origins ved at bruge TacoTranslate-klientens origins
array.
Overvej dette eksempel, hvor vi har opdelt vores komponenter og sider i separate filer.
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});
}
Se vores eksempler på server-side rendering for flere oplysninger om getTacoTranslateStaticProps
.