Beste praksis
Sett URL-er i variabler
Når du oversetter strenger som inneholder URL-er eller lignende data, regnes det som en god praksis å plassere disse URL-ene i variabler og deretter referere til dem i malene dine.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Bruk ARIA-etiketter
Når du oversetter teksten til interaktive elementer som knapper, er det viktig å inkludere ARIA-labels for å sikre tilgjengelighet. ARIA-labels hjelper skjermlesere med å gi beskrivende informasjon om elementets funksjon.
For eksempel, hvis du har en knapp som lar brukere kopiere tekst fra en kodeblokk, kan du bruke aria-label
attributtet for å gi en tydelig beskrivelse:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Noe med dette føles veldig meta.
Global origins-array og flere komponent-opprinnelser
Dette mønsteret fungerer bare når du bruker Next.js Pages Router.
Når man jobber med større applikasjoner, er det fordelaktig å dele opp strenger og oversettelser i flere, mindre opprinnelser. Denne tilnærmingen hjelper med å redusere pakkestørrelser og overføringstider, og sikrer effektiv og skalerbar lokalisering.
Selv om dette er enkelt når man bare renderer på klientsiden, blir det raskt komplisert å håndtere opprinnelser når man henter oversettelser for server-side rendering. Du kan imidlertid automatisere opprinnelseshåndtering ved å bruke TacoTranslate-klientens origins
array.
Se for deg dette eksempelet, hvor vi har separert komponentene og sidene våre i egne 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 våre eksempler på server-side rendering for mer informasjon om getTacoTranslateStaticProps
.