Hujjatlar: Eng yaxshi amaliyotlar

Eng yaxshi amaliyotlar

Uzbek

URL manzillarini o'zgaruvchilarga joylashtiring

URL manzillari yoki shunga o‘xshash ma’lumotlarni o‘z ichiga olgan satrlarni tarjima qilayotganda, bu URLlarni avvalo o‘zgaruvchilarga joylashtirib, so‘ngra shablonlaringizda ularga murojaat qilish yaxshi amaliyot hisoblanadi.

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

ARIA yorliqlaridan foydalaning

Tugmalar kabi interaktiv elementlarning matnini tarjima qilayotganda, kirish imkoniyatini ta'minlash uchun ARIA yorliqlarini qo'shish muhimdir. ARIA yorliqlari ekran o'qiydigan dasturlarga elementning vazifasi haqida tushunarli ma'lumot berishga yordam beradi.

Masalan, agar sizda foydalanuvchilarga kod blokidan matnni nusxalash imkonini beruvchi tugma bo'lsa, aniq ta'rif berish uchun aria-label atributidan foydalanishingiz mumkin:

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

Bunda nimadir juda meta kabi tuyuladi.

Global manbalar massivi va bir nechta komponent manbalari

Bu usul faqat Next.js Pages Router ishlatilganda ishlaydi.

Katta ilovalar bilan ishlaganda, satrlar va tarjimalarni bir nechta, kichikroq originlarga ajratish foydalidir. Bu yondashuv paket hajmini va uzatish vaqtlarini kamaytirishga yordam beradi, samarali va miqyoslanadigan lokalizatsiyani ta’minlaydi.

Bu mijoz tomonda (client side) faqat render qilishda oddiy bo‘lsa-da, server tomonda render qilish uchun tarjimalarni olishda originlarni boshqarish tezda murakkablashadi. Biroq, TacoTranslate client origins massividan foydalanib originlarni avtomatlashtirishingiz mumkin.

Quyidagi misolga nazar soling — unda komponentlarimiz va sahifalarimizni alohida fayllarga ajratganmiz.

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

Bizning server-side rendering misollarimizga qarang, ular getTacoTranslateStaticProps haqida ko'proq ma'lumot beradi.

Xatolarni boshqarish va tuzatish