Poner URLs en variables

Al traducir cadenas que contienen URLs o datos similares, se considera una buena práctica colocar estas URLs dentro de variables y luego referenciarlas dentro de tus plantillas.

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"
/>

Algo acerca de esto se siente muy meta.

Matriz global de orígenes y múltiples orígenes de componentes

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 varios orígenes más pequeños. Este enfoque ayuda a reducir el tamaño de los paquetes y los tiempos de transferencia, lo que garantiza una localización eficiente y escalable.

Si bien esto es sencillo cuando se representa solo en el lado del cliente, la administración de orígenes se vuelve rápidamente compleja cuando se obtienen traducciones para la representación del lado del servidor. Sin embargo, puede automatizar la administración de origen utilizando el cliente origins matriz TacoTranslate.

Considere este ejemplo, donde hemos separado nuestros componentes y páginas en archivos separados.

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslate from '../utilities/tacotranslate';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslate.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: tacoTranslate});
}

Consulte nuestros ejemplos de renderizado del lado del servidor para obtener más información sobre getTacoTranslateStaticProps.