Documentación: Mejores prácticas

Mejores prácticas

Spanish (Mexico)

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.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

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 en esto se siente muy meta.

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

Este patrón solo funciona cuando se utiliza el Next.js Pages Router.

Cuando se trabaja con aplicaciones más grandes, es beneficioso dividir las cadenas y traducciones en múltiples orígenes más pequeños. Este enfoque ayuda a disminuir el tamaño de los paquetes y los tiempos de transferencia, asegurando una localización eficiente y escalable.

Si bien esto es sencillo cuando se renderiza solo del lado del cliente, gestionar los orígenes se vuelve rápidamente complejo al obtener traducciones para la renderización del lado del servidor. Sin embargo, puedes automatizar la gestión de orígenes utilizando el arreglo origins del cliente TacoTranslate.

Considera este ejemplo, donde hemos separado nuestros componentes y páginas en archivos distintos.

components/pricing-table.tsx

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>
	);
}

pages/pricing.tsx

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 más información sobre getTacoTranslateStaticProps.

Manejo de errores y depuración

Mejores prácticas

Usar etiquetas ARIA

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