Buenas prácticas
Coloca las URLs en variables
Al traducir cadenas que contienen URL u otros datos similares, se considera una buena práctica colocar dichas URLs en variables y luego referenciarlas en sus plantillas.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Usar etiquetas ARIA
Al traducir el texto de elementos interactivos como botones, es importante incluir etiquetas ARIA para garantizar la accesibilidad. Las etiquetas ARIA ayudan a los lectores de pantalla a proporcionar información descriptiva sobre la función del elemento.
Por ejemplo, si tienes un botón que permite a los usuarios copiar texto de un bloque de código, puedes usar el atributo aria-label
para proporcionar una descripción clara:
<Translate
aria-label={useTranslation('Copy to clipboard')}
string="Copy"
/>
Hay algo en esto que se siente muy meta.
Array global de orígenes y múltiples orígenes por componente
Este patrón solo funciona cuando se usa el Next.js Pages Router.
Cuando se trabaja con aplicaciones más grandes, es beneficioso dividir las cadenas y las traducciones en múltiples orígenes más pequeños. Este enfoque ayuda a reducir el tamaño de los paquetes y los tiempos de transferencia, garantizando una localización eficiente y escalable.
Si bien esto es sencillo cuando se renderiza únicamente en el lado del cliente, la gestión de orígenes se vuelve rápidamente compleja al obtener traducciones para el renderizado en el servidor. Sin embargo, puede automatizar la gestión de orígenes utilizando el cliente de TacoTranslate origins
array.
Considere este ejemplo, en el que hemos separado nuestros componentes y páginas en archivos distintos.
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});
}
Consulta nuestros ejemplos de renderizado del lado del servidor para obtener más información sobre getTacoTranslateStaticProps
.