Dokümantasyon: En iyi uygulamalar

En iyi uygulamalar

Turkish

URL'leri değişkenlere koyun

When translating strings that contain URLs or similar data, it is considered a good practice to place these URLs inside variables and then referencing them within your templates.

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

When translating the text of interactive elements like buttons, it’s important to include ARIA labels to ensure accessibility. ARIA labels help screen readers provide descriptive information about the element’s function.

For instance, if you have a button that lets users copy text from a code block, you can use the aria-label attribute to provide a clear description:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Something about this feels very meta.

Küresel kökenler dizisi ve birden çok bileşen kökeni

This pattern only works when using the Next.js Pages Router.

Daha büyük uygulamalarda çalışırken, metinleri ve çevirileri birden fazla, daha küçük kaynağa bölmek faydalıdır. Bu yaklaşım, paket boyutlarını ve transfer sürelerini azaltmaya yardımcı olur ve verimli ve ölçeklenebilir yerelleştirme sağlar.

Bu, yalnızca istemci tarafında render yaparken basit olsa da, sunucu tarafı render için çeviriler alınırken kaynakları yönetmek hızla karmaşık hale gelir. Ancak, küresel origins dizisini kullanarak kaynak yönetimini otomatikleştirebilirsiniz.

Bileşenlerimizi ve sayfalarımızı ayrı dosyalara ayırdığımız bu örneği inceleyin.

utilities/tacotranslate-origins.ts

export const defaultOrigin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [];

export default origins;

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import origins from '../utilities/tacotranslate-origins';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
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 origins from '../utilities/tacotranslate-origins';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We can now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return customGetStaticProps(context, [...origins, origin]);
}

Daha fazla bilgi için customGetStaticProps hakkında sunucu tarafı render örneklerimizi inceleyin.

Hata yönetimi ve hata ayıklama

En iyi uygulamalar

ARIA etiketlerini kullanın

Küresel kökenler dizisi ve birden çok bileşen kökeni