Penyelesaian terbaik untuk pengantarabangsaan (i18n) dalam aplikasi React

Bagaimana ia berfungsi

Pasang pakej TacoTranslate melalui npm:

npm install tacotranslate

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

Dalam antara muka aplikasi TacoTranslate, buat sebuah projek, dan navigasi ke tab kekunci API-nya. Buat satu kekunci read dan satu kekunci read/write. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kekunci read adalah apa yang kami panggil public dan kekunci read/write adalah secret. Sebagai contoh, anda boleh menambahkannya ke dalam fail .env di akar projek anda.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Kod locale fallback lalai. Dalam contoh ini, kami akan menetapkannya kepada en untuk Bahasa Inggeris.
• TACOTRANSLATE_ORIGIN: “Folder” di mana string anda akan disimpan, seperti URL laman web anda. Baca lebih lanjut tentang origins di sini.

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

Pastikan untuk tidak pernah membocorkan kunci API rahsia read/write ke persekitaran pengeluaran sisi klien.

Menyiapkan TacoTranslate

Inisialisasikan TacoTranslate dalam aplikasi React anda dengan membalut 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-mana sahaja dalam aplikasi anda untuk memaparkan teks yang diterjemah! Pastikan anda menyemak dokumentasi kami untuk maklumat lanjut, serta panduan pelaksanaan 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

• Penjimatan masa: Mengautomasikan proses penyesuaian dan pengumpulan rentetan yang membosankan, menjimatkan masa berharga anda.
• Berbaloi dari segi kos: Mengurangkan keperluan terjemahan manual, menurunkan kos penyesuaian anda.
• Ketepatan yang diperbaiki: Terjemahan yang dikuasakan AI memastikan hasil yang tepat mengikut konteks dan berkualiti tinggi.
• Penyelesaian yang boleh diskalakan: Mudah menambah sokongan untuk bahasa baru apabila aplikasi dan pelanggan anda berkembang.

Mulakan hari ini!

Aplikasi React anda akan diterjemahkan secara automatik apabila anda menambah sebarang rentetan ke dalam komponen Translate. Perlu diingat bahawa hanya persekitaran dengan kebenaran read/write pada kekunci API yang boleh mencipta rentetan baru untuk diterjemahkan.

Kami mengesyorkan agar mempunyai persekitaran staging yang tertutup dan selamat di mana anda boleh menguji aplikasi produksi anda, menambah rentetan baru sebelum siaran langsung. Ini akan menghalang sesiapa daripada mencuri kekunci API rahsia anda, dan berpotensi membengkakkan projek terjemahan anda dengan menambah rentetan jahat.

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!