Dokumentasi: Praktik Terbaik

Praktik terbaik

Indonesian

Letakkan URL di variabel

Saat menerjemahkan string yang berisi URL atau data serupa, praktik yang baik adalah menempatkan URL tersebut di dalam variabel dan kemudian merujuknya dalam template Anda.

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

Saat menerjemahkan teks elemen interaktif seperti tombol, penting untuk menyertakan label ARIA agar aksesibilitas terjamin. Label ARIA membantu pembaca layar memberikan informasi deskriptif tentang fungsi elemen tersebut.

Misalnya, jika Anda memiliki tombol yang memungkinkan pengguna menyalin teks dari blok kode, Anda dapat menggunakan atribut aria-label untuk memberikan deskripsi yang jelas:

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

Ada sesuatu tentang ini yang terasa sangat meta.

Array asal global dan beberapa asal komponen

Pola ini hanya berfungsi saat menggunakan Next.js Pages Router.

Saat bekerja dengan aplikasi yang lebih besar, ada baiknya memisahkan string dan terjemahan ke beberapa origin yang lebih kecil. Pendekatan ini membantu mengurangi ukuran bundle dan waktu transfer, sehingga memastikan lokalisasi yang efisien dan dapat diskalakan.

Walaupun hal ini sederhana saat rendering hanya di sisi klien, pengelolaan origin akan cepat menjadi kompleks ketika mengambil terjemahan untuk rendering di sisi server. Namun, Anda dapat mengotomatiskan pengelolaan origin dengan memanfaatkan array origins pada klien TacoTranslate.

Pertimbangkan contoh ini, di mana kami telah memisahkan komponen dan halaman kami ke dalam file-file terpisah.

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

Lihat contoh server-side rendering kami untuk informasi lebih lanjut tentang getTacoTranslateStaticProps.

Penanganan kesalahan dan debugging

Praktik terbaik

Gunakan label ARIA

Array asal global dan beberapa asal komponen