Praktik terbaik
Letakkan URL dalam variabel
Saat menerjemahkan string yang berisi URL atau data serupa, sebaiknya letakkan URL tersebut ke dalam variabel dan kemudian rujuk variabel itu dalam template Anda.
<Translate
string={`Click <a href="{{url}}">here</a>`}
variables={{url: 'https://tacotranslate.com'}}
/>
Gunakan label ARIA
Ketika menerjemahkan teks elemen interaktif seperti tombol, penting untuk menyertakan label ARIA untuk memastikan aksesibilitas. 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 origin global dan beberapa origin pada komponen
Pola ini hanya berfungsi saat menggunakan Next.js Pages Router.
Saat bekerja dengan aplikasi yang lebih besar, ada manfaatnya membagi string dan terjemahan menjadi beberapa origin yang lebih kecil. Pendekatan ini membantu mengurangi ukuran bundle dan waktu transfer, sehingga memastikan lokalisasi yang efisien dan dapat diskalakan.
Meskipun ini sederhana saat merender hanya di sisi klien, mengelola beberapa origin dengan cepat menjadi kompleks saat mengambil terjemahan untuk server-side rendering. Namun, Anda dapat mengotomatiskan pengelolaan origin dengan memanfaatkan array TacoTranslate client origins
.
Perhatikan contoh ini, di mana kami memisahkan komponen dan halaman ke dalam berkas terpisah.
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>
);
}
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 rendering sisi server kami untuk informasi lebih lanjut tentang getTacoTranslateStaticProps
.