Penyelesaian terbaik untuk pengantarabangsaan (i18n) dalam aplikasi React

Bagaimana ia berfungsi

Pasang pakej TacoTranslate melalui npm:

npm install tacotranslate

Apabila anda telah memasang modul tersebut, anda perlu membuat akaun TacoTranslate, sebuah projek terjemahan, dan kunci API yang berkaitan. Buat akaun di sini. Ia percuma, dan tidak memerlukan anda menambah kad kredit.

Dalam antara muka aplikasi TacoTranslate, buat sebuah projek dan pergi ke tab kunci API. Buat satu kunci read dan satu kunci read/write. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kunci read ialah apa yang kami panggil public dan kunci read/write ialah secret. Contohnya, anda boleh menambahkannya ke fail .env di akar projek anda.

Anda juga perlu menambah dua lagi pembolehubah persekitaran: TACOTRANSLATE_DEFAULT_LOCALE dan TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kod lokal lalai yang digunakan sebagai sandaran. Dalam contoh ini, kami akan menetapkannya kepada en untuk Bahasa Inggeris.
• TACOTRANSLATE_ORIGIN: “folder” di mana rentetan anda akan disimpan, seperti URL laman web anda. Baca lebih lanjut mengenai origin di sini.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Pastikan anda tidak pernah mendedahkan kunci API rahsia read/write kepada persekitaran produksi di sisi klien.

Menyiapkan TacoTranslate

Inisialisasikan TacoTranslate dalam aplikasi React anda dengan membungkus aplikasi anda dalam penyedia konteks TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Anda kini boleh menggunakan komponen Translate di mana sahaja dalam aplikasi anda untuk memaparkan teks yang diterjemahkan! Pastikan untuk menyemak dokumentasi kami untuk maklumat lanjut dan panduan pelaksanaan yang khusus untuk tetapan anda.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Kelebihan menggunakan TacoTranslate

• Menjimatkan masa: Mengautomasikan proses yang membosankan untuk pelokalan dan pengumpulan rentetan teks, menjimatkan masa berharga anda.
• Kos efektif: Mengurangkan keperluan untuk terjemahan manual dan seterusnya menurunkan kos pelokalan anda.
• Ketepatan yang dipertingkatkan: Terjemahan dikuasakan oleh AI memastikan hasil yang tepat dari segi konteks dan berkualiti tinggi.
• Penyelesaian yang boleh diskalakan: Mudah menambah sokongan untuk bahasa baharu apabila aplikasi dan asas pelanggan anda berkembang.

Mulakan hari ini!

Aplikasi React anda akan diterjemahkan secara automatik apabila anda menambahkan sebarang rentetan ke komponen Translate. Perhatikan bahawa hanya persekitaran yang mempunyai kebenaran read/write pada kunci API akan boleh mencipta rentetan baharu untuk diterjemahkan.

Kami mengesyorkan mempunyai persekitaran staging yang tertutup dan selamat di mana anda boleh menguji aplikasi produksi anda, menambah rentetan baharu sebelum dilancarkan. Ini akan menghalang sesiapa sesiapa daripada mencuri kunci API rahsia anda, dan berpotensi menyebabkan projek terjemahan anda membengkak dengan menambah rentetan yang tidak diingini.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!